Wat is CSS

CSS staat voor Cascading Style Sheets.
Een style sheet is een bestand met regels over hoe je inhoud er uit ziet.

De cascade

De basisregel

Als twee regels dezelfde property van hetzelfde element bepalen, en ze zijn even sterk, dan wint de laatste regel.

Stylesheets cascade: at a very simple level, this means that the order of CSS rules matter; when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.

MDN web docs

• "Laatste regel" → easy 😎, de onderste.
• "Even sterk?" → specificity!? 🤨 → dat komt verderop bij cascade en inheritance.

Syntax

Een stylesheet bestaat uit rules. Eén rule ziet er zo uit:

p {
    color: darkred;
}

• p is de selector: welke elementen krijgen deze regels
• color is de property: wat je aanpast
• darkred is de value: waarnaar je het aanpast
• de accolades horen erbij, en elke regel eindigt op een puntkomma

Je leest dat als:

voor alle paragrafen, zet de tekstkleur op donkerrood.

Meerdere properties

Eén selector kan zoveel properties hebben als je wil. Schrijf ze samen, niet in twee losse blokken.

Every byte matters

❌ fout

p {
    color: green;
}

p {
    background-color: blue;
}

✅ goed

p {
    color: green;
    background-color: blue;
}

Shorthand

Sommige properties kan je in één keer schrijven. Je IDE helpt je daarbij.

Every byte matters

/* vier regels */
p {
    background-color: #000;
    background-image: url(images/bg.png);
    background-repeat: no-repeat;
    background-position: left top;
}

/* of één */
p {
    background: #000 url(images/bg.png) no-repeat left top;
}

spoiler 🙈

De shorthands die je het vaakst gaat gebruiken zijn margin, padding en border.
Die komen aan bod bij het box model.

Aanhalingstekens?

Zet aanhalingstekens rond een waarde met een spatie erin.

:root {
    font-family: "Josefin Sans", sans-serif;
}

Waar zet je je CSS

External stylesheet

Een apart .css-bestand, gekoppeld met een link-tag in de head.
Het pad is uiteraard...relatief! Net als bij je afbeeldingen en je links.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio van Piet</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>

Dit is dé manier.

De andere twee (internal en inline) zijn ter info en gaan we niet gebruiken.

Internal stylesheet

CSS tussen style-tags, in de head van je HTML.

<head>
    <title>Portfolio van Piet</title>
    <style>
        p {
            color: black;
        }
    </style>
</head>

Werkt, maar geldt alleen voor die ene pagina. Bij tien pagina's heb je tien keer dezelfde CSS staan. Vermijden.

Inline styles

CSS rechtstreeks in een style-attribuut op het element.

<p style="color: black;">Mijn zwarte tekst</p>

Just don't

• het overschrijft zowat alles (cascade), dus je kan het later nergens meer aanpassen
• het mengt inhoud en opmaak → separation of concern!
• het is niet te onderhouden: zoek maar eens alle style-attributen op je site terug...

Enige uitzondering: als je niet aan de broncode kan.

Duimregel

Gebruik enkel external stylesheets. Vermijd internal stylesheets. Gebruik nooit inline styles.

Meerdere stylesheets

Je mag meerdere link-tags in je head zetten.
Maar! De volgorde is belangrijk, want ook dat is de cascade: wat later komt, wint!

<link rel="stylesheet" href="https://unpkg.com/@csstools/normalize.css">
<link rel="stylesheet" href="css/styles.css">

Overdrijf er niet mee. Elk extra bestand is een extra request naar de server, en dus extra laadtijd. In dit vak kom je normaal toe met normalize plus je eigen stylesheet.

Reset of normalize

Elke browser heeft eigen default styles. Een h1 is niet overal even groot, een ul heeft niet overal dezelfde inspringing... vervelend.

Een CSS reset wist alle default styling. Jij bouwt daarna alles opnieuw op. Je koppen zien er dan uit als platte tekst, en alle betekenis die de browser gratis gaf, ben je kwijt.

Een CSS normalize maakt de defaults gelijk over de browsers en houdt de zinvolle defaults. Een h1 blijft een grote vette kop, maar overal dezelfde.

Wij gebruiken normalize

Altijd toevoegen, in de head, als eerste external stylesheet, vóór je eigen bestand.

<link rel="stylesheet" href="https://unpkg.com/@csstools/normalize.css">

Meer info: csstools/normalize.css

Cascade!

Normalize zet een hoop defaults, jouw stylesheet komt daarna en mag ze overschrijven. Draai je de twee link-tags om, dan wint normalize van jou en vraag je je een half uur af waarom er niets verandert 😉.

Oefening: je eerste stylesheet

Maak in de playground een basisdocument met vijf paragrafen, en koppel er een stylesheet aan. Geef alle paragrafen een kleur.

Openen in een nieuw tabblad

Antwoord

index.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mijn eerste stylesheet</title> 
    <link rel="stylesheet" href="./styles.css"> 
</head>

styles.css

p {
    color: darkred;
}