Css cascading

De hierarchie van de opmaak

Er bestaat een bepaalde volgorde van toepassing van CSS op elementen, waarbij er rekening mee moet worden gehouden op welke manier je je CSS hebt verbonden met je XHTML document.

Kleine herhaling

Er zijn dus 4 manieren om CSS te implementeren in je structuur:

  1. Direct intern toepassen op html elementen via style
    <p style="color: blue; font-family: Arial; ">
  2. Alle opmaak per pagina in de <head>
    <style type="text/css">
    p {font-weight: normal; color: gray; }
    </style>
  3. 1 CSS bestand voor alle paginas via <link>
    <link rel="stylesheet" type="text/css" href="style.css">
  4. 1 CSS bestand voor alle paginas via @import
    <style type="text/css" media="all">
    @import "style.css";
    </style>

En verder met de hierarchie

Dus zoals gezegd er heerst een zekere volgorde, en is ervan afhankelijk op welke van de bovenstaande manieren je CSS inbind in je website.
De volgorde.

De volgorde werkt op volgende manier:

  • het style atribuut, welke voorrang heeft op
  • het style-block in de head, welke voorrang heeft op
  • een gelinkte stylesheet, welke voorrang heeft op
  • een geimporteerde stylesheet

De @import is enkel van toepassing als je wenst CSS te verbergen voor oudere browsers die zich zouden kunen verslikken (spreek crashen) in Css opmaak die ze niet aankunnen.

Voorbeelden

Stel je hebt een externe opmaak via link die bepaald dat:

.paragraaf {font-family: Verdana; font-size: 12pt; color: red; }

Maar je bepaald via een interne style dat:

<p class="paragraaf" style="color: green">text</span>

De volgorde bepaald dat interne bepalingen voorrang hebben, ook al is er in dit voorbeeld een class gebruikt, dus het resultaat zal zijn dat de tekst in de p 12px Verdana groen zal zijn, daar de interne color: green bepaling de externe color: red vervangen heeft, op grond van zijn hogere plaats in de hierarchie.

Nog meer voorbeelden

Stel je hebt een externe opmaak via @import die bepaald dat:

h1 {font-family: Georgia; font-size: 4em; color: #000 }

Maar je bepaald naderhand in de head met een style-block dat:

h1 {font-size: 2em; color: #600}

De h1 in je document zal nog steeds het lettertype Georgia hebben maar zal nu in plaats van 4em zwart, 2em rood zijn.