Cascading Style Sheets/Embedded CSS

CSS toepassen

Opmaak

Appendices

In inline CSS werd de CSS code geplaatst in het attribuut style van een element. Bij embedded CSS scheiden we de CSS code van de elementen. We plaatsen de CSS code die we willen toepassen in een apart element die speciaal daarvoor bestaat: namelijk het element style met de nadruk op element. We kunnen de CSS code hierin plaatsen en koppelen met het element. De code koppelen gaat op drie manieren via de naam van het element, via het attribuut class of via het attribuut id.

Het element style

Zoals al werd gezegd moet de code bij embedded CSS worden opgenomen in het element style.

<html>
  <head>
    <title>CSS toepassen</title>
    <style type="text/css">
      /* Hier komt de CSS code */
    </style>
  </head>
  <body>
    <p>
    De inhoud van de pagina
    </p>
  </body>
</html>

Zoals je kunt zien, moet het element style in de head komen van de pagina. In dit element moet dus alle CSS code komen. Nu moet je nog alleen weten hoe je de code kunt toepassen op de elementen.

CSS code koppelen

Hoe we de opmaak die we definiëren in CSS kunnen koppelen zullen we in later dieper op in gaan. We kunnen echter al een paar basis voorbeelden geven.

Naam van het element

De simpelste manier om CSS code te koppelen is via de naam van het element. Stel je wilt een alinea in het midden plaatsen dan doe je het volgende :

<html>
  <head>
    <title>CSS toepassen</title>
    <style type="text/css">
      p {
           text-align: center;
        }
    </style>
  </head>
  <body>
    <p>
    Tekst die in het midden moet staan.
    </p>
  </body>
</html>

Resultaat

Tekst die in het midden moet staan.

Het nadeel van deze manier is dat nu alle alinea's in het midden komen te staan. Gebruik deze manier liefst alleen wanneer het op alle elementen moet worden toegepast.

Attribuut class

Je kunt je elementen in verschillende groepen indelen via het attribuut class. In een groep kunnen verschillende soorten elementen zitten zoals bijvoorbeeld alinea's(p), lijsten(ul) of zelfs de body. Om de elementen onder te verdelen in groepen moet je eerst een goed passende naam geven en dan die naam plaatsen in het attribuut class van al de elementen die je in de groep wilt.

<html>
  <head>
    <title>CSS toepassen</title>
    <style type="text/css">
      .midden {
           text-align: center;
        }
    </style>
  </head>
  <body>
    <p class="midden">
    Tekst die in het midden moet staan.
    </p>
	
    <ul class="midden">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 2</li>
    </ul>
	
    <p>
    Tekst staat normaal.
    </p>
  </body>
</html>

}} Resultaat:

Tekst die in het midden moet staan.

item 1
item 2
item 2

Tekst staat normaal.

Enkel en alleen de elementen die je toevoegt in de groep krijgt de opmaak.

Attribuut id

Je kunt ook CSS code koppelen via het attribuut id. id bevat een unieke naam of code dat door slechts één element mag worden gebruikt. Hierdoor kun je dus CSS koppelen aan slechts één element.

<html>
  <head>
    <title>CSS toepassen</title>
    <style type="text/css">
      #alineaInHetMidden {
           text-align: center;
        }
    </style>
  </head>
  <body>
    <p id="alineaInHetMidden">
    Tekst die in het midden moet staan.
    </p>
	
  </body>
</html>

Resultaat:

Tekst die in het midden moet staan.