Lembaran Gaya Lata/Sintaks

CSS paling kerap dipautkan pada sebuah laman sesawang agar dapat digunakan pada keseluruhan tapak web. Oleh sebab ini, CSS lazimnya diletakkan dalam fail tersendiri dan memiliki gaya bentuk struktur sendiri.

Deklarasi Set (Pengekodan) Aksara

Sebuah lembaran gaya perlu bermula dengan deklarasi:

@charset "UTF-8";

Selepas deklarasi ini, setiap peraturan CSS berdiri sendiri dan dibahagikan kepada tiga bahagian: pemilih (selector), sifat (property) dan argumen, yakni nilai (value):

Contoh:

Kod perlu ditulis dalam bahasa Inggeris

 @charset "UTF-8";

 body {
 background-color : #000000;
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 100%;
 color : #ffffff;
 margin : 0;
 padding : 0;
 text-align : center;
 }

 h1 {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 16px;
 color : #ffffff;
 font-style : normal;
 font-weight : normal;
 letter-spacing : 0.1em;
 }

 h2 {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 12px;
 font-style : italic;
 font-weight : bold;
 color : #ffffff;
 text-decoration : underline;
 }

 p {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 12px;
 font-style : normal;
 color : #ffffff;
 }

 ... dan seterusnya

Terjemahan pecahan kod ini adalah seperti berikut:

@peraturan argumen {
	pemilih {
		sifat: argumen;
		sifat-lain: argumen;
		sifat-ketiga: argumen;
		sifat-keempat: argumen;
	}
}

Setiap pemilih boleh memiliki sebanyak sifat yang diperlukan. Sifat dan nilai dikurung dalam tag { }.

Peraturan

Peraturan (rule) CSS didahului simbol @ dan sering kali memulai blok kod. Setiap peraturan menerima sekurang-kurangnya satu argumen. Beberapa contoh peraturan adalah @charset, bagi mentakrif set aksara dokumen; @media, bagi menetapkan sifat jenis media, kerap kali {}{CSS:rule|all}} ("semua"), screen ("skrin") dan print ("cetak"); dan @font ("fon") bagi menetapkan fon sesawang.

Pemilih

Kuasa CSS kebanyakannya terletak pada pemilih. Pemilih membolehkan pengarang untuk mensasarkan unsur tertentu bagi mengenakan apa jua sifat. Pelbagai jenis pemilih dapat digabungkan bagi mewujudkan gaya yang lebih halus.

Unsur

Unsur yang ditetapkan dalam definisi CSS sepadan dengan unsur-unsur (X)HTML atau XML dalam dokumen. Dengan HTML atau XHTML, unsur yang sering ditemui termasuk p, span, dan div. Dengan XML, nama unsur akan berubah, bergantung kepada jenis dokumen yang akan dipaparkan.

Kelas

Kelas adalah pemilih yang paling asas. Operator kelas ialah "." (titik) dan sintaksnya adalah .nama_kelas.

Kelas sentiasa didahului oleh "." Tanda titik perlu kerana ia mengasingkan pemilih kelas daripada apa jua perkara yang boleh digabungkan dengannya.

ID

ID menetapkan unsur unik dalam dokumen. Dengan (X)HTML ia juga menjadi pengecam cebisan atau fragment identifier. Operator ID ialah "#" dan sintaksnya #nama_id.

Perhatikan bahawa fungsi 'kelas' dan 'ID' hampir sama, yakni kedua-dua bertindak sebagai pemilih. Hanya, ID pemilih unik

Atribut

Pilihan atribut ialah ciri baharu CSS yang membolehkan pilihan dibuat berlandaskan apa jua atribut sesebuah unsur. Sintaksnya adalah [Atribut="nilai"]. Atribut mendokong beberpa operator yang berlainan, termasuk =, !=, ~=, ^= dan $=.

Pseudokelas

Pseudokelas (pseudo-class) adalah kelas istimewa berlandaskan keadaan unsur dan memiliki operator :. Sintaks adalah :pseudokelas. Pseudokelas yang sering ditemui termasuk :hover ("hover" harfiah terbang terkantung-kantung), :link ("pautan") dan :visited ("telah dilawati").

Blok

Blok kod terdapat di merata tempat dengan CSS. Blok bermula dengan { dan berakhir dengan }. Blok digunakan untuk menghimpun penyataan CSS dalam kumpulan logikal bergantung kepada keperluan pengarang. Blok paling sering diguna bersama-sama peraturan dan bagi menghimpun sekumpulan sifat pada sesuatu pemilih.

Sifat

Sifat (property) merupakan inti CSS. Sintaksnya mudah, yakni property: argument(s); (lihat kod di atas). Sifat sentiasa diletakkan selepas sesuatu pemilih dan sentiasa di dalam blok {}. Sesuatu sifat perlu diakhiri atau ditutup dengan koma bernoktah (;).