Inline styling vs. CSS bestand
Inline styling
- Styles kan je rechtstreeks in jouw HTML document
- Binnen opening tag van een element
- Via
styleattribuut (zie voorbeeld) - 🚫Niet best practice
CSS bestand
- Styles kan je (en doe je best) in een apart CSS bestand
- Bestand met
.cssextensie - Vaak wordt
style.cssofstyles.cssgebruikt, maar is zeker niet verplicht - In jouw projectmap
- Kan op hetzelfde niveau als html
- Kan in een aparte map zoals
css(best practice)
- Bestand met
- Zo hou je style definities op een apart bestand
- Separation of concerns
- Herbruikbaar
- Leesbaar
- Onderhoudbaar
- Cache
- Jouw HTML document moet op de hoogte zijn van waar jouw stylesheet gevonden kan worden
- Gebruik
<link>-element in de head-element - Pad naar jouw stylesheet via een href attribuut (zie voorbeeld)
- Gebruik
👩💻 Hands-on Demo: Aan de slag met CSS
Onze site van daarstraks gaan we visueel opfrissen aan de hand van eigen geschreven CSS.
- In jouw
hello-jupiterproject, voeg eenstyles.cssbestand toe. - Vul dit bestand aan met een CSS rule die jouw
<body>element aanspreekt (zie voorbeeld). - In jouw HTML document (bv.
index.html), voeg de nodige link om jouw HTML te linken aan jouw CSS. - Bekijk het resultaat via de Live Server en pas aan zodat het bij jouw smaak valt.
Oplossingen
🕵️♂️ Klik hier om de oplossingen te tonen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Hello Jupiter</title>
</head>
<body>
<h1>Hello Jupiter</h1>
<p>Dit is mijn tweede website</p>
</body>
</html>
body {
text-align: center;
font-family: sans-serif;
color: white;
background-color: #151f97;
}