Trapsgewijze stijlbladen hebben veel voordelen. Hiermee kunt u dezelfde stylesheet gebruiken voor uw hele website. Er zijn twee manieren om dit te doen:
- koppelen met het LINK-element
- importeren met het @import commando
Voor- en nadelen van externe stijlbladen
Een van de beste dingen over trapsgewijze stijlbladen is dat u ze kunt gebruiken om uw site consistent te houden. De eenvoudigste manier om dit te doen is door een externe stylesheet te koppelen of te importeren. Als u voor elke pagina van uw site hetzelfde externe stijlblad gebruikt, kunt u er zeker van zijn dat alle pagina's hetzelfde hebben stijlen.
Enkele van de voordelen van het gebruik van externe stijlbladen zijn dat u het uiterlijk van meerdere documenten tegelijk kunt bepalen. Dit is vooral handig als u met een team van mensen werkt om uw website te maken. Veel stijlregels kunnen moeilijk te onthouden zijn, en hoewel je misschien een gedrukte stijlgids hebt, is het vervelend om te hebben om er constant doorheen te bladeren om te bepalen of voorbeeldtekst moet worden geschreven in 12-punts Arial-lettertype of 14-punts Koerier.
U kunt klassen van stijlen maken die vervolgens op veel verschillende HTML-elementen kunnen worden gebruikt. Als je vaak een speciaal Wingdings-lettertype gebruikt om verschillende dingen op je pagina te benadrukken, kun je het Wingdings. gebruiken klasse die u in uw stijlblad hebt ingesteld om ze te maken in plaats van een specifieke stijl te definiëren voor elke instantie van de nadruk.
U kunt uw stijlen eenvoudig groeperen om efficiënter te werken. Alle groeperingsmethoden die beschikbaar zijn voor CSS kunnen worden gebruikt in externe stylesheets, en dit geeft u meer controle en flexibiliteit op uw pagina's.
Dat gezegd hebbende, er zijn ook hele goede redenen om geen externe stylesheets te gebruiken. Ten eerste kunnen ze de downloadtijd verlengen als u naar veel van hen linkt.
Elke keer dat u een nieuw CSS-bestand maakt en het koppelt aan of importeert in uw document, moet de webbrowser opnieuw naar de webserver bellen om het bestand op te halen. En serveroproepen vertragen de laadtijden van pagina's.
Als u maar een klein aantal stijlen heeft, kunnen deze de complexiteit van uw pagina vergroten. Omdat de stijlen niet goed zichtbaar zijn in de HTML, moet iedereen die naar de pagina kijkt een ander document (het CSS-bestand) krijgen om erachter te komen wat er aan de hand is.
Een extern stijlblad maken
Externe stylesheets worden op dezelfde manier geschreven als embedded en inline stylesheets. Maar alles wat je hoeft te schrijven is de stijl selector en de verklaring. U hebt geen STYLE-element of -attribuut in het document nodig.
Zoals met alle andere CSS, is de syntaxis voor een regel:
selector { eigenschap: waarde; }
Deze regels worden naar een tekstbestand geschreven met de extensie.
.css. U kunt bijvoorbeeld uw stylesheet een naam geven.
stijlen.css.
CSS-documenten koppelen
Om een stylesheet te koppelen gebruik je het LINK element. Dit heeft de attributen rel en href. Het rel attribuut vertelt de browser wat je linkt (in dit geval een stylesheet) en het href attribuut bevat het pad naar het CSS-bestand.
Er is ook een optioneel attribuuttype dat u kunt gebruiken om het MIME-type van het gekoppelde document te definiëren. Dit is niet vereist in HTML5, maar zou moeten worden gebruikt in HTML 4-documenten.
Hier is de code die u zou gebruiken om een CSS-stijlblad met de naam styles.css te koppelen:
En in een HTML 4-document zou je schrijven:
type="tekst/css">
CSS-stijlbladen importeren
Geïmporteerde stylesheets worden in het STYLE-element geplaatst. U kunt dan ook ingesloten stijlen gebruiken als u dat wilt. U kunt ook geïmporteerde stijlen opnemen in gekoppelde stijlbladen. Schrijf in het STYLE- of CSS-document:
@import-url(' http://www.yoursite.com/styles.css');