CSS Penulisan

by

CSS adalah bahasa pemrograman untuk membuat style atau tampilan di web.

Jadi, tampilan web jadi keren itu berkat adanya CSS. Di artikel sebelumnya kita telah membahas syntax dan selector CSS.

Artikel ini berhubungan dengan artikel tersebut. Jadi, pastikan kamu telah paham ya.

Yang dimaksud penulisan disini adalah menulis CSS di web alias implementasinya di HTML.

Ada 3 cara menulis CSS, yaitu:

Inline CSS

Cara pertama adalah inline CSS, cara ini sebenarnya sudah sering saya pakai di pembahasan sebelumnya.

Inline CSS adalah cara penulisan kode CSS yang satu line atau baris dengan kode HTML.

Untuk menulis kode selektor CSS, kita hanya tinggal memberi atribut style=" " pada elemen tag HTML.

Contoh, saya ingin buat kotak dengan ukuran panjang 100px, lebar 100px warna hitam. Maka kodenya: 

<div style="width:100px; height:100px; background-color:black">
</div>

Hasilnya adalah kotak dibawah:

Internal CSS

Kedua adalah internal, cara penulisanya yaitu kode CSS ditaruh di antara kode <head> dan </head>.

Kemudian, selector CSS ditaruh diantara tag <style type="text/css"> dan </stye>.

Contohnya: 

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Inline CSS</title>
	<style type="text/css">
		h1 {color:red;}
	</style>
</head>
<body>
	<h1>Hay ini contoh internal CSS</h1>
</body>
</html>

Perhatikan kode <style type="text/css"> dan </stye> yang berada diantara tag <head> dan </head>.

Nantinya, semua kode CSS kamu tulis disitu. Hasil dari kode diatas adalah:

Eksternal CSS

Cara terakhir inilah yang paling banyak digunakan dan memang wajib digunakan.

Kalau kedua cara diatas, yang inline css dan internal css kita harus menulis kodenya satu persatu di setiap halaman.

Kalau halaman web yang dipakai cuma 5 halaman sih tidak masalah, kalau ratusan halaman web bagaimana?

Fungsi utama eksternal css adalah, kita bisa membuat satu buah file .css kemudian bisa dipanggil di halaman apapun.

Penerapannya adalah kamu buat file .CSS terlebih dahulu, satu folder dengan dokumen .HTML. Misal disini saya buat file belajar.html dan belajar_style.css.

Kamu bisa membuatnya dengan menggunakan teks editor HTML favoritmu.

Tahap pertama, isi kode belajar.html dengan kode berikut: 

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Inline CSS</title>
	<style type="text/css">
		h1 {color:blue;}
	</style>
</head>
<body>
	<h1>Akan buat eksternal CSS</h1>
</body>
</html>

Kode tersebut masih menggunakan internal css. Kemudian kita pindahkan kode (CUT) kode CSS internalnya, yaitu: 

h1 {color:blue;}

Kemudian kode tersebut kita paste ke dalam file belajar_style.css. Ingat ya, yang dipindah hanya selectornya saja. Tag <style type="text/css"> dan </stye> tidak ikut dicut.

Untuk memanggil filebelajar_style.css kita membutuhkan kode: 

<link rel="stylesheet" type="text/css" href="belajar_style.css">

Masukkan URL atau nama file css yang ingin dipanggil, dalam hal ini karena masih satu folder jadi langsung saja saya tulis belajar_style.css. Misal, file CSS ada di folder lain, katakanlah folder style. Maka URLnya menjadi style/belajar_style.css

Sehingga, isi dari file belajar.html menjadi: 

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Inline CSS</title>
	<link rel="stylesheet" type="text/css" href="belajar_style.css">
</head>
<body>
	<h1>Akan buat eksternal CSS</h1>
</body>
</html>

Dan file belajar_style.css isinya: 

h1 {color: blue}

Maka, hasilnya akan menjadi:

Pastikan kamu paham ya sampai tahap ini, supaya di tutorial lanjut kamu tidak mengalami kesusahan.

Leave a Comment