Pemrograman Web : Mengenal CSS (Cascading Style Sheet)

Sebelum mempelajari CSS anda harus mengetahui HTML DASAR terlebih dahulu . CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita.

Syntax CSS

CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).

Selector adalah HTML element yang ingin dibuat style nya.

Declaration merupakan isi dari property dan nilai dari CSS.

Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )

Contoh CSS

Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :

p {color:red;text-align:center;}

CSS Coment

Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.

Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :

/*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }

CSS ID dan Class

Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = “para1″

#para1 { text-align:center; color:red; }

nb: JANGAN memulai id dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox

Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen . Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class yang sama .

Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”

Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :

.center {text-align:center;}

kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.

Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :

p.center {text-align:center;}

nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer.

Aturan Penulisan

1.1 Inline Styles

CSS dideklarasikan sebagai atribut pada elemen. Tidak dibangun sebagai aturan, dan

tidak ada selector. Properti dan nilainya melekat langsung pada elemen.

<html><head><title>Inline Styles CSS</title></head><body><h2 style="text-decoration:underline;">Pandawa</h2><p style="color:blue;">Nakula dan Sadewa adalah adalah saudara kembar.
Mereka adalah adik tiri Yudistira, Bima, Arjuna.</p></body></html>

Screenshot :

1.2 Embedded Style Sheets

Aturan CSS ditanamkan dalam elemen head dari dokumen. Aturan tersebut hanya berlaku

pada dokumen dimana dideklarasikan.

<html><head><style type="text/css">h2 { text-decoration:underline; }p { color:blue; }.example { background:yellow;color:red; }</style></head><body><h2>Pandawa</h2><p>Nakula dan Sadewa adalah adalah saudara kembar. Mereka
adalah adik tiri Yudistira, Bima, Arjuna.</p><p>Namun, <span class="example">kesetiaan</span> mereka
pada Pandawa tak pernah goyah.</p><body></html>

Screenshot :

1.3 External Style Sheets

Menempatkan aturan CSS secara terpisah, style sheet external terhubung dengan

dokumen melalui elemen head. File style sheet text disimpan menggunakan ekstensi .css.

h2 { text-decoration:underline; }.dewi_kunti, .pandhu { background:yellow;color:red; }#info_bima { color:green; }01.latihan_ 1 4 . htm l<html><head><title>External Style Sheets</title><link rel="stylesheet" type="text/css" href="01.latihan_14.css" /></head><body><h2>Bima</h2><p>Bima adalah anak ke-2 <span class="dewi_kunti">Dewi Kunti</span> dan<span class="pandhu">Pandhu</span></p><p id="info_bima">Nama lainnya adalah Bimasena dan Werkudara.<br />Bahasa yang digunakan selalu kasar dan selalu menakutkan musuh,walaupun hatinya baik.</p><body></html>