CSS Basiskennis - Koppelen aan HTML

Hoe verbind ik CSS met de HTML?

Gekoppeld m.b.v. het LINK-element.
De stylesheet kan worden opgeslagen in een apart bestand. Op deze wijze kan één stylesheet worden gebruikt om meerdere documenten vorm te geven. Wijzigingen in de stijl hoeven dan nog maar op één plaats te worden doorgevoerd. Er kunnen meerdere stylesheets gekoppeld worden met LINK.
Lokaal ingevoerd met het STYLE-element.
Een stylesheet kan in het HEAD-gedeelte worden ingevoerd. Dit is nuttig voor style-regels die maar op één document betrekking hebben.
Gekoppeld m.b.v. de IMPORT-regel in een stylesheet.
Met de @import-regel kan een stylesheet worden ingevoerd in een andere stylesheet. De @import-regel moet helemaal bovenin een stylesheet worden opgenomen, en de hierin opgenomen regels hebben een lagere prioriteit dan de overige regels uit het stylesheet.
Per HTML-element m.b.v. het STYLE-attribuut.
Aan bijna elk gebruikt HTML-element in het document kan een style-regel worden gekoppeld met het style="" attribuut. Dit levert weinig voordelen t.o.v. de traditionele opmaak-attributen in HTML.

Voorbeeld van het toepassen van deze vier methoden:

  <HTML>
    <HEAD>
    <TITLE>Voorbeelden style-koppelingen</TITLE>
1   <LINK type="text/css" href="link-stijl.css">
2   <STYLE><--
3     @import url(import-stijl.css);
      P#bijzonder {color: red}
    --></STYLE>
    <BODY>
4   <H1 style="color: blue">Blauwe header</H1>
    <P id="bijzonder">Bijzondere tekst</P>
    <P>Gewone tekst</P>
    </BODY>
    </HTML>

Zie Problemen - Oplossingen voor de diverse beperkingen die de huidige browsers kennen bij het importeren van stylesheets.