Les 1: CSS koppelen aan je HTML-pagina

Met Cascading Style Sheets (CSS) kun je de opmaak van je webpagina veranderen. Wij leren je een extern stylesheet te gebruiken.

Je gebruikt een apart bestand voor je CSS. 

<html>
  <head>
    <title>Mijn pagina</title>
    <link rel="stylesheet" href="style/opmaak.css" type="text/css">
  </head>
...

Let duidelijk op de naam van je bestand en het valt je wellicht op dat deze in een andere folder zit dat je basis html bestand!

In je CSS-bestand maak je stijlregels.

Je selecteert welk HTML-element wilt wijzigen. Daarna tussen geef je tussen { en } aan wat je wilt veranderen. Dit doe je met eigenschap: waarde; tweetallen.

In je CSS bestand ziet het er uit

body {
  background-color: red;
}

Je kunt ieder HTML-element selecteren met de selector.

En je kunt meerdere eigenschappen tegelijk veranderen.

p {
  text-align: right;
}

h1 {
  text-align: center;
  color: green;
  background-color: lightblue;
}

Opdrachten

  1. Maak een extern css bestand aan

    1. Ga naar je HTML-CSS map

    2. Maak een nieuwe map Style

    3. Maak in de map sylte een nieuw bestand

    4. Noem het bestaat: opmaak.css

  2. Zet de regel met <link ...> in de <head> van je index.html bestand <head> <title>Mijn pagina</title> <link rel = "stylesheet" href="style/opmaak.css"> </head>

  3. Zet de code hieronder in je opmaak.css. body { background-color: red; } Sla je bestanden op en kijk of het ewrkt in je browser! Als het goed is, is de achtergrondkleur van je webpagina nu rood.

  4. Breid je css: 1. Voeg <h1>, <h2> en <p> elementen toe aan je index.html bestand 2. Zet de stijlregels zoals hieronder in je opmaak.css bestand. 3. Sla alles op en test of het werk body { background-color: green; } h1 { text-align: right; } h2 { text-align: center; } p { text-align: justify; }

PreviousHTML-CSS-1NextLes 2: Fonts, lettergrootte en stijl

Last updated