[Perusrakenne| Pseudoluokat ja -elementit| Tärkeysjärjestys]
Mikä tahansa HTML-elementti on mahdollinen CSS1 valitsin. Valitsin on yksinkertaisesti elementti, joka on linkitetty tiettyyn tyyliin. Seuraavassa koodissa valitsin on P.
P { text-indent : 3em }
Yksinkertaisella valitsimella voi olla useita luokkia, jotka mahdollistavat useita eri tyylejä samalle elementille. Esimerkiksi sivun tekijä voi haluta näyttää koodin erivärillä riippuen ohjelmointikielestä.
CODE.html { color : #191970 }
CODE.css { color : #4b0082 }
Yläpuolinen esimerkki luo luokat css ja html, HTML:n CODE elementin käytettäväksi. HTML:ssä käytetään CLASS-attribuuttia määrittämään elementin luokan.
<P CLASS="warning">
Valitsimelle sallitaan vain yksi luokka.
Esim. "P.kappale.1" valitsin olisi virheellinen
</P>
Luokkia voidaan määritellä myös ilman niihin liitettyä elementtiä
.huom { font-size : small }
Esimerkin huom luokka voidaan liittää mihin tahansa elementtiin
Luokat kannattaa nimetä ennemminkin toiminnon kuin ulkoasun mukaan. Esimerkin luokka huom olisi voitu nimetä nimellä pieni, mutta fontinkokoa muutettaessa suureksi nimi ei olisi enää kuvaava.
ID-valitsimia käytetään vain yksittäisten elementtien tyylin määrittelyyn (ID voi esiintyä vain kerran dokumentissa). Niitä pitää käyttää varovasti niillä olevien rajoitusten takia. ID-valitsin määritetään lisäämällä nimen eteen "#"-merkki. Seuraavassa esimerkissä määritetään ID-valitsin abc.
#abc { text-indent : 3em }
Joka liitetään HTML elementtiin ID atribuutilla:
<P ID="abc">Sisennetty teksti</P>
Sisällölliset valitsimet ovat välilyönnillä erotettujen valitsimien sarjoja, joiden tyylisääntö rajoittuu tietyn elementin sisällä oleviin elementteihin. Nämä valitsimet voivat sisältää kaikkia normaaleja sääntöjä ja ne ohittavat tärkeysjärjestyksessä pelkät yksinkertaiset valitsimet. Esimerkiksi:
P H1 { background : yellow }määrittää elementin P sisällä olevan H1-tason otsikon taustavärin
Toiston vähentämiseksi valitsimien ja tyylisääntöjen ryhmittely on sallittua ja suositeltavaa. Esimerkiksi kaikille otsikkotasoille voidaan tehdä määrittely kerralla kun ne ryhmitetään:
H1, H2, H3, H4, H5, H6 {
color : red ;
font-family : sans-serif }
Lähes kaikki elementit jotka on sijoitettu toisen elementin sisään perivät "ylemmältä" elementiltä ominaisuuksien arvot, ellei niitä määritetä erikseen. Esimerkiksi BODY-elementille määritetty color-ominaisuuden arvo tulee myös P-elementin tekstin väriksi.
On joitain tapauksia joissa sisempi elementti/valitsin ei peri ominaisuuksien arvoja "ylemmältä" elementiltä, mutta ne ovat loogisia ja helposti erottuvia. Esimerkiksi margin-top ominaisuus ei ole periytyvä; Esim. kappaleella ei olisi samaa ylämarginaalia kuin kuin sivun runkolla.
Kommentit tyylisivuilla merkitään samalla tavalla kuin C-ohjelmointikielessä. Kommentin pitää olla seuraavan muotoinen:
/* KOMMENTIT EIVäT VOI OLLA SISäKKäISIä */Pseudoluokat ja pseudoelementit ovat erikois luokkia ja elementtejä jotka CSS:ä tukeva selain automaattisesti tunnistaa. Pseudoluokat eroavat muiden elementtien joukosta (Esim. vierailtu- (visited link) ja aktiivinenlinkki (active link) ovat erityyppisiä "ankkureita"). Pseudoluokat viittaavat elementin osiin, kuten kappaleen ensimmäiseen kirjaimeen.
Säännöt pseudoluokille/pseudoelementeille ovat seuuraavanlaisia:
valitsin:pseudoluokka { ominaisuus : arvo }Tai
valitsin:pseudoelementti { ominaisuus : arvo }Pseudoluokille ja -elementteille ei pitäisi määrittää HTML:n CLASS attribuuttia. Pseudoluokkia ja -elementtejä voidaan käyttää normaalien luokkien kanssa seuraavsti:
valitsin.luokka:pseudoluokka { ominaisuus : arvo }Tai
valitsin.luokka:pseudoelementti { ominaisuus : arvo }Mielenkiintoinen tehoste olisi saada valittu (tai aktiivinen) linkki näkymään hieman isommalla tekstillä ja erivärisenä. Kun sivulle palaisi, vierailtu linkki näkyisi pienemmällä tekstillä ja eri värillä. Esimerkki tyylisivu voisi näyttää tältä:
A:link { color : red }
A:active { color : blue ; font-size : 125% }
A:visited { color : green ; font-size : 85% }Usein sanomalehdissä, kuten Wall Street Journal, artikkelin ensimmäinen rivi on tehty isoilla kirjaimilla jotka ovat lihavoituja. CSS1:een on sisällytetty tämä mahdollisuus pseudoelementtinä. first-line pseudoelementtiä voidaan käyttää mille tahansa block-tason elementille (Kuten P, H1 jne.). Esimerkki first-line pseudoelementille voisi olla:
P.first-line { font-variant : small-caps ;
font-weight : bold }first-letter pseudoelementtiä käytetään luomaan erilaisia tehosteita alkukirjaimelle. Ensimmäinen kirjain elementin tekstissä näytetään tämän tyylisäännön mukaan. first-letter pseudoelementtiä voidaan käyttää mille tahansa block-tason elementille. Esimerkiksi:
P:first-letter { font-size : 300% ; float : left }Luo alkukirjaimen joka on kolme kertaa muita isompi.
Kun useita tyylisivuja on käytössä päällekkäin, niissä molemmissa voi olla tyylisääntö samalle valitsimelle. Näissä tilanteissa täytyy olla sääntöjä joiden mukaan selain valitsee kumpaa tyylisääntöä käytetään. Seuraavat tuntomerkit määräävät lopputuloksen ristiriitaisessa tapauksessa.
Säännöt voidaan määrittää tärkeiksi lisäämällä niihin: ! important. Tyylisääntö joka on merkitty tärkeäksi voittaa muuten samanarvoiset ristiriitaiset tyylisäännöt. Samoin, koska sekä sivun tekijä että lukija voivat määrittää tärkeitä tyylisääntöjä, tekijän tyylisääntö ohittaa lukijan tyylisäännön tärkeysjärjestyksessä. Esimerkiksi tyylisääntö joka on merkitty tärkeäksi voi näyttää seuraavanlaiselta.
BODY { background : url(tausta.gif) white ;
background-repeat : repeat-x ! important }Kuten äsken mainittiin, sekä sivun tekijällä että lukijalla on mahdollisuus tehdä omat tyylisivut. Kun nämä ovat ristiriidassa, tekijän tyylisäännöt voittavat muuten samanarvoiset lukijan säännöt. Sekä tekijän että lukijan tyylisäännöt ohittavat selaimen sisäänrakennetut tyylisäännöt.
Tekijän kannattaa olla varovainen ! important sääntöjä käytettäessä koska ne ohittavat kaikki lukijan ! important tyylisäännöt. Lukija voi esimerkiksi tarvita isoja fonttikokoja ja erikoisvärejä näkö ongelmien takia, tällainen sivujen lukija haluaa varmaan määrittää joitain tyylisääntöjä tärkeiksi, koska jotkut säännöt voivat olla tärkeitä sivujen lukijalle sivujen lukemisen mahdollistamiseksi. Mikätahansa ! important tyylisääntö ohittaa normaalit tyylisäännöt, joten tekijöitä suositellaan käyttämään normaaleja tyylisääntöjä lähes poikkeuksetta, jotta käyttäjät joilla on erikoistarpeita voivat lukea sivuja.
Tyylisäännöt voivat myös ohittaa ristiriitaiset tyylisäännöt perustuen tärkeysjärjestykseen, jossa tarkemmin määritelty valitsin ohittaa yksinkertaisemmin määritelly valitsimen. Valitsimen tärkeyden laskeminen on erittäin yksinkertaista.
Lopuksi kirjoita nämä kolme lukua tarkasti järjestyksessä ilman välilyöntejä tai pilkkuja saadaksesi kolminumeroisen luvun. Lopullinen lista valitsimia vastaavista luvuista näyttää helposti tärkeysjärjestyksen jossa isompi luku voittaa pienemmän. Seuraavassa on lista valitsimista tärkeysjärjestykseen laitettuna:
#id1 { xxx } /* A=1 B=0 C=0 --> tärkeys=100 */
UL UL LI.red { xxx } /* A=0 B=1 C=3 --> tärkeys=013 */
LI.red { xxx } /* A=0 B=1 C=1 --> tärkeys=011 */
LI { xxx } /* A=0 B=0 C=1 --> tärkeys=001 */Asian tekemiseksi helpoksi, jos kaksi tyylisääntöä on saman arvoisia, niistä jälkimmäisenä määritelty voittaa.
[Perusrakenne| Pseudoluokat ja -elementit| Tärkeysjärjestys]