banner

1.3: Embedded CSS

Zoals de naam al een beetje zegt, embedded betekent iets als ingebed/geïntegreerd, is de style geïntegreerd in de webpagina zelf.
Het verschil tussen inline (wat we tot nu toe gedaan hebben) en embedded is dat we nu een x aantal elementen tegelijk kunnen voorzien van een style.
Zo kunnen we elk <h1> element op de webpagina voorzien van dezelfde kleur, uitlijning, lettertype etc..., en we hoeven dit maar op 1 plaats op de pagina op te geven.

Embedded CSS zetten we tussen de <head> </head> elementen van de webpagina. Hierin staat al het <title>Titel van de website</title> element, maar hier voegen we nu een <style></style> elementen aan toe. Het begin van een webpagina ziet er dan alsvolgt uit:

<html>
  <head>
    <title>Titel van website</title>
    <style>
      verschillende style-opties...
    </style>
  </head>
<body>...

Je ziet dus dat het <style> element na het <title> element komt en voor de afsluitende </head> element.

Tussen de openings <style> en de afsluitende </style> kunnen we nu style-opties gaan neerzetten die de style van heel de webpagina kunnen gaan veranderen.
Hoe we deze erin moeten gaan zetten komt in hoofdstuk 2 aan de orde, eerst gaan we nog kijken wat External CSS inhoudt.