CSS extern, intern en inline

door: JorisO

Cascading Style Sheet bepalingen (CSS) kunnen op 3 niveau's aan HTML elementen worden meegegeven:

externe CSS
interne CSS
inline CSS

Externe CSS

De CSS wordt in een extern stylesheet bepaald waarnaar verwezen is in de kop van het html document:

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

In het externe stylesheet-bestand style.css staan dan de stijlbepalingen, bv:

body {background: #000000;}
p {margin-left: 20px; color: lime}

Interne CSS

De CSS bepalingen staan in de kop van het HTML document en zijn dus document - specifiek:

<head>
<style type="text/css">

body {background: #000000; }
p {margin-left: 20px; color: lime}

</style>
</head>

Inline CSS

De CSS bepalingen worden als attribuut aan de HTML tag megegeven & zijn dus tag - specifiek:

<span style="color: sienna; font-weight:bold">Dit is CSS</span>

Indien er op verschillende niveau's tegelijk CSS bepalingen voor een specifiek HTML element bestaan, dan worden deze samengevoegd. In geval van overlappende CSS bepalingen voor specifieke stijleigenschappen van een HTML element, prevaleren de laatstbepaalde (ofwel meest specifieke) CSS stijleigenschappen.

Hierboven zie je CSS code voorbeelden van stijlbepalingen op elk van de niveau's.

Naam:
Link:^{(niet verplicht)}
Commentaar:
^{<-- code:}