Les 1: CSS koppelen aan je HTML-pagina
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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
Je kunt ieder HTML-element selecteren met de selector.
En je kunt meerdere eigenschappen tegelijk veranderen.
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;
}