Hoe CSS toevoegen


Wanneer een browser style sheet leest, past hij het HTML document aan volgens de informatie in de style sheet.


Drie manieren om CSS invoegen

Er zijn drie manieren om het plaatsen van een style sheet:

  • externe CSS
  • interne CSS
  • inline CSS

externe CSS

Met een externe style sheet, kunt u het uiterlijk van een ganse website veranderen door een bepaald bestand te veranderen!

Elke HTML-pagina moet een verwijzing naar het externe style bestand <link> element, in de hoofd sectie zijn.

 

CSS Voorbeeld:

Externe stylen worden gedefineerd binnen het <link> element, in de <head> sectie van de HTML-pagina:

 
 

<!DOCTYPE html>
<
html>
<
head>
<
link rel="stylesheet" type="text/css" href="mystyle.css">
<
/head>
<
body>


<
h1>Dit is een hoofding </h1>
<
p>Dit is een paragraaf.</p>

<
/body>
<
/html>

 
   

Een externe stylesheet kan worden geschreven in een teksteditor, en moet worden opgeslagen met de .css extensie.

Het externe CSS-bestand mag geen HTML-tags bevatten.

Hier zie je hoe mijn "mystyle.css" file eruit ziet:

  "mystyle.css"  
  body {
background-color: lightblue;
}

h1 {

color: navy;
margin-left: 20px;
}
 

Let op: Geen spatie toevoegen tussen de eigenschap, waarde en de eenheid (zoals margin-left: 20 px;). De juiste manier is: margin-left:20px;

Interne CSS

Een interne stylesheet kan worden gebruikt als een enkele HTML-pagina een stijl te geven.

De interne stijl is gedifineerd in het <style> element, in de <head> gedeelte van de pagina.

 

Voorbeeld:

Interne stylen worden gedefinieerd binnen het <style> element, in de <head> sectie van de HTML-pagina:

 
 

<DOCTYPE html>
<html>
<head>
<style>
body {
     background-color: linen;
}

h1 {
     color: maroon;
     margin-left: 40px;
}
<
/style>
<
/head>
<
body>

<h1>Dit is een hoofding</h1>
<p>Dit is een paragraaf.</p>

</body>
</html>

 
   

Inline CSS

Een inline-stijl kan worden gebruikt om een unieke stijl toe te passen voor een enkel element.

Om inline stijlen te gebruiken, voegt u de stijl attribuut aan het desbetreffende element toe. Het stijl attribuut kan elke CSS-eigenschap bevatten.

 

CSS Voorbeeld:

Inline stijlen worden gedefinieerd binnen het "stijl" attribuut van het betreffende element:

 
 

<!DOCTYPE html>
<
html>
<body>


<
h1 style="color:blue;text-align:center;>Dit is een hoofding </h1>
<
p style="color:red;">Dit is een paragraaf.</p>

<
/body>
<
/html>

 
   

Tip: Een inline style verliest veel van de voordelen van een stylesheet (door het mengen van de inhoud met de presentatie). Gebruik deze methode spaarzaam.

Meerdere Style Sheets

Als sommige eigenschappen zijn gedefinieerd voor dezelfde selector (element) in verschillende style sheets, zal de waarde van het laatst gelezen stijlblad gebruikt worden.

Neem aan dat een extern style sheet de volgende stijl heeft voor het <h1>element:

h1 {
      color: navy;
}


Vervolgens gaan we ervan uit dat er een interne style sheet ook voor het <h1> element:
h1 {
      color: orange;
}

 

CSS Voorbeeld:

Als de interne stijl is gedefinieerd na de link van de externe stylesheet, de <h1> elementen zullen dan "oranje" zijn:

 
 

<head>
<
link rel="stylesheet" type="text/css" href="mystyle.css">
<
style>
h1{
     
color: orange;
}
<
/style>
<
/head>

 
   

 

CSS Voorbeeld:

Echter, als de interne stijl is gedefineerd voor de link naar de externe stylesheet, de <h1> elementen zullen "marine" zijn:

 
 

<head>
<
style>
h1 {
     
color: orange;
}
<
/style>
link rel="stylesheet" type="text/css" href="mystyle.css">
<
/head>

 
   


Cascading Order

Welke stijl zal worden gebruikt wanneer er meer dan één stijl opgegeven wordt voor een HTML-element?

Alle stijlen in een pagina zal "cascade" in een nieuwe "virtuele" style sheet volgens de volge regels, waar nummer 1 de hoogste prioriteit heeft:

  1. Inline stijl (in een HTML element)
  2. Externe en interne style sheets (in de head sectie)
  3. Standaard browser

Zo heeft een inline stijl de hoogste prioriteit, en zullen externe en interne stijlen de standaard browser overschrijven.