Lembaran Gaya Lata/Mentakrif Peraturan Gaya

Kita dapat mengaitkan arahan pemformatan pada halaman sesawang dengan memberi definisi peraturan CSS dalam lembaran gaya sama ada dengan pautan, pembenaman, atau peraturan sebaris. Walaupun terdapat banyak cara untuk memberi definisi gaya, perbezaan yang paling utama antara mereka adalah di mana definisi tersebut diletakkan. Lembaran gaya yang dipautkan diutamakan bagi tapak sesawang yang langsung. Lembaran gaya yang terbenam atau sebaris amat berguna bagi tujuan membuat prototaip akan tetapi tidak dapat membantu banyak dengan penyelenggaraan.

Sintaks

Sesebuah lembaran gaya mempunyai satu atau lebih peraturan.

Setiap peraturan pula memiliki dua bahagian: pemilih (selector) dan sekumpulan satu atau lebih deklarasi (declaration/s) yang terkandung di dalam tanda kurung keriting ({...}):

pemilih { deklarasi; deklarasi2; ...}

Setiap deklarasi terbentuk seperti berikut:

sifat:nilai ("property: value")

Ingat bahawa boleh terdapat beberapa deklarasi dalam sebuah peraturan. Kesilapan yang lazim dibuat adalah mencampuradukkan tanda titik bertindih (:) yang sebenarnya mengasingkan sifat daripada nilai sesuatu deklarasi; dan tanda koma bernoktah (;) yang mengasingkan deklarasi.

Pemilih akan memilih unsur-unsur yang berkaitan dengan peraturan sementara deklarasi menetapkan nilai-nilai pelbagai sifat unsur yang dipilih.

Sifat adalah satu daripada banyak sifat-sifat lain. [Pautan luar, Inggeris] w3.org memuatkan senarai semua sifat CSS.

Penggunaan asas

Ini contoh bagaimana membuat semua unsur span kelihatan tebal:

Seperti biasa, kod ditulis dalam bahasa Inggeris

span {
	font-weight: bold;
}

Deklarasi font-weight: bold; memiliki sifat font-weight dan nilai bold. Ini membuatkan fon menjadi tebal.

Paparannya seperti berikut:

Teks tebal

Contoh yang lebih kompleks:

span {
	font-weight: bold;
	color: yellow;
	background-color: black;
}

Paparan:

Teks tebal berwarna kuning

Anda dapat menggunakan banyak lagi sifat dan nilai; ini hanya pengenalan penggunaan CSS.