selector { proprietate: valoare }
Selectorul este elementul (X)HTML pe care doresti sa il stilizezi. Proprietatea este chiar titlul (numele) proprietatii respective, iar valoarea reprezinta stilul pe care il aplici proprietatii.

Fiecare selector poate avea multiple proprietati, si fiecare proprietate din acel selector are valori independente. Proprietatea este separata de valoare cu semnul ":". Toate proprietatile impreuna cu valorile lor, apartinand aceluiasi selector sunt cuprinse intre acolade "{}". Multiplele valori din aceasi proprietate sunt separate prin virgula "," si daca o valoare contine mai mult de un cuvant, acestea se cuprind intre ghilimele '"'. Aveti mai jos un exemplu:

body {
background: #eeeeee;
font-family: "Trebuchet MS", Verdana, Arial, serif;
}
Dupa cum se observa, culoarea fundalului (background) este separata de font (font-family) cu ajutorul semnului ";" si un tab (semicoloana), diferitele valori pentru font sunt despartite prin virgule, iar valoarea "Trebuchet MS" deoarece contine doua cuvinte este cuprinsa intre ghilimele.

Aplicand acest stil vom obtine un corp de pagina (body) de culoare gri deschis, iar fontul folosit va fi unul despre care suntem siguri ca majoritatea utilizatorilor il au instalat pe sistemele lor.

Layoutul codului se poate modifica, insa este mai usor de citit daca fiecare proprietate este pe o linie separata, una sub alta, fiecare cu un tab in fata.

Mostenirea
Atunci cand plasezi un element in interiorul altuia, elementul plasat va mosteni proprietatile elementului in care a fost plasat. Asta doar daca nu se atribuie aceleasi proprietati insa cu valori diferite fiecarui element. De exemplu, un font specificat pentru corp (body) va fi folosit in toata pagina, indiferent de elementul unde este folosit, doar daca nu specificati un font diferit pentru elementul respectiv.

body {font-family: Verdana, serif;}
In acest caz, tot textul din fisierul (X)HTML va folosi fontul Verdana.

Daca doresti sa folosesti un alt font pentru un element anume (de exemplu pentru paragraf sau pentru H1), va trebui sa definesti acest lucru, cum este in exemplul de ma jos:

h1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;}
Acum toate tagurile vor folosi fontul Georgia si toate paragrafele (<p>) vor folosi Tahoma, lasand totusi restul textului (din alte taguri) neschimbat, folosind in continuare Verdana.

Exista insa si cazuri cand elementele plasate in interiorul altor elemente, nu mostenesc proprietatile acestora din urma. De exemplu, daca marginea pentru corp este setata la valoarea de 20 pixeli, celelalte elemente din pagina nu vor avea si ele marginea setata la 20 de pixeli.

body {margin: 20px;}

Combinarea selectorilor
Puteti combina elementele unui selector astfel:

h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}
Dupa cum observati in codul de mai sus, am grupat toate elementele de tip header intr-un singur selector. Ele sunt separate de virgule. Rezultatul acestui stil este acela ca toate tagurile header vor fi de culoare verde cu font Georgia. Daca un utilizator nu are instalat pe sistem primul font (Georgia), atunci se va folosi in mod automat urmatorul font si anume sans-serif.

Tagurile de comentarii
Comentariile, ca si in cazul programarii in alte limbaje, sunt foarte folositoare, si te pot ajuta sa identifici repede un anume element sau rolul pe care acel element il are. Puteti folosi comentariile si in fisierele .css, dupa cum se exemplifica in continuare:

/* Acesta este un comentariu si nu va fi interpretat de browsere */
Observati ca la inceputul comentariului avem un slash "/" urmat de un asterisc "*", dupa care urmeaza comentariul respectiv, iar la inchiderea lui ordinea este inversa. Primul este asteriscul urmat de slash.