CSS stylesheet koppelen aan - CSS stijlregels toepassen in een HTML document

CSS stijlregels zijn op 3 manieren toe te passen op, en in een HTML document.

Toepassen CSS styleregels

  • CSS Linked: De in een apart document 'de stylesheet' opgenomen CSS stijlregels koppelen (linken) aan een HTML document.
  • CSS Embeded: De opgave van CSS stijlregels in een 'style' blok in de head sectie van het document.
  • CSS Inline: De opgave van CSS stijlregels bij het HTML-element.

 

  • CSS Stylesheet koppelen aan HTML pagina

    De meest ideale oplossing is 1 of meer stylesheet(s) te maken die voor alle pagina's van de website gelden en deze aan de HTML-pagina te koppelen (linked).

    Dit koppelen doen we als volgt:

    In de <head> sectie van het document nemen we een <link> op naar het stylesheet.

    Er van uitgaande dat de stylesheet de naam stylesheet.css heeft gekregen, ziet dit er dan bijvoorbeeld zo uit:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html lang="nl">

    <head>

    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen, projection">

    </head>

    .......

    Hierbij geeft de rel= de relatie aan, het is een stylesheet. Het type= geeft het type aan, het document bevat text en css en de media= geeft het type weergave apparaat / programma aan.

    Alle documenten die op deze wijze een 'stylesheet' gelinked hebben gekregen, zullen de stijlregels uit dit document toepassen voor de weergaven van de HTML elementen.

  • CSS stijlregels opnemen in de HTML pagina

    Bij uitzondering, als voorbeeld-pagina's of omdat het slechts 1 uitzondering bevat, kunnen specifiek voor 1 HTML-document geldende regels ook opgenomen worden in het document.

    We noemen dit embeded stijlregels.

    Deze regels worden als volgt opgenomen in de <head> sectie van het document:

    <style TYPE="text/css">
    ul#menu1 { margin: 0; padding: 0; list-style-type: none; }
    </style>

    Alle declaraties die voor het document benodigd zijn kunnen hierin opgegeven worden tussen de <style TYPE="text/css"> en </style>

  • CSS stijlregels invoegen per HTML-element

    De laatste en ook minst wenselijke opname van specifieke stijlregels is de inline methode. Hierbij worden per HTML-element zoals bijvoorbeeld het <table> element de stijlregels opgegeven.

    Dit zou er dan als volgt uit kunnen zien:

    <table style="color: #fff; border: 1px solid #999;">

    Zoals reeds aangegeven, is inline de minst wenselijke methode omdat indien u iets aan moet passen, alle documenten doorlopen moeten worden om de regels aan te passen.

    Bij 10 documenten nog wel te doen, maar wat denkt u dat het u aan extra werk gaat opleveren als u 1 stijlregel moet aanpassen in 100 HTML documenten?

    << CSS Inleiding