Tyylisäännössä on yleisesti kaksi osaa:

• Valitsin (selector), joka määrää, mitä elementtejä sääntö koskee.
• Määrittelyosa (declaration block), joukko määrittelyitä (declaration), joilla kerrotaan eri ominaisuuksille arvoja.

Valitsin on yhdistelmä seuraavia:

• Tagin nimi: h1, p, span, div,…
• Elementin id: #header, #menu, #panel
• Elementin luokka (class): .navi, .address
• Pseudo-luokka: :hover, :visited, :first-child,…
• Pseudo-elementti: ::begin, ::after, ::first-letter,…
• Attribuutit: [title], [target="_blank"], [data-order="4"],…

Valitsin on ikäänkuin polku halutulle elementille. Valitsin valitsee kaikki ne HTML-dokumentin elementit, jotka täyttävät valitsimen asettamat ehdot. Jos elementtien halutaan olevan sisäkkäin, niihin viittaavien elementtien väliin jätetään välilyönti. Jos taas elementille halutaan antaa tarkentavia valitsimia, kirjoitetaan valitsimet yhteen.

div.asia p.peruskappale a span {
    ... Määrittelyt ...
}

Yllä oleva valitsin div.asia p.peruskappale span a määrittelee tyylisääntöjä kaikille <span>-tageille, jotka ovat linkin (<a>) sisällä, joka on puolestaan kappaleessa <p>, jolla on luokkana (class-attribuutti) peruskappale, ja joka on sellaisen <div>-tagin sisällä, jolla on luokkana asia.

Esimerkki-HTML:

<section>
    <div class="asia">
        <p>Kappale, jossa tekstiä.</p>
        <p>Kappale, jossa myös <a href="#">linkki, jossa <span>tekstiä</span></a>.</p>
        <p class="peruskappale">Kappale, jossa myös <a href="#">linkki, jossa <span>tekstiä</span></a>.</p>
        <p>Kappale, jossa myös <a href="#">linkki ja <span>span</span></a>, mutta ei oikeaa luokkaa.</p>
        <p>Lisää tekstiä.</p>
        <p class="peruskappale">Toinen <a href="#">linkki <span>osuvalla tekstillä</span></a>.</p>
    </div>
</section>

Esimerkki-CSS:

div.asia p.peruskappale a span {
    color: red;
}

Lopputulos:

Valitsimia voi yhdistellä (saman HTML-tagin useita ominaisuuksia) sekä luetella (useammalla valitsimella yhteiset säännöt).

h1 {
    /* tagi */
    color: red;
}

h1#otsikko {
    /* tagi ja id */
    color: blue;
}

.address {
    /* luokka (class) */
    font-style: italic;
}

li:first-child, li:last-child {
    /* kaksi valitsinta pilkulla lueteltuna */
    text-decoration: underline;
}

a::before {
    /* tagi ja sen pseudoelementti */
    content: "Linkki: ";
}

a.nav[title="etusivu"]:hover {
    /* tagi, sen luokka, attribuutti sekä sen arvo ja hiiri tagin päällä */
    color: red;
}

Tyylisääntöjen tärkeysjärjestys

CSS:n nimi, Cascading Style Sheets, tulee siitä, että samalle HTML-elementille voi olla määrätty ominaisuuksia useilla tyylisäännöillä, jotka “limittyvät” keskenään.

Jos säännöt ovat ristiriidassa, jää tarkin sääntö voimaan:

• Inline-sääntö, eli suoraan HTML-tagiin style-attribuutilla kirjoitettu sääntö yliajaa <style>-tagilla annetut tai ulkoisessa tiedostossa määritellyt säännöt.
• Tarkemmalla valitsimella määrätty sääntö on tärkeämpi
  • id on vahvempi kuin luokka, pseudoluokka tai attribuutti, jotka taas ovat vahvempia kuin tagi tai pseudoelementti.
• Myöhempi sääntö “peittää” aiemman saman arvoisen säännön.