Gebruikerswaardering: 0 / 5

Ster inactiefSter inactiefSter inactiefSter inactiefSter inactief
 

CSS: Stijlen (inline, intern of extern)

Met behulp van stijlen bepaal je snel en gemakkelijk hoe je HTML-pagina's worden opgemaakt.

Maar waar zet je al die stijlopmaak neer? Voor de uitleg wordt gebruik gemaakt van de volgende HTML en CSS:

Voorbeeld

View source
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="styles.css">
  4. <!--
  5.   styles.css bevat voor dit voorbeeld:
  6.   p { color: gray; }
  7. -->
  8. <style>
  9.   p {
  10.     color: red;
  11.   }
  12.   p.gekleurd {
  13.     color: cyan;
  14.   }  .gekleurd {
  15.     background-color: yellow;
  16.     color: black;
  17.   }
  18. </style>
  19. <title>CSS: Stijlen (inline, intern of extern)</title>
  20. </head>
  21. <body>
  22. <p>Welke kleur krijgt paragraaf 1?</p>
  23. <p style="color: navy;">Welke kleur krijgt paragraaf 2?</p>
  24. <p class="gekleurd">Welke <span class="gekleurd">kleur</span> krijgt paragraaf 3?</p>
  25. </body>
  26. </html>

Het resultaat zal er zo uit zien:

Welke kleur krijgt paragraaf 1?

Welke kleur krijgt paragraaf 2?

Welke kleur krijgt paragraaf 3?

Er zijn in HTML drie mogelijkheden.

1. INLINE STIJLEN

Je geeft per element in je HTML-pagina, hoe dat element moet worden opgemaakt. Dit zijn de zogenaamde inline stijlen. In het voorbeeld is dit te zien in de regel <p style="color: navy;">Welke kleur krijgt paragraaf 2?</p>. Op deze manier kun je in de HTML-pagina zelf alle informatie voor de opmaak meegeven. Nu staat er alleen een kleur ingevuld, maar voor hetzelfde geld had hier gestaan background-color: #9a03f0; border-bottom: dashed 1px #9f9f9f; color: navy; font-weight: bold; margin: 5px 10px; padding: 0 3px 2px 12px;. Je kunt je voorstellen, dat je HTML-pagina moeilijk te onderhouden wordt, wanneer je bij ieder element al deze stijlinformatie toevoegt.

Daarbij zul je snel genoeg zien, dat veel elementen (met dezelfde opmaakkenmerken) vaker voorkomen en dat het dan niet te doen is om die opmaak op al die plekken aan te moeten passen. Daarom zijn de onderstaande twee oplossingen vaak beter.

2. INTERNE STIJLEN

Je kunt ten tweede je stijlen in de <head> van je HTML-pagina opnemen. Dit werkt goed als je losse HTML-pagina's maakt, die allemaal hun eigen stijlen nodig hebben. Het resultaat is aan de ene kant, dat je al je stijlen in elk geval centraal en eenmalig hebt gedefinieerd, maar anderzijds ook, dat de pagina's enorm groot en onoverzichtelijk kunnen worden. Maar de meeste editors bieden wel de mogelijkheid om segmenten in te klappen, waardoor die onoverzichtelijkheid al wat minder relevant wordt.

In het voorbeeld is deze manier van werken te zien als het blok in de <head> tussen de beide <style>-tags. Deze <style>-tags moeten uiteraard ook in het bestand worden opgenomen.

3. EXTERNE STIJLEN

Maar toch, wanneer je veel stijlen definieert, of meerdere pagina's hebt die allemaal gebruik maken van dezelfde stijlen, dan is de derde oplossing al snel een aanrader: Maak een los CSS-bestand. Dit is ook een gewoon tekstbestand, dat wordt opgeslagen met bestandstoevoeging .css. In dat bestand neem je de stijlen op, net als bij de eerste optie, alleen zijn daarbij de <style>-tags niet meer nodig, aangezien alles in dat bestand al wordt geïnterpreteerd als stijl-informatie.

Om je HTML-pagina te laten weten welk CSS-bestand erbij geladen moet worden, voegen we in de <head> de volgende regel toe: <link rel="stylesheet" href="/styles.css">. Hierbij is styles.css de naam van ons CSS-bestand.

 

Wanneer je dit bestand in een submap wilt plaatsen, bijv. css, dan kan dat uiteraard, maar zorg dan wel, dat de verwijzing daarop wordt aangepast: <link rel="stylesheet" href="/css/styles.css">.

Het is mogelijk om op dezelfde manier meerdere CSS-bestanden te koppelen aan je HTML-pagina. Dit zal bijv. vaak gebeuren, wannner je gebruik maakt van externe javascript-bibliotheken, die gebruik maken van eigen CSS-bestanden, zoals jQuery.

Maar ...

Het ene sluit het andere niet uit. Het is goed mogelijk om alle drie de oplossingen tegelijk toe te passen. Je kunt namelijk een verwijzing naar een extern CSS-bestand opnemen en/of interne stijlen definiëren in de <head> van je HTML-bestand en/of inline stijlen opnemen in de <body> van je HTML-pagina.

Let daarbij wel goed op de volgorde. Want je HTML-pagina de altijd het laatst-gevonden opmaak als de waarheid beschouwen.

Wanneer je kijkt naar ons voorbeeld, dan staat daar bovenaan de verwijzing naar het CSS-bestand opgenomen met daarin de paragraaf-stijl, om tekst grijs te maken. Daaronder staat een aantal stijlen die specifiek voor deze pagina gelden.

Bij het laden van de pagina, zal eerst het externe CSS-bestand worden toegepast en de tekstkleur van de paragraaf wordt daardoor grijs. De andere stijlen daaronder worden vervolgens verwerkt en aangezien volgens die stijlen een paragraaf rood gemaakt moet worden, zal iedere paragraaf rood worden.

Uiteindelijk staat er nog een paragraaf met eigen stijlinformatie in onze HTML-code: Paragraaf 2. Omdat die informatie als laatste wordt verwerkt, zal paragraaf 2 de kleur navy krijgen.

Wanneer we in ons voorbeeld de verwijzing naar het externe CSS-bestand naar beneden verplaatsen, tot onder de <style> ... </style>, dan zal de stijl van het externe CSS-bestand later verwerkt worden, dan de interne stijlen en wordt iedere paragraaf grijs, tenzij er inline stijlen worden toegepast. Die zijn altijd het belangrijkst.

Een beetje onoverzichtelijk wordt het wannneer we twee keer dezelfde stijl definiëren, zoals te zien is in de interne stijlen. Daar staat eerst p.gekleurd en daarna .gekleurd. Op basis van wat hierboven staat, zou je verwachten, dat paragraaf 3 helemaal zwart zou zijn. In dit geval wordt deze stijl echter overklast door de eerder genoemde stijl en te zien met kleur cyan. Dat komt omdat deze stijl specifieker is gemaakt, door deze expliciet toe te wijzen op een paragraaf. Aangezien deze specifieke stijl echter niets zegt over de achtergrondkleur, wordt wel deze achtergrondkleur wel vanuit de tweede stijl toegepast.

Deze gehele tweede stijl wordt vervolgens 'geheel' toegepast op de <span> in paragraaf 3, want dit is een <span> en geen paragraaf.

Globale regels

Hoewel er geen harde regels zijn voor het toepassen van inline, interne of externe stijlen, is het over het algemeen aan te bevelen om zoveel mogelijk gebruik te maken van externe stijlen. Een extern CSS-bestand is overzichtelijker, kan los van de HTML-pagina worden bijgewerkt en kan in één keer meerdere HTML-pagina's van een nieuw uiterlijk voorzien.

Wanneer je heel specifiek aanpassingen hebt voor één pagina, of je wilt op die ene pagina een stijl uit het CSS-bestand overklassen, dan is een interne stijl handig.

Heb je de behoefte om op één plek op je HTML-pagina een heel specifieke stijl toe te passen, die verder nergens anders van toepassing is, of je wilt op die ene plek niet de standaardstijl gebruiken maar een heel specifieke aanpassing, dan zou je daarvoor een inline stijl kunnen gebruiken.