CSS Dasar

Contoh CSS rule:

P { color: red; font-size: 20px; }

property: value
property adalah properti CSS, dan value adalah nilai properti CSS yang tersesuaikan.

CSS rule di atas yang menunjukkan properti adalah color dan font-size, di mana masing-masing nilainya red dan 20px berturut-turut.

Selector
Setiap elemen HTML, pengenal CLASS, dan pengenal ID dimungkinkan menjadi selector, dan selector itu bisa diberikan dampak dari deklarasi-deklarasi yang ada.

CSS rule di atas yang menunjukkan selector adalah elemen P.

Declaration
Declaration adalah bagian dari CSS rule yang berisi satu properti CSS dan nilainya, jika menetapkan lebih dari satu declaration dalam blok declaration yang sama, diharuskan menyisipkan tanda titik koma di antara declaration satu dengan yang lainnya.

CSS rule di atas, yang menunjukkan declaration adalah color: red; dan font-size: 20px;, di mana color: red; adalah declaration yang pertama dan font-size: 20px; adalah declaration yang kedua di dalam urutan.

Declaration block
Declaration block dimulai dari tanda "{" dan diakhiri dengan tanda "}". Untuk CSS rule di atas, yang menujukkan declaration block adalah:

{ color: red; font-size: 20px; }

Class selector
Class selector akan memberikan dampak declaration CSS bagi semua elemen HTML yang memiliki atribut CLASS dengan nilai yang tersesuaikan. Untuk jelasnya mengenai Class selector, silahkan ke halaman Class selector CSS.

ID selector
ID selector akan memberikan dampak declaration CSS hanya untuk satu elemen HTML yang memiliki atribut ID dengan nilai yang tersesuaikan. Untuk jelasnya mengenai ID selector, silahkan ke halaman ID selector CSS.

Group selector
Di CSS di perbolehkan mengelompokkan selector untuk mendapatkan dampak yang sama, misalnya ingin memberikan dampak yang sama untuk elemen H1, H2, H3, H4, H5, dan H6:

H1, H2, H3, H4, H5, H6 { color: red; }

Contextual selectors
Semisal menjumpai CSS rule seperti ini:

P B { color: red; }

CSS rule di atas menyebabkan semua elemen B yang tersarang di dalam elemen P akan diberikan dampak untuk teksnya dengan warna merah.

Semisal lagi menjumpai CSS rule sebagai berikut:

P B.myClass { color: red; }

CSS rule di atas menyebabkan semua elemen B ber-CLASS myClass yang tersarang di dalam elemen P, untuk teksnya diberikan dampak warna merah.

Comments
Untuk menetapkan komentar di CSS, bisa mengawalinya dengan tanda /* dan diakhiri tanda */.

Contoh:

/*di sini komentar*/