Als je een controlefreak bent

Bestaat er voor jouw de mogelijkheid om meerdere CSS bestanden te koppelen aan je website. En dan bedoel ik niet de manier van conditionele commentaren ( conditional comments ) ofzelfs de alternatieve stylesheet.

Velen zullen deze manier wel reeds kennen en ook gebruiken:

Aparte stylesheets voor:

  1. Typografie
  2. Layout
  3. Kleuren

Maar het probleem voor beginnelingen zit hem erin hoe deze verschillende stylesheets aan je document toevoegen. Daar we toch weten dat de laatste bepaling de vorige overtroefd:

<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="typografie.css" />
<link rel="stylesheet" type="text/css" href="kleuren.css" />

Als je het op deze manier doet kan ik je verzekeren dat enkel je kleuren zullen worden toegepast, maar geen lettertypes - typografie.css - en je layout - layout.css - zal ook niet uitgevoerd worden.
Omdat je de ID en Classes in je document verschillende keren gaat hergebruiken in alle 3 stylesheets, dat is de oorzaak waar de Cascading Order en de specificiteit ter sprake komt.

Maar hoe dan wel ?

Door de verschillende CSS bestanden te laten lezen door één ander CSS bestand.

Hugh, gaat da wel ?

Yep, ik zal het u tonen ook.
Ervan uitgaande dat je 3 CSS bestanden hebt, elk voor een ander onderdeel zoals hierboven reeds aangetoond, maak je nu nog één CSS bestand - bijvoorbeeld: master.css - en daar komen de verwijzingen naar elk ander CSS bestand in voor:

master.css bevat:

@import url(layout.css);
@import url(typografie.css);
@import url(kleuren.css);

En in je HTML document zet je dan gewoon de oproep naar master.css:

<link rel="stylesheet" type="text/css" href="master.css" />

Grafisch voorbeeld

Wat er eigenlijk gebeurd als je webpagina je master.css uitvoerd kan je grafisch zo voorstellen:

grafisch voorbeeld wat er gebeurd met meerdere CSS bestanden in een browser