HTML- en CSS-spiekbriefje

Het geraamte

Elke pagina heeft dezelfde vorm. Wat in <head> staat, zie je niet in de pagina zelf; wat in <body> staat wel.

<!DOCTYPE html>

<!DOCTYPE html>
<html lang="nl">
  <head>
    <title>IJssalon De Koude Kant</title>
  </head>
  <body>
    <h1>De Koude Kant</h1>
  </body>
</html>

De doctype zegt dat het om moderne HTML gaat. lang vertelt schermlezers en zoekmachines in welke taal de pagina is.

Valkuil: Zonder <!DOCTYPE html> tekent de browser de pagina in een oude modus, met andere maten.

<meta name="viewport">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Zegt een gsm dat de pagina zo breed is als het scherm. Nodig voor elke site die op een gsm moet werken.

Valkuil: Zonder deze regel doet een gsm alsof hij 980px breed is en verkleint hij alles: je media queries lijken dan niet te werken.

<link>

<head>
  <link rel="stylesheet" href="style.css">
</head>

Koppelt een stijlblad aan de pagina. Zo deelt elke pagina van je site dezelfde CSS.

Valkuil: Een style-attribuut op een element werkt ook, maar dan staat je opmaak verspreid over de HTML en wint ze bijna altijd.

Tekst, links en afbeeldingen

<h1> tot <h6>

<h1>De Koude Kant</h1>
<h2>Onze smaken</h2>

Koppen, van het belangrijkst (h1) tot het minst belangrijk (h6). Eén h1 per pagina.

Valkuil: Kies een kop om wat hij betekent, niet om hoe groot hij is. De maat zet je met CSS.

<p>

<p>Elke dag open van 11 tot 22 uur.</p>

Een alinea. De browser zet witruimte boven en onder.

<strong> en <em>

<p>Pistache is <strong>uitverkocht</strong>, het is <em>echt</em> waar.</p>

strong is belangrijk (vet), em legt de klemtoon (schuin). Een schermlezer leest ze anders voor.

Valkuil: <b> en <i> zien er hetzelfde uit, maar zeggen niets over de betekenis.

<a href>

<a href="smaken.html">Bekijk onze smaken</a>

Een link. href is het adres: relatief (smaken.html, op je eigen site) of absoluut (https://…).

Valkuil: "Klik hier" zegt niets. Een linktekst zegt waar je terechtkomt.

<img>

<img src="hoorntje.svg" alt="Een hoorntje met roze ijs">

Een afbeelding. alt beschrijft wat erop staat, voor wie ze niet ziet. img heeft geen sluittag.

Valkuil: Zonder alt weet een schermlezer alleen de bestandsnaam. Een afbeelding die niets zegt, krijgt alt="".

Lijsten en tabellen

<ul>, <ol> en <li>

<ul>
  <li>Vanille</li>
  <li>Pistache</li>
</ul>

ul is een lijst met bolletjes, ol een genummerde. Elk punt is een li.

Valkuil: Een li staat altijd in een ul of ol, nooit los.

<table>

<table>
  <tr>
    <th>Smaak</th>
    <th>Prijs</th>
  </tr>
  <tr>
    <td>Vanille</td>
    <td>€ 2,50</td>
  </tr>
</table>

Een tabel, rij per rij (tr). th is een kopcel, td een gewone cel.

Valkuil: Een tabel is voor gegevens in rijen en kolommen, niet om een pagina op te bouwen. Daarvoor is er grid.

Structuur

Deze blokken zien er gewoon uit, maar zeggen wat een stuk van de pagina is. Schermlezers en zoekmachines gebruiken dat.

<header>, <main> en <footer>

<header>De Koude Kant</header>
<main>Onze smaken</main>
<footer>Zeedijk 12, Oostende</footer>

De kop, de hoofdinhoud (één per pagina) en de voet van de pagina.

<nav>

<nav>
  <a href="index.html">Home</a>
  <a href="smaken.html">Smaken</a>
</nav>

Het menu van de site.

<section> en <article>

<section>
  <h2>Nieuws</h2>
  <article>
    <h3>Nieuwe smaak: speculoos</h3>
  </article>
</section>

Een section is een deel van de pagina met een eigen kop. Een article staat op zich, zoals een nieuwsbericht.

<div> en <span>

<div class="kaart">
  <p>Twee bollen <span class="prijs">€ 4,50</span></p>
</div>

Een div is een blok zonder betekenis, een span een stuk tekst zonder betekenis. Handig als haakje voor CSS.

Valkuil: Is er een element met betekenis (nav, button, li), gebruik dan dat.

Formulieren

<label> en <input>

<label for="naam">Je naam</label>
<input id="naam" type="text">

Een veld met zijn label. for en id koppelen ze: wie op het label tikt, komt in het veld.

Valkuil: Een placeholder is geen label: hij verdwijnt zodra je typt.

<input type>

<label for="mail">E-mail</label>
<input id="mail" type="email">

Het type kiest het toetsenbord en de controle: email, tel, number, date, checkbox.

<button>

<button type="submit">Inschrijven</button>

Een knop. In een formulier verstuurt hij het.

Selectors

Een selector zegt welke elementen een regel vindt. Wint een andere regel? Dan telt de specificiteit: eerst id's, dan classes, dan elementen. Bij een gelijkspel wint de laatste regel.

pSpecificiteit (0,0,1)

p {
  line-height: 1.5;
}

Elk element van die soort.

.prijsSpecificiteit (0,1,0)

.prijs {
  color: red;
}

Elk element met class="prijs", hoeveel het er ook zijn.

Valkuil: In de HTML schrijf je class="prijs" zonder punt, in de CSS .prijs met punt. En hoofdletters tellen: .Prijs vindt niets.

#menuSpecificiteit (1,0,0)

#menu {
  background: white;
}

Het ene element met id="menu".

Valkuil: Een id weegt zwaar: een regel op #menu is moeilijk te overtreffen. Kies liever een class.

nav aSpecificiteit (0,0,2)

nav a {
  text-decoration: none;
}

Elke a ergens binnen een nav, hoe diep ook.

ul > liSpecificiteit (0,0,2)

ul > li {
  margin: 4px 0;
}

Alleen de li die een rechtstreeks kind van een ul is.

h1, h2

h1, h2 {
  font-family: Georgia, serif;
}

Twee selectors, één regel. Elke selector telt apart.

Valkuil: Een komma te veel of te weinig verandert alles: h1 h2 zoekt een h2 in een h1.

a[href^="https"]Specificiteit (0,1,1)

a[href^="https"] {
  color: green;
}

Een attribuutselector: elke link waarvan href met https begint. $= is "eindigt op", = is "precies".

a:hoverSpecificiteit (0,1,1)

a:hover {
  text-decoration: underline;
}

Een pseudoklasse: de link zolang de muis erop staat. :focus is het veld of de knop waar je met Tab op staat.

li:nth-child(2n)Specificiteit (0,1,1)

li:nth-child(2n) {
  background: #f5f5f5;
}

Elk tweede item. :first-child en :last-child zijn het eerste en het laatste.

Valkuil: :nth-child(3) voor "het laatste" klopt alleen zolang er drie zijn. Gebruik :last-child.

Tekst en kleur

color

h1 {
  color: #e4572e;
}

De kleur van de tekst. red, #f00, rgb(255 0 0) en hsl(0 100% 50%) zijn dezelfde kleur.

Valkuil: colour bestaat niet in CSS. En een vergeten ; na een waarde laat de volgende eigenschap wegvallen.

font-family

body {
  font-family: Georgia, serif;
}

Het lettertype, met een reserve: kent de computer Georgia niet, dan neemt hij een serif.

font-size

h1 {
  font-size: 2rem;
}

De grootte. rem is een veelvoud van de standaardgrootte, zodat de tekst meegroeit als iemand die groter zet.

font-weight

.prijs {
  font-weight: bold;
}

Hoe vet de tekst is, van 100 tot 900; bold is 700.

text-align

header {
  text-align: center;
}

Zet tekst, en kleine blokjes zoals een afbeelding, links, in het midden of rechts binnen hun ouder.

Valkuil: Een blok zelf centreer je niet zo, maar met margin: auto.

line-height

p {
  line-height: 1.5;
}

De hoogte van een regel. Een getal zonder eenheid groeit mee met de lettergrootte.

Het boxmodel

Elk element is een doos: de inhoud, dan padding, dan border, dan margin.

padding

.kaart {
  padding: 16px 24px;
}

Ruimte binnen de rand. Twee waarden: boven en onder, dan links en rechts.

border

.kaart {
  border: 2px solid #3b2a1a;
}

De rand: dikte, stijl en kleur.

margin

.kaart {
  margin-bottom: 24px;
}

Ruimte buiten de rand, tussen dit element en de rest.

Valkuil: Twee marges boven elkaar vallen samen: 24px en 16px geven 24px, niet 40px.

box-sizing

* {
  box-sizing: border-box;
}

Met border-box telt width de padding en de rand mee. Zo blijft een vak van 100% ook echt 100% breed.

Valkuil: Zonder border-box is width: 100% plus padding breder dan de ouder.

max-width en margin auto

main {
  max-width: 40rem;
  margin: 0 auto;
}

Nooit breder dan 40rem, en in het midden: auto verdeelt de ruimte links en rechts.

Valkuil: Een vaste marge zoals margin-left: 120px centreert maar op één breedte.

display

.menu a {
  display: inline-block;
}

block neemt een hele regel, inline loopt mee in de tekst, inline-block loopt mee maar krijgt een breedte en padding, none verbergt.

Flexbox

Flexbox zet items op één lijn, de hoofdas. De dwarsas staat er haaks op. De regels staan op de container, niet op de items.

display: flex

.trucks {
  display: flex;
}

De kinderen van .trucks staan naast elkaar.

justify-content

.trucks {
  display: flex;
  justify-content: space-between;
}

Verdeelt de items over de hoofdas: center, flex-end, space-between, space-around.

Valkuil: justify-content werkt op de hoofdas, align-items op de dwarsas. Met flex-direction: column draaien ze mee.

align-items

.trucks {
  display: flex;
  align-items: center;
}

Zet de items op de dwarsas: flex-start, center, flex-end, stretch of baseline.

flex-direction

.trucks {
  display: flex;
  flex-direction: column;
}

Draait de hoofdas: row (standaard) of column.

flex-wrap en gap

.trucks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Items die niet passen, gaan naar een nieuwe rij, met 16px ertussen.

Valkuil: Een margin op elk item zet ook ruimte aan de buitenkant.

flex

.truck {
  flex: 1;
}

Op een item: het groeit mee in de vrije ruimte. flex: 1 op elk item maakt ze even breed.

Grid

Grid verdeelt de container in rijen en kolommen tegelijk.

grid-template-columns

.plaatsen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Drie kolommen die elk een deel (fr) van de vrije ruimte krijgen.

Valkuil: 33% telt de gap niet mee en loopt over; 1fr deelt alleen wat overblijft.

gap

.plaatsen {
  display: grid;
  gap: 12px 24px;
}

Ruimte tussen de rijen, dan tussen de kolommen.

grid-column

.vijver {
  grid-column: 1 / -1;
}

Van lijn 1 tot de laatste lijn: over de hele breedte. span 2 is twee kolommen breed.

Valkuil: Lijnen zijn geen kolommen: drie kolommen hebben vier lijnen.

grid-template-areas

body {
  display: grid;
  grid-template-areas:
    "kop kop"
    "zij hoofd";
}
header {
  grid-area: kop;
}

Teken de layout met namen, en zet elk element met grid-area in zijn vlak.

minmax en auto-fit

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

Zoveel kolommen van minstens 12rem als er passen: op een gsm één, op een groot scherm vier. Zonder media query.

Positioneren en responsief

position

.tafel {
  position: relative;
}
.etiket {
  position: absolute;
  top: 8px;
  right: 8px;
}

absolute plaatst het etiket ten opzichte van de dichtste ouder met een position. relative maakt de tafel die ouder.

Valkuil: Zonder position: relative op de tafel hangt het etiket aan de hoek van de pagina.

position: sticky

header {
  position: sticky;
  top: 0;
}

Scrolt mee tot hij bovenaan komt, en blijft daar. fixed blijft altijd op dezelfde plaats in het venster.

@media

.kaarten {
  display: block;
}
@media (min-width: 600px) {
  .kaarten {
    display: flex;
  }
}

Regels die alleen gelden vanaf 600px breed. Begin met de gsm en voeg toe voor grotere schermen: mobiel eerst.

Valkuil: Breekpunten met min-width zet je van klein naar groot; anders overschrijft een latere regel de vorige.

max-width op img

img {
  max-width: 100%;
  height: auto;
}

Een afbeelding wordt nooit breder dan haar ouder, en houdt haar verhouding.

custom properties

:root {
  --accent: #e4572e;
}
.knop {
  background: var(--accent);
}

Een eigen variabele: één keer de kleur kiezen, overal gebruiken.

Valkuil: --Accent en --accent zijn twee verschillende variabelen.

transition

.knop {
  transition: background-color 0.2s;
}
.knop:hover {
  background-color: #c4401c;
}

Een zachte overgang als de kleur verandert.

Valkuil: Zet transition op het element zelf, niet alleen op :hover: anders springt de kleur terug zonder overgang.