Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu, seperti paragraf, list, tabel dan sebagainya. CSS digunakan untuk mendesain tag-tag HTML ini. Secara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.

Metode Inline Style Metode Inline Style adalah cara menginput CSS langsung kedalam tag HTML yang diperlukan dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut: 1 2 3 4 5 6

7 Text ini akan bewarna putih dan background warna hitam 8

9 10 11

Pengertian Selector CSS Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘mengaitkan’ atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS. Selector paling dasar dari CSS adalah tag dari HTML itu sendiri. Efisiensi dari selector ini tergantung dari desain dan kemampuan programmer dalam memakainya. Mengenai selector, akan kita bahas secara lebih detail dalam tutorial CSS selanjutnya.

Pengertian Property CSS Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector. Contoh dari properti seperti: font, boder, padding, dan background-color.

Pengertian Value CSS

Value CSS adalah nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat berupa red, blue, black, atau white. Untuk lebih jelasnya tentang selector, property dan value pada CSS, dapat dilihat pada gambar dibawah ini:

Halaman HTML diatas merupakan halaman HTML sederhana yang terdiri dari tag header (

), paragraf(

), dan list (

). Bagi anda yang belum memahami HTML, keseluruhan tag ini telah kita bahas pada Tutorial Belajar HTML. Perhatikan juga pada bagian dari belajar_css.html tersebut saya juga menyediakan tag <style> yang sebentar lagi akan kita isi dengan CSS. Beberapa dari tag HTML yang ada juga telah memiliki atribut seperti “class” dan “id” yang siap di-“style” menggunakan CSS. Tujuan pertama kita, adalah: 1. Membuat seluruh tag header

berwarna biru

Karena kita menginginkan seluruh tag berwarna biru, maka tinggal menggunakan CSS Tag Selector. Inputkan kode CSS berikut diantara tag <style> dan pada bagian head: 1 h2 { color: blue; 2 } 3

Tujuan kedua adalah : 2. Membuat seluruh tag header

juga berwarna biru

Untuk keperluan ini, kita tinggal menambahkan kode CSS seperti contoh

sebelumnya, sebagai berikut:

1 h2 { 2 color: blue; } 3 4 h3 { color: blue; 5 } 6

Namun CSS memiliki cara yang lebih efisien jika yang kita inginkan adalah style yang sama untuk kedua tag. Kita bisa menggabungkan kode CSS diatas menjadi: 1 2 3

h2 , h3 { color: blue; }

Tanda koma (“,”) sebagai pemisah menginstruksikan kepada browser bahwa kedua tag akan berwarna biru. Tidak ada batasan seberapa banyak selector yang bisa digunakan. Katakan kita ingin seluruh tag header dari

sampai

bewarna biru, maka kode CSSnya adalah: 1 h1 , h2, h3 , h4, h5 , h6{ color: blue; 2 } 3

Tujuan ketiga : 3. Seluruh tag <strong> yang berada di dalam tag

berwarna merah

Jika yang kita maksud adalah seluruh tag <strong> dimanapun berada, maka kode CSSnya cukup sebagai berikut: 1 2 3

strong { color:red; }

Namun jika ditambahkan syarat hanya yang berada di dalam tag

, maka kita harus menyeleksinya menjadi: 1 2 3

p strong { color:red; }

Maksud dari kode “p strong” adalah seluruh tag <strong> yang berada di dalam tag

. perhatikan bahwa kedua tag dipisahkan dengan tanda spasi. Untuk contoh extreme, katakan kita memiliki halaman HTML yang cukup rumit, sehingga kita menginginkan warna merah untuk “seluruh tag yang berada di dalam tag <span>, dimana tag <span> tersebut harus berada di dalam tag

”, maka kode CSSnya adalah: 1 2 3

h2 span i { color:red; }

Yang perlu diingat dalam urutan ini adalah: tag yang dikenai style hanya tag yang paling terakhir, dimana dalam contoh diatas, hanya tag saja yang akan bewarna merah. Tujuan keempat kita: 4. Seluruh tag

yang memiliki class judul, dan seluruh tag yang memiliki class paragraf menjadi italic (huruf miring)

Prinsip dari penggabungan ini sama dengan tujuan 1 sampai 3 sebelumnya, cuma kali ini kita harus menggunakan class selector. Kode CSS untuk keperluan itu adalah: 1 h2.judul , .paragraf { font-style: italic; 2 } 3

h2.judul diperlukan untuk mencari seluruh tag h2 dengan class judul, sedangkan .paragraf digunakan untuk mencari seluruh tag yang memiliki class paragraf, apapun tag tersebut. Sebagai tujuan terakhir dari tutorial cara penggunaan selector css ini: 5. Ubah ukuran text menjadi 14pt untuk tag yang memiliki id “belajar_html”, tag p dengan id “belajar_css” dan seluruh tag h3 yang memiliki class “subheader”

Tujuan diatas terkesan rumit, namun jika anda telah paham tujuan 1 sampai dengan 4 sebelumnya, maka kode CSS berikut akan menjelaskannya: 1 #belajar_html, p#belajar_css, h3.subheader { font-size:14pt; 2 } 3

Sebagai penutup, hasil akhir dari halaman HTML belajar_css.html kita adalah sebagai berikut 1 2 3 4 5 <style type="text/css"> 6 h2 , h3{ 7 color: blue; 8 } p strong { 9 color:red; 1 } 0 h2.judul , .paragraf { 1 font-style: italic; 1 } 1 #belajar_html, p#belajar_css, h3.subheader { 2

1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3

font-size:14pt; }

Belajar CSS

Ini <strong>adalah sebuah <em>paragraf

Saya sedang belajar HTML dari Duniailkom akan terbuka pada tab baru

Saya sedang belajar CSS, mohon jangan diganggu




Daftar Belanjaan

1. <em>Minyak Goreng
2. Sabun Mandi
3. Deterjen
4. Shampoo
5. Obat Nyamuk



6 3 7 3 8 3 9 4 0 4 1 4 2 4 3 4 4

Sebagai contoh, anda tentunya tidak bingung membaca kode CSS berikut: 1 table#daftar_hadir, table#daftar_kuliah { 2 font-size:14pt; } 3 4 5 div.header, div.footer, div#main_menu { width:960px; 6 } 7 Terlepas dari maksud property CSS seperti font-size:14pt; dan width:960px; (yang akan kita pelajari nantinya), contoh selector CSS yang kedua ini merupakan selector yang sering digunakan untuk manipulasi tag div dalam merancang desain web, Untuk lebih mudah memahami, dibawah ini adalah contoh kode CSS: 1 2 body { font-size: 14px; 3 color: navy; 4 } 5 p { background-color:white; 6 color:black; 7 font-weight:bold; 8 } 9 h1, h2 { 10 text-decoration: underline } 11 12 Seperti yang dapat kita lihat dari contoh diatas, aturan penulisan CSS adalah: 

Selector di tempatkan pada awal penulisan CSS. Dalam contoh diatas, body, p, h1 dan h2 adalah selector. Khusus untuk selector yang lebih dari 1 (seperti pada

contoh selector terakhir: h1,h2) untuk memisahkan kedua selector tersebut, digunakan tanda koma (,) 

Setelah penulisan selector, seluruh isi dari property dan valuenya (nilainya), berada di antara kurung kurawal “{“ dan “}”.



Diantara property satu dengan yang lainnya, dipisahkan dengan tanda titik koma (;)



Diantara property dengan value (nilai), dipisahkan dengan anda titik dua (:).



Untuk property yang memiliki 2 kata , spasi diantaranya digantikan dengan tanda hubung (-), contohnya: background-color dan border-left.



Untuk properti yang berada pada baris terakhir, kita boleh mengabaikan tanda ‘;’ sebagai tanda tutup, tetapi disarankan agar tetap menggunakan tanda ‘;’, karena bisa saja kita lupa menuliskan tanda titik koma pada saat menambahkan properti lainnya. Contoh property tanpa tanda ‘;’ dapat di lihat pada contoh “text-decoration: underline”.