CSS-lisäesimerkki

Mallidokumentit

Käydään läpi css:n perusteita HTML-, XHTML- ja XML-dokumentin avulla.

HTML5-suositus ei ole tarkka esim. lopetuselementtien kanssa. XHTML- ja XML-dokumentit sen sijaan ovat tarkkoja eivätkä toimi, jos dokumentissa on pienikin virhe.
- xhtml-dokumenttia ei tunnisteta ellei html-elementissä ole määritelty oikeaa nimiavaruutta:
```
<html xmlns="http://www.w3.org/1999/xhtml">
```
- XML-dokumentteihin tyylit linkitetään eri tavalla kuin html/xhtml-dokumentteihin. Heti dokumentin alkuun lisätään prosessointiohje:
```
<?xml-stylesheet type="text/css" href="tyyli.css"?>
```
- Selaimeen on aina määritelty jokin oletusulkoasu HTML-dokumenteille. Mikään standardi ei määrää millainen sen kuuluisi olla. Tavallisimmissa selaimissa ulkoasu on kaikissa hyvin samankaltainen. Oletusulkoasun voi "nollata" seuraavalla tyylillä:
```
* {
   padding: 0;
   margin: 0;
   border: 0;
   display: inline;
   font-size: 1em;
   font-weight: normal;
}
```
  XML-dokumenteilla ei ole oletusulkoasua, vaan ne esitetään elementteinä ellei dokumenttiin ole linkitetty CSS-tiedostoa.
Tyylien perintä html-elementtihierarkiassa ja css-tiedostossa. Tyylien vaikutusalueeseen vaikuttavat monet seikat
- HTML-rakenteessa elementti perii äiti- ja vanhempielementeiltään tiettyjä tyylimäärityksiä kuten kirjasintyyppi, kirjasimen koko, kirjasimen asetukset. Myös taustaväri näyttää periytyvän, mutta ei oikeasti periydy vaan elementtien taustaväri on oletuksena läpinäkyvä (transparent) eli äitielementin mahdollinen taustaväri näkyy läpi
- Tyylien kirjoitusjärjestys css-tiedostossa: viimeiseksi kirjoitettu sääntö ylimäärittelee mahdolliset aiemmat samaa valitsinta (selektoria) käyttävät tyylit
- Spesifimpi (tarkempi) selektori ylimäärittelee yleisemmät tyylit
display-ominaisuus
Padding, margin ja border
Collapsing margins
Selektorit

Mallidokumentit

Käyttäjien kommentit