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
Maak een extern css bestand aan
Ga naar je HTML-CSS map
Maak een nieuwe map
Style
Maak in de map sylte een nieuw bestand
Noem het bestaat: opmaak.css
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>
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.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; }
Last updated
Was this helpful?