Webpagina's vormgeven met CSS: cascade en boxmodel

HTML beschrijft inhoud en betekenis. CSS, een afkorting van Cascading Style Sheets, beschrijft de vormgeving: kleuren, lettertypen, tussenruimte, randen en achtergronden. Door een stijlblad te wijzigen kun je dezelfde HTML een ander uiterlijk geven zonder de koppen, alinea's of links te veranderen.

Lees een regel

p {
  color: navy;
  font-size: 18px;
}

De selector p komt overeen met alinea's. De accolades omsluiten het declaratieblok. Elke declaratie heeft een eigenschap, een dubbele punt, een waarde en een puntkomma. Hier zijn color en font-size eigenschappen; navy en 18px zijn waarden. Regeleinden en spaties tussen deze onderdelen maken de code gemakkelijker leesbaar zonder het effect te veranderen.

Een puntkomma scheidt een declaratie van de volgende. De laatste is optioneel, maar door die te laten staan voorkom je fouten wanneer je een regel toevoegt. In color: navy font-size: 18px; leest de browser één ongeldige kleurwaarde. De browser kan de twee bedoelde declaraties niet herstellen, dus geen van beide stijlen wordt door die tekst ingesteld.

Koppel de CSS

Een extern stijlblad is een afzonderlijk CSS-bestand waarnaar vanuit de HTML-head wordt gelinkt:

<link rel="stylesheet" href="css/styles.css">

Dit pad betekent dat een map met de naam css naast het HTML-bestand staat en styles.css bevat. Eén extern bestand kan meerdere pagina's vormgeven. Als je daarin een wijziging opslaat, worden de regels bijgewerkt die die pagina's laden.

Een style-element in de head bevat regels voor één pagina. Een inline style-attribuut bevat declaraties voor één element, zoals <p style="color: crimson;">Hello.</p>. Externe stijlbladen zijn meestal gemakkelijker te onderhouden. Normale inline declaraties krijgen ook voorrang op normale regels in stijlbladen van de auteur, wat latere wijzigingen lastig kan maken.

Zet voor een eerste resultaat body { font-family: Arial, sans-serif; } en h1 { color: darkslateblue; } in het gekoppelde bestand. Laad de pagina opnieuw. Lopende tekst krijgt Arial waar beschikbaar, met een schreefloos terugvallettertype; de kop verandert van kleur. Bedieningselementen zoals knoppen kunnen hun eigen browserlettertype behouden totdat je expliciet instelt dat ze het lettertype overerven.

Zoek syntaxis- en padfouten

Browsers slaan ongeldige declaraties over en gaan verder. color: 12px; is ongeldig omdat een lengte geen kleur is. font-size: 16 px; is ongeldig omdat het getal en de eenheid aan elkaar moeten staan. Ook een verkeerd gespelde eigenschap wordt genegeerd. Een geldige randdeclaratie in hetzelfde blok kan nog steeds werken, dus één zichtbare verandering bewijst niet dat elke declaratie geldig is.

CSS-commentaar gebruikt /* Header styles */ en kan over meerdere regels lopen. // begint geen CSS-commentaar; het kan ervoor zorgen dat daaropvolgende code wordt overgeslagen. Eigenschapsnamen en gewone sleutelwoordwaarden zijn niet hoofdlettergevoelig; schrijf ze volgens de conventie met kleine letters. Klassenamen en bestandspaden moeten overeenkomen met de werkelijke spelling en het gebruik van hoofdletters.

Als er geen stijlen verschijnen, controleer dan het verzoek in het netwerkpaneel. Een verkeerd pad zoals style.css kan een 404 opleveren, ook al opent de HTML-pagina zelf normaal.

Behandel verkorte eigenschappen als volledige instellingen

Een verkorte eigenschap stelt meerdere verwante eigenschappen tegelijk in. margin: 10px 20px; stelt alle vier de marges in. Weggelaten onderdelen keren terug naar hun beginwaarden: background-image: url("sky.jpg"); gevolgd door background: lightblue; verwijdert de afbeelding. Plaats eerst de verkorte eigenschap en daarna de afzonderlijke uitzonderingen die behouden moeten blijven.

Een gewone HTML-pagina heeft toch grote koppen, ruimte tussen alinea's, lijstmarkeringen en onderstreepte links. Die komen uit het browserstijlblad, de ingebouwde CSS van de browser. Je stijlen beginnen met deze standaardinstellingen; een pagina zonder eigen vormgeving is geen pagina zonder CSS-regels.

Kies eerst de betekenis en dan het uiterlijk

Typische standaardinstellingen zijn een marge van 8px op de body, verticale alineamarges van 1em en een binnenruimte van 40px aan het begin van lijsten. Standaardinstellingen voor koppen zijn onder meer 2em voor h1 en 1.5em voor h2, met verticale marges van 0.67em voor h1. Belangrijke tekst is vet; tekst met nadruk is cursief. Niet-bezochte links zijn meestal blauw en bezochte links paars. Browserinstellingen en implementaties kunnen de standaardinstellingen beïnvloeden, dus inspecteer de daadwerkelijke pagina als nauwkeurigheid belangrijk is.

De standaardtekstgrootte is meestal 16px, met een lettertype dat in de browserinstellingen is gekozen. Lezers kunnen die grootte veranderen. Relatieve lettergroottes kunnen hun keuze volgen.

Kies een HTML-element om zijn betekenis en geef het daarna vorm. Als een h2 er te groot uitziet, gebruik dan h2 { font-size: 1.25rem; }. Als je alleen voor kleinere letters een h4 kiest, verandert de koppenstructuur. Door de CSS-grootte te wijzigen blijft de betekenis van de kop van het tweede niveau intact.

De standaardinstellingen bepalen ook hoe elementen ruimte innemen. Alinea's en secties vormen normaal gesproken blokboxen. Span-elementen en links lopen normaal gesproken binnen regels mee. Lijstitems hebben display: list-item, waardoor ze een box op blokniveau en een markering krijgen. Een wijziging van display in CSS verandert het gedrag van de box, terwijl de HTML-betekenis van het element behouden blijft.

Zet alleen terug wat je wilt

Een CSS-reset verwijdert geselecteerde standaardinstellingen. body { margin: 0; } verwijdert de ruimte aan de buitenkant. Een brede regel zoals * { margin: 0; padding: 0; } verwijdert ook de tussenruimte van alinea's en de inspringing van lijsten, die je dan opnieuw moet instellen. Een normalize-aanpak behoudt nuttige standaardinstellingen en past inconsistenties aan.

Formulieronderdelen hebben vaak rechtstreeks toegewezen browserlettertypen. Schrijf het volgende om ze hetzelfde lettertype als de pagina te geven:

button, input, select, textarea {
  font: inherit;
}

Begin het HTML-document met <!DOCTYPE html>. Dit selecteert de standaardmodus. Als je de doctype weglaat, kan de quirksmodus worden ingeschakeld, waarin ouder compatibiliteitsgedrag sommige afmetingen en andere CSS-resultaten verandert.

Inspecteer de eigenschap die je verrast

Klik met de rechtermuisknop op een element en kies Inspecteren. Het stijlenpaneel toont overeenkomende regels, waaronder browserregels met een label voor browserstijlen. Een doorgestreepte declaratie heeft van een andere declaratie verloren; een waarschuwing kan ongeldige CSS markeren. Per eigenschap wordt een winnaar gekozen, dus een regel kan zijn kleur verliezen maar nog wel zijn binnenruimte leveren.

Het paneel Computed toont de uiteindelijke eigenschapswaarden en de inhoud, binnenruimte, rand en marge van het boxmodel. Als een kop een onverwachte tussenruimte heeft, inspecteer dan de marge voordat je binnenruimte aan een ander element toevoegt. Test een wijziging direct in de ontwikkelaarstools en kopieer de werkende regel daarna naar je stijlblad: wijzigingen tijdens de inspectie verdwijnen als de pagina opnieuw wordt geladen.

Als een stijl niet werkt, volg dan een handige volgorde: controleer of het stijlblad is geladen, of de selector overeenkomt, of de declaratie geldig is, of die wint en of de eigenschap invloed heeft op dit soort box. Een geldige width: 200px bepaalt nog steeds niet de breedte van een gewone inline span.

Een selector beantwoordt een praktische vraag: welke elementen moeten deze declaraties krijgen? Begin met de eenvoudigste selector die de gewenste rol uitdrukt. Een klasse kan op veel elementen worden hergebruikt zonder de stijl aan één plaats op de pagina te koppelen.

Selecteer op naam en attribuut

Een typeselector is een elementnaam. Een klasseselector begint met een punt; een ID-selector begint met #. Het leesteken hoort bij de CSS-selector, niet bij de waarde van het HTML-attribuut. Schrijf <p class="warning">, niet <p class=".warning">.

Een element kan meerdere klassen hebben, gescheiden door spaties. Zowel <p class="warning"> als <div class="box warning"> komt overeen met .warning. Een ID moet uniek zijn binnen een pagina. Door de hoge specificiteit zijn stijlen op basis van ID's ook moeilijker te overschrijven. Daarom zijn klassen meestal het belangrijkste hulpmiddel voor herbruikbare stijlen.

Gebruik namen die een rol beschrijven, zoals .error-message of .product-card. Een naam als .red-text wordt misleidend als het ontwerp een andere kleur krijgt. Klassenamen zijn hoofdlettergevoelig: .Warning en .warning verschillen. Een naam die met een cijfer begint, moet in een CSS-selector worden geëscapet; met .three-columns vermijd je de ongeldige, niet-geëscapete vorm .3-columns.

Stel meerdere voorwaarden aan één element

Door selectors tegen elkaar aan te schrijven maak je een samengestelde selector. Hetzelfde element moet aan elk onderdeel voldoen. p.intro komt overeen met alinea's die de klasse intro hebben. .card.featured komt overeen met een element met beide klassen.

<p class="note important">Doors open at 19:00.</p>
<p class="note">Bring your ticket.</p>

.note { color: #333333; }
.important { font-weight: bold; }
p.note.important { border-left: 4px solid crimson; }

Zoek eerst de overeenkomende elementen. Beide alinea's hebben note, dus beide krijgen donkergrijze tekst. Alleen de eerste heeft important, dus alleen die wordt vet. De samengestelde selector voegt de linkerrand toe aan diezelfde eerste alinea, omdat die een p met beide klassen is. Er is geen extra omhullend element nodig.

Een spatie verandert de opdracht: p .intro selecteert een element met de klasse intro binnen een alinea. De selector selecteert niet de alinea zelf. Houd de onderdelen bij elkaar als ze hetzelfde element beschrijven.

Deel een declaratieblok

Een komma maakt een selectorlijst:

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

Elke selector komt onafhankelijk overeen met zijn kopniveau. Zonder de komma's zou h1 h2 h3 vragen om een h3 binnen een h2 binnen een h1.

Een ongeldige selector in een gewone selectorlijst kan de hele regel ongeldig maken. h1, h2..title, h3 geeft geen van die koppen vorm, omdat de twee opeenvolgende punten ongeldig zijn. Als een gedeelde regel lijkt te ontbreken, controleer dan elke selector in de lijst, niet alleen die voor het element dat je hebt geïnspecteerd.

Sommige voorwaarden voor vormgeving staan al in HTML-attributen. Andere hangen af van wat de lezer doet of waar een element tussen zijn zusterelementen staat. CSS kan elementen op deze voorwaarden selecteren zonder voor elke voorwaarde een klasse toe te voegen.

Selecteer een attribuut of de waarde ervan

Attribuutselectors gebruiken vierkante haken. [alt] komt overeen met een aanwezig attribuut, ook als de waarde leeg is. input[type="email"] vereist de exacte attribuutwaarde.

Voeg i toe vóór de sluitende haak om geen onderscheid te maken tussen hoofdletters en kleine letters, zoals in a[href$=".pdf" i]. Deze selector bereikt ook een link die eindigt op .PDF. Door op een heel woord te selecteren voorkom je dat note per ongeluk overeenkomt met een langer klassewoord zoals notebook.

Selecteer een toestand of positie

Een pseudoklasse gebruikt één dubbele punt: :hover, :focus, :checked of :disabled. :focus-visible selecteert een element met focus wanneer de browser bepaalt dat een zichtbare indicator nodig is, meestal tijdens navigatie met het toetsenbord.

Een link kan tegelijk bezocht zijn en aangewezen worden. Schrijf linktoestanden bij concurrerende regels met dezelfde specificiteit in deze volgorde: :link, :visited, :focus, :hover, :active. Anders zou een latere regel voor de bezoekkleur bij een bezochte link winnen van een eerdere regel voor de kleur bij aanwijzen. Browsers beperken :visited om privacyredenen tot bepaalde kleurwijzigingen; het lettergewicht instellen werkt niet en transparantie kan de bezoekgeschiedenis niet onthullen.

Structurele pseudoklassen tellen zusterelementen. :first-child betekent het eerste kindelement van zijn ouderelement. In <article><h2>News</h2><p>Update</p></article> komt p:first-child met niets overeen. p:first-of-type komt wel overeen met die alinea.

:nth-child(3) selecteert het derde kindelement. odd selecteert posities 1, 3, 5; even selecteert 2, 4, 6. Begin in :nth-child(3n+1) met n = 0, daarna 1, 2 en 3: de geselecteerde posities zijn 1, 4, 7 en 10. li:not(:last-child) sluit het laatste item uit en is daarom handig voor scheidingen die alleen tussen items staan.

Geef een onderdeel vorm of voeg een aanwijzing toe

Een pseudo-element gebruikt twee dubbele punten. ::first-line en ::first-letter geven delen van tekst vorm; ::marker geeft lijstmarkeringen vorm, ::placeholder de hint van een veld en ::selection geselecteerde tekst. De oudere vormen met één dubbele punt voor before, after, first-line en first-letter werken nog steeds.

.required::after {
  content: " *";
  color: crimson;
}

::after maakt inhoud binnen het geselecteerde element, na de bestaande inhoud. ::before maakt die ervoor. Beide hebben een content-waarde nodig; zelfs content: "" maakt een decoratieve box. Essentiële tekst hoort in de HTML, waar die werkelijke documentinhoud blijft. Gebruik deze pseudo-elementen voor decoratie of kleine aanwijzingen, omdat gegenereerde tekst niet zo betrouwbaar als HTML-tekst kan worden geselecteerd of gekopieerd.

HTML-elementen vormen een boom. Een element dat direct binnen een ander element staat, is een kindelement daarvan; alles wat daarin is genest, is een afstammeling. Elementen met hetzelfde ouderelement zijn zusterelementen. Een combinator verbindt selectors op basis van een van deze relaties.

Volg de relatie naar het doelelement

Het meest rechtse deel benoemt het element dat de declaraties krijgt. h2 + p geeft de alinea vorm, niet de kop. Beide zusterelementcombinators kijken vooruit langs zusterelementen; geen van beide selecteert een ouderelement of een eerder zusterelement.

Volg een geneste lijst

<ul class="menu">
  <li>Guides</li>
  <li>Topics
    <ul>
      <li>Typography</li>
    </ul>
  </li>
</ul>

.menu li komt overeen met alle drie de lijstitems, omdat ze alle drie afstammelingen van de buitenste lijst zijn. .menu > li komt alleen overeen met “Guides” en “Topics”: hun ouderelement is de lijst met de klasse menu. Het ouderelement van het item “Typography” is de binnenste ul, die die klasse niet heeft.

Dit onderscheid is belangrijk wanneer items op het hoogste niveau veel binnenruimte nodig hebben, maar geneste items een compacte tussenruimte. Een afstammelingsselector bereikt elke diepte, tenzij een andere voorwaarde de selectie beperkt.

Volg volgende zusterelementen

<article>
  <h2>Opening hours</h2>
  <p>Visit in the morning.</p>
  <aside>Closed on holidays.</aside>
  <p>Booking is optional.</p>
</article>

h2 + p komt overeen met de eerste alinea. De selector slaat de aside niet over om een andere alinea te vinden. h2 ~ p komt overeen met beide alinea's, omdat beide na de kop komen en hetzelfde ouderelement hebben. Als een alinea binnen de aside zou staan, zou die geen zusterelement van de kop zijn en daarom met geen van beide selectors overeenkomen.

Combineer relaties zonder te veel te selecteren

.sidebar > ul a:hover komt overeen met aangewezen links ergens binnen een ul waarvan het directe ouderelement de klasse sidebar heeft. Lees van rechts naar links: een aangewezen link; binnen een lijst; die lijst direct binnen de zijbalk. De spatie staat tussengelegen elementen tussen de lijst en de link toe.

Combinators voegen geen specificiteit toe. De elementen, klassen, ID's en andere selecterende onderdelen van de selector doen dat nog wel. Lange ketens kunnen regels daardoor moeilijker te onderhouden maken, ook al voegen de relatietekens geen punten toe: als de nesting van de HTML verandert, kan de selector niet meer overeenkomen. Een beschrijvende klasse op het doelelement, zoals .menu-link, drukt een herbruikbare rol vaak duidelijker uit.

Als een regel niet overeenkomt, inspecteer dan de werkelijke boom in plaats van visuele tussenruimtes te tellen. Twee elementen kunnen op het scherm naast elkaar staan terwijl ze in de HTML verschillende ouderelementen hebben. Commentaar en witruimte tellen bij deze combinators niet als zusterelementen.

De cascade kiest voor elke eigenschap op elk element een winnende declaratie. De cascade kiest niet één volledige regel om alle andere weg te laten. Met p { color: gray; font-size: 18px; } en .lead { color: black; } kan een alinea met de klasse lead haar kleur van de klasseregel en haar grootte van de typeregel krijgen.

Vergelijk in de juiste volgorde

Verwijder eerst declaraties die niet van toepassing zijn: hun selectors moeten overeenkomen en eventuele voorwaarden moeten waar zijn. Vergelijk daarna herkomst en belang, inclusief de voorrang van cascadelagen. Normale inline auteursstijlen krijgen voorrang op normale regels in stijlbladen van de auteur. Als declaraties na deze eerdere stappen gelijk blijven, vergelijk je de specificiteit; gebruik bij een resterende gelijke stand de volgorde van voorkomen.

Bij twee .button-regels met gelijke voorrang die verschillende achtergrondkleuren instellen, beslist de volgorde: de latere wint. Stijlbladen die later in de HTML zijn gekoppeld, komen bij zulke gelijke standen ook later. Een bestand dat sneller via het netwerk binnenkomt, komt daardoor niet later in de cascade.

Begrijp belang voordat je het toevoegt

Een inline declaratie zoals style="color: purple;" wint van normale selectors in stijlbladen van de auteur, zelfs van selectors met ID's. Een declaratie met !important in een stijlblad van de auteur kan van die normale inline declaratie winnen.

<p class="note" style="color: purple;">Check the time.</p>

p { color: gray !important; }
.note { color: blue; }

De alinea is grijs. Belang wordt vóór selectorspecificiteit of het voordeel van normale inline stijlen vergeleken. Als de inline kleur ook !important heeft, wint die belangrijke inline declaratie van de belangrijke regel in het stijlblad van de auteur.

Bij belangrijke declaraties is de voorrang van herkomst omgekeerd: belangrijke browserdeclaraties gaan boven belangrijke gebruikersdeclaraties, die weer boven belangrijke auteursdeclaraties gaan. Dit beschermt regels die lezers of browsers moeten afdwingen. Binnen één herkomst komen de voorrang van inline stijlen en lagen nog steeds vóór specificiteit en bronvolgorde.

Als je voor elk conflict !important gebruikt, wordt overschrijven steeds moeilijker. Kies liever een eenvoudigere selector of een bewuste volgorde. Het overschrijven van regels van derden die je niet kunt bewerken, kan een belangrijke declaratie rechtvaardigen; het moet een weloverwogen uitzondering zijn.

Groepeer regels in cascadelagen

@layer reset, base, components;
@layer base {
  p { margin: 0 0 1rem; }
}

Dit declareert de volgorde van de lagen vóór hun regels. Voor normale declaraties winnen latere lagen van eerdere lagen, ongeacht de specificiteit van de selectors. Normale regels buiten een laag winnen van normale regels in lagen. Een componentregel met lage specificiteit kan daardoor een basisregel met hoge specificiteit overschrijven zonder ID's toe te voegen.

Bij belangrijke declaraties is die laagvolgorde omgekeerd: eerdere lagen winnen van latere en belangrijke declaraties in lagen winnen van belangrijke declaraties buiten lagen. Deze omkering behoudt belangrijke beschermingen in fundamentele lagen. Stel bij het onderzoeken van een conflict eerst de winnende herkomst, het belang en de laaggroep vast voordat je tijd besteedt aan het tellen van selectoronderdelen.

Specificiteit meet het selectiegewicht van een selector. Vergelijk specificiteit alleen tussen declaraties die in de eerdere cascadestappen nog gelijk staan, waaronder herkomst, belang, laag en voorrang van inline stijlen.

Tel drie kolommen

Schrijf specificiteit als ID-CLASS-TYPE, zoals 0-1-1.

De universele selector * en combinators voegen niets toe. Voor a[href^="https"]:focus tel je geen ID's, twee CLASS-onderdelen (het attribuut en :focus) en één TYPE-onderdeel (a). Het resultaat is 0-2-1.

Meer voorbeelden: .nav a is 0-1-1; ul li a:hover is 0-1-3; #main .card > h2 is 1-1-1; article p::first-line is 0-0-3. Een pseudo-element telt mee bij de typen, ook al begint de naam met dubbele punten.

Vergelijk vanaf links

Vergelijk eerst de ID's. Als die gelijk zijn, vergelijk je CLASS; als ook die gelijk zijn, vergelijk je TYPE. Alleen bij gelijke drietallen ga je verder naar de bronvolgorde. Dit zijn afzonderlijke aantallen, geen cijfers in een decimaal getal: 0-11-0 verliest nog steeds van 1-0-0. Extra klassen kunnen niet worden doorgeschoven naar een ID.

<nav id="site-nav">
  <a class="active" href="/">Home</a>
</nav>

#site-nav a { color: white; }
nav a.active { color: orange; }
.active { color: yellow; }

Stel dat dit normale declaraties in dezelfde auteurslaag zijn. Hun scores zijn 1-0-1, 0-1-2 en 0-1-0. De eerste wint, dus de link is wit. De ID-kolom beslist de vergelijking voordat de aantallen klassen of typen meetellen.

#site-nav .active zou winnen met 1-1-0, maar een ontwerp op basis van klassen is gemakkelijker uit te breiden: .site-nav a kan de basisstijl leveren en .site-nav .active kan de actieve link veranderen. Zo blijft de specificiteit laag en redelijk gelijkmatig.

Ken de uitzonderingen bij functies

:is(), :not() en :has() voegen voor de functie zelf geen gewicht toe. Hun specifiekste argument levert het gewicht. Zo is li:not(.done) gelijk aan 0-1-1 en :is(#intro, p) a aan 1-0-1. Tel de specifiekste selector in de argumentenlijst, niet de selector die je visueel het dichtst bij het element vindt.

:where() en alles wat daarin staat, dragen altijd nul bij. :where(#main) p scoort daarom 0-0-1. Dit is handig voor standaardstijlen die gemakkelijk te overschrijven moeten zijn.

De afstand tot een voorouder telt niet mee. body h1 en html h1 scoren beide 0-0-2, dus een latere declaratie beslist bij die gelijke stand. Inline stijlen worden vóór selectorspecificiteit behandeld en !important hoort bij belang. Geen van beide is een extra gewoon selectoronderdeel dat je aan het drietal toevoegt.

Overerving laat een kindelement een waarde van zijn ouderelement ontvangen wanneer die eigenschap normaal overerft en geen declaratie een andere waarde op het kindelement instelt. Daardoor kan één bodyregel de tekstkleur en het lettertype voor een groot deel van een pagina bepalen.

Maak onderscheid tussen overgeërfde tekst- en boxinstellingen

De meeste teksteigenschappen erven over: color, lettertype-eigenschappen, line-height, letter-spacing, text-align en text-transform. Lijststijlen en visibility erven ook over. Boxeigenschappen zoals marge, binnenruimte, rand, breedte, hoogte, achtergronden, display en de berekening van boxafmetingen doen dat niet.

body { color: #222222; font-family: Georgia, serif; }
h1, h2 { font-family: Arial, sans-serif; }
footer { color: #666666; }

Gewone lopende tekst gebruikt donkergrijs Georgia. Koppen krijgen hun rechtstreeks toegewezen lettertypefamilie en behouden de overgeërfde kleur. Tekst in de voettekst erft Georgia, terwijl de kleur plaatselijk verandert.

Door de transparante achtergrond van een kindelement is de achtergrond van het ouderelement zichtbaar; dat betekent niet dat het kindelement de achtergrondkleur heeft overgeërfd. Ook krijgen kindelementen van een box met een rand niet automatisch een eigen rand.

Rechtstreekse toewijzingen winnen van waarden die kunnen worden overgeërfd

Met #content { color: red; } en p { color: blue; } is een alinea binnen het inhoudsgebied blauw. De specificiteit van de ID concurreert niet met de alinearegel, omdat de declaraties op verschillende elementen zijn gericht. De alinea heeft al een rechtstreeks toegewezen kleur en heeft het overgeërfde rood dus niet nodig.

Kindelementen erven doorgaans berekende waarden. Als een sectie font-size: 20px heeft en haar kindelement font-size: 0.8em, wordt voor dat kindelement 16px berekend. Een alinea daarbinnen erft 16px; die vermenigvuldigt niet opnieuw met 0.8. Een regelhoogte zonder eenheid is nuttig omdat de overgeërfde waarde een vermenigvuldigingsfactor blijft voor de eigen lettergrootte van elk kindelement.

Kies wat terugzetten betekent

Voor CSS van de auteur maakt revert stijlen van de gebruiker of browser zichtbaar. Het verschil is belangrijk op een div: display: initial geeft de beginwaarde inline van de eigenschap, terwijl display: revert de gebruikelijke browserweergave block herstelt. Een beginwaarde hoort bij de CSS-eigenschap; een browserstandaard kan afhangen van het HTML-element.

inherit werkt ook op een eigenschap die normaal niet overerft, zoals border: inherit. button, input { font: inherit; } vervangt de rechtstreeks toegewezen lettertypen van de bedieningselementen door het lettertype van hun ouderelement. all: unset zet bijna elke eigenschap tegelijk terug, waardoor ook nuttige ingebouwde vormgeving verdwijnt.

Een schijnbare uitzondering is een onderstreping. text-decoration wordt niet overgeërfd, maar een onderstreping van een ouderelement wordt doorgetrokken onder de inline-afstammelingen. Met text-decoration: none op een geneste span kun je de lijn van het ouderelement niet verwijderen. Verwijder die van het ouderelement en pas die alleen toe op de tekst die onderstreept moet zijn.

color stelt de tekstkleur in. Ook achtergronden, randen, omtreklijnen, tekstdecoraties en schaduwen accepteren kleurwaarden. Je kunt dezelfde kleur op verschillende manieren noteren; kies een notatie die de bedoelde verandering gemakkelijk te begrijpen maakt.

Lees namen en hexadecimale kanalen

CSS heeft ongeveer 150 benoemde kleuren, waaronder navy, tomato en rebeccapurple. Namen zijn handig voor snelle experimenten, maar hun dagelijkse betekenis kan je verrassen: green is #008000, terwijl helder zuiver groen lime, of #00ff00, is. Exacte waarden nemen die onzekerheid weg.

Een hexadecimale kleur met zes cijfers heeft drie kanaalparen: rood, groen en blauw. Elk paar loopt van 00 tot ff, wat overeenkomt met 0 tot en met 255. Allemaal nul geeft zwart; allemaal maximaal geeft wit. Gelijke paren leveren een grijstint op, zoals in #808080.

Hexadecimale notatie met drie cijfers verdubbelt elk cijfer: #f0a wordt #ff00aa. Er worden geen nullen toegevoegd. Een kleur zoals #1e90ff kan niet worden verkort omdat niet elk paar uit twee gelijke cijfers bestaat. Hoofdletters en kleine letters in hexadecimale notatie betekenen dezelfde waarden.

Om een paar om te rekenen, vermenigvuldig je het eerste cijfer met 16 en tel je het tweede erbij op. De letters a tot en met f betekenen 10 tot en met 15. Voor #1e90ff geeft 1e 30, 90 144 en ff 255. De bijbehorende RGB-notatie is rgb(30 144 255). Oudere code kan komma's of rgba() gebruiken; die vormen werken nog steeds.

Beschrijf kleurtoon of transparantie

hsl() benoemt kleurtoon, verzadiging en lichtheid. De kleurtoon is een hoek: 0 of 360 is rood, 120 groen en 240 blauw. De verzadiging loopt van grijs bij 0% tot volledig verzadigd bij 100%. De lichtheid loopt van zwart bij 0% tot wit bij 100%. Een zuivere kleurtoon heeft 100% verzadiging en 50% lichtheid, zoals in hsl(0 100% 50%). Door alleen de lichtheid te veranderen maak je verwante donkere en bleke versies.

Een alfawaarde volgt na een schuine streep: rgb(0 0 0 / 0.6) is zwart met 60% ondoorzichtigheid. Nul is volledig transparant en één volledig ondoorzichtig. Hexadecimale notatie met acht cijfers voegt een alfapaar toe: #00000080 heeft 128 van de 255, ongeveer 50% alfa. transparent is volledig transparant.

.notice {
  color: white;
  background-color: rgb(0 0 0 / 0.6);
}

Hier is alleen de achtergrond gedeeltelijk transparant. opacity: 0.6 zou daarentegen het hele element vervagen, inclusief tekst en kindelementen. Dat verschil is belangrijk als je ondoorzichtige, leesbare tekst op een gekleurd oppervlak wilt.

Hergebruik kleur en controleer het resultaat

currentColor betekent de eigen tekstkleur van het element. Met color: #0055aa; border: 2px solid currentColor; volgt de rand de tekst. Als je de tekstkleur verandert, verandert die rand ook zonder dat je een kleurwaarde hoeft te herhalen.

WCAG 2.2 niveau AA vereist een contrast van ten minste 4,5:1 voor normale tekst en 3:1 voor grote tekst, ongeveer 24px of ongeveer 18,5px als die vet is. #767676 op wit is ongeveer 4,54:1; #999999 op wit is ongeveer 2,85:1 en voldoet aan geen van beide drempels. Gebruik een contrastcontroleprogramma of de kleurhulpmiddelen van de browser op de daadwerkelijke combinatie van voorgrond en achtergrond, inclusief het effect van transparantie.

Een lengte combineert een getal met een eenheid, zoals 16px of 1.5rem. Daartussen staat geen spatie. Een breedte die niet nul is, heeft een eenheid nodig: width: 300; is ongeldig. Bij nul mag de eenheid worden weggelaten. Sommige eigenschappen nemen bewust gewone getallen, waaronder line-height: 1.5, opacity: 0.8 en font-weight: 700.

Koppel de eenheid aan haar referentie

Een CSS-pixel is niet noodzakelijk één fysiek schermpunt. Schermen met een hoge pixeldichtheid kunnen meerdere apparaatpixels gebruiken voor één CSS-pixel. Vaste relaties tussen eenheden zijn onder meer 1 in = 96 px = 2,54 cm en 1 pt = 1/72 in. Dus 12 pt is gelijk aan 16 px en 1 cm is ongeveer 37,8 px. Die omrekeningen garanderen niet op elk scherm een fysieke maat.

Werk waarden ten opzichte van de lettergrootte uit

Stel dat een ouderelement een lettergrootte van 16px heeft en zijn kindelement font-size: 1.25em; padding: 2em;. Bereken eerst de lettergrootte: 1,25 keer 16px geeft 20px. De binnenruimte gebruikt vervolgens de eigen grootte van het kindelement, dus 2 keer 20px geeft 40px aan elke kant.

Geneste lettergroottes in em kunnen op elkaar worden toegepast. Met li { font-size: 1.25em; } worden drie geneste niveaus vanaf 16px achtereenvolgens 20px, 25px en 31,25px. 1.25rem geeft daarentegen op elk niveau 20px als het hoofdelement 16px is.

Als je de grootte van het hoofdelement op de browserstandaard laat staan of als percentage instelt, kan relatieve tekst meeveranderen wanneer een lezer die standaard wijzigt. Een vaste html { font-size: 16px; } overschrijft die instelling. Een praktisch patroon is rem voor de lettergrootte en em voor de binnenruimte van een knop, zodat de tussenruimte meegroeit met de eigen tekst.

Controleer percentages en de viewport

De eigenschap bepaalt de referentie voor een percentage. Een omsluitend blok levert een referentie voor de boxafmetingen; in deze voorbeelden in de normale documentstroom is dat meestal het inhoudsgebied van het ouderelement. Een kindelement met width: 40% in een omsluitend blok van 600px is 240px breed voordat eventuele binnenruimte of een rand volgens het content-boxmodel wordt toegevoegd. font-size: 150% gebruikt de lettergrootte van het ouderelement. Zelfs procentuele binnenruimte en marges boven en onder gebruiken de breedte van het omsluitende blok, niet de hoogte.

1vw is 1% van de viewportbreedte; 1vh is 1% van de viewporthoogte. In een viewport van 1280 bij 800 CSS-pixels is 50vw gelijk aan 640px en 10vh gelijk aan 80px. 100vw kan de breedte van de schuifbalk omvatten en horizontaal overlopende inhoud veroorzaken waar 100% van het ouderelement wel zou passen.

max-width: 65ch geeft een tekstkolom een breedte die samenhangt met het lettertype. Het is ongeveer een maat voor de leeslengte, geen belofte dat elke regel precies 65 tekens heeft.

Combineer eenheden met een berekening

width: calc(100% - 40px); trekt een vaste hoeveelheid af van een relatieve afmeting. Houd spaties rond + en -; calc(100%-40px) is ongeldig. Browsers rekenen lengtes relatief aan de lettergrootte om naar pixels, terwijl percentages van containerafmetingen tijdens de lay-outberekening worden vastgesteld. Ontwikkelaarstools tonen de resulterende afmetingen, zodat je zowel de referentie als de berekening kunt controleren.

Van binnen naar buiten heeft een box inhoud, binnenruimte, een rand en een marge. De inhoud bevat tekst, afbeeldingen of kindelementen. De binnenruimte schept ruimte rond die inhoud. De rand omsluit de binnenruimte; de marge scheidt de box inclusief rand van aangrenzende boxen.

Een achtergrond vult de inhoud en binnenruimte en loopt door onder de rand, maar kleurt nooit de marge. Gebruik binnenruimte als de ruimte deel moet uitmaken van een gekleurde kaart. Gebruik marge voor ruimte daarbuiten. Marges kunnen negatief zijn; binnenruimte niet.

Lees de verkorte eigenschappen voor tussenruimte

margin, padding en border-width accepteren één tot vier waarden:

De volgorde met vier waarden loopt met de klok mee vanaf boven. Gebruik afzonderlijke eigenschappen zoals padding-left om na de verkorte eigenschap slechts één kant te veranderen. Lees de tweede waarde van een vorm met twee waarden niet als de onderkant: die stelt beide horizontale kanten in.

Bereken de standaardbox op basis van de inhoud

.card {
  width: 300px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}

De beginwaarde voor box-sizing is content-box. De opgegeven breedte van 300px omvat alleen de inhoud. Tel twee keer 20px binnenruimte en twee keer 5px rand erbij op: de box inclusief rand is 350px breed. Tel de twee marges van 10px erbij op voor 370px horizontale ruimte.

De hoogte werkt op dezelfde manier als die expliciet is ingesteld, maar tekst heeft vaak een box nodig die kan groeien. Door height: auto te laten staan voorkom je dat veranderende inhoud in een vaste hoogte wordt opgesloten.

Neem binnenruimte en rand op in de breedte

Met box-sizing: border-box omvat dezelfde opgegeven breedte de binnenruimte en de rand. De box inclusief rand blijft 300px; trek 40px binnenruimte en 10px rand af om een inhoudsgebied van 250px te vinden. Marges blijven daarbuiten en leveren 320px horizontale ruimte op.

Een veelgebruikte CSS-reset past dit model toe op elementen en hun gegenereerde onderdelen:

*, *::before, *::after { box-sizing: border-box; }

box-sizing erft niet automatisch over, dus de regel selecteert de boxen rechtstreeks.

Bij een kindelement op volle breedte is het verschil goed te zien. In een container van 600px geeft width: 100%; padding: 0 20px; volgens het content-boxmodel een box inclusief rand van 640px, nog vóór een eventuele rand. Volgens het border-boxmodel omvat dezelfde opgegeven breedte van 600px de binnenruimte en past de box in de container.

Laat inhoud veilig passen

min-height stelt een ondergrens in en laat tegelijk groei toe. max-width: 800px laat een blok met automatische breedte krimpen in een smalle container en voorkomt dat het breder wordt dan 800px.

Als inhoud buiten een vaste box komt, bepaalt overflow het resultaat: visible laat de inhoud uitsteken, hidden snijdt die af, scroll vraagt om schuifbalken en auto maakt scrollen mogelijk wanneer nodig. pre { overflow: auto; } geeft een lange coderegel een eigen schuifgebied. Afsnijden is een slechte oplossing voor tekst die lezers nog nodig hebben; controleer eerst of de vaste afmeting nodig is.

Gebruik het boxdiagram in het paneel Computed om de waarden van de browser voor inhoud, binnenruimte, rand en marge met je berekening te vergelijken.

Het weergavetype bepaalt hoe een box aansluit op zijn omgeving. Een blok begint normaal op een nieuwe regel en vult de beschikbare breedte als de breedte automatisch is. Een gewone inlinebox loopt mee binnen tekst en krijgt zijn afmetingen op basis van de inhoud. Een inline-blockbox behoudt de inlinepositie en accepteert tegelijk expliciete afmetingen.

Kies het gedrag dat je nodig hebt

Bij gewone inline-elementen zoals span en a hebben boven- en ondermarges geen effect. Verticale binnenruimte en randen worden getekend maar duwen aangrenzende regels niet uit elkaar, zodat ze die kunnen overlappen. Horizontale binnenruimte, randen en marges nemen wel ruimte in langs de regel.

nav a {
  display: inline-block;
  padding: 8px 16px;
}

Deze links blijven op een regel staan terwijl hun boxen met binnenruimte verticale ruimte reserveren. display: block zou elke link een eigen regel geven. Afbeeldingen zijn een bijzonder inlinegeval: ze accepteren breedte en hoogte. Hun standaarduitlijning op de basislijn kan onderaan een kleine ruimte overlaten voor letterstaarten; img { display: block; } verwijdert die ruimte bij de basislijn.

display: none verwijdert de box en de ruimte die die inneemt en zorgt dat schermlezers die niet voorlezen. visibility: hidden verbergt de box en behoudt de ruimte.

Centreer een box of de inhoud ervan

.page {
  max-width: 960px;
  margin: 0 auto;
}

In een bredere container stopt het blok met groeien bij 960px en verdelen de twee horizontale automatische marges de resterende ruimte gelijk. Bij een blok dat de container vult, blijft geen horizontale ruimte over om te verdelen. Automatische marges centreren geen gewone inlinebox en verticale automatische marges in de normale blokstroom worden nul.

text-align: center doet iets anders: het centreert inline-inhoud binnen een blok. Een gecentreerde alineabox kan nog steeds links uitgelijnde tekst hebben; een alinea op volle breedte kan gecentreerde tekst hebben zonder een smallere gecentreerde box te worden.

Herken samenvallende verticale marges

In de normale blokstroom kunnen aangrenzende boven- en ondermarges samenvallen. Twee positieve marges worden de grootste van de twee. Een kop met een ondermarge van 24px gevolgd door een alinea met een bovenmarge van 16px heeft een tussenruimte van 24px, niet 40px. Horizontale marges vallen niet samen.

Combineer bij positieve en negatieve marges de grootste positieve met de meest negatieve: 20px en −8px worden 12px. Als alle marges negatief zijn, wint de meest negatieve. Bij een lege box zonder scheidende inhoud, hoogte, rand of binnenruimte kunnen de eigen boven- en ondermarge samenvallen.

De bovenmarge van een eerste kindelement kan ook samenvallen met die van een ouderelement zonder scheidende rand, binnenruimte of eerdere inhoud. De ruimte verschijnt dan buiten de achtergrond van het ouderelement. Voeg binnenruimte of een rand toe aan het ouderelement, of verwijder de bovenmarge van het kindelement. Onder vergelijkbare voorwaarden kan de ondermarge van een laatste kindelement samenvallen; een hoogte of minimumhoogte op het ouderelement kan dat onderaan voorkomen.

Bij inline-blockboxen vallen marges niet samen, evenmin als bij flex- en griditems of zwevende en absoluut gepositioneerde boxen. Een eenvoudig patroon voor teksttussenruimte zet bovenmarges op nul en gebruikt ondermarges, met binnenruimte voor ruimte binnen containers.

Een lettertypekeuze is een voorkeur met een terugvalplan. Op verschillende apparaten staan verschillende lettertypen en een gedownload lettertype kan later dan de tekst binnenkomen. Een lettertypelijst houdt de pagina leesbaar en zorgt tegelijk voor een passende stijl.

Maak een lettertypelijst

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
}

De browser probeert de familienamen op volgorde en gebruikt een beschikbaar lettertype. Zet namen met spaties tussen aanhalingstekens. Laat aanhalingstekens bij generieke families weg: "sans-serif" vraagt om een lettertype met precies die naam; sans-serif vraagt de browser om een geschikt generiek lettertype.

Generieke keuzes zijn onder andere serif, sans-serif, monospace, cursive, fantasy en system-ui. De laatste gebruikt het interfacelettertype van het systeem. Lettertypen die vaak webveilig worden genoemd, zoals Arial, Georgia en Verdana, komen veel voor, maar zijn niet gegarandeerd aanwezig. Een generieke terugvaloptie hoort nog steeds aan het einde.

font-size accepteert lengtes, percentages en sleutelwoorden voor grootte. Bij een hoofdelement van 16px geeft 1rem 16px en 2.5rem 40px. Relatieve groottes kunnen de instellingen van de lezer volgen.

Stel gewicht, stijl en de verkorte eigenschap zorgvuldig in

font-weight: normal is gelijk aan 400; bold is gelijk aan 700. Waarden zoals 300 en 600 vragen om andere gewichten als het lettertype die biedt. Als een gevraagd gewicht ontbreekt, kiest de browser een beschikbaar gewicht of maakt mogelijk zelf een vetgedrukte versie. Als alleen 400 en 700 zijn geladen, gebruikt een verzoek om 300 de versie voor 400. bolder en lighter zijn relatief ten opzichte van het ouderelement.

font-style: italic vraagt om een cursieve lettertypevariant; normal verwijdert die stijl. De verkorte eigenschap font heeft zowel de grootte als de familie nodig:

blockquote {
  font: italic 700 1.125rem/1.6 Georgia, serif;
}

Optionele stijl, variant en gewicht komen vóór de grootte. Een schuine streep koppelt de regelhoogte aan de grootte en de familie komt als laatste. Als de grootte of familie ontbreekt, is de verkorte eigenschap ongeldig. Andere weggelaten lettertype-instellingen worden teruggezet: font: 1rem Arial, sans-serif; zet een eerder vet gewicht terug op normaal.

Laad een lettertypebestand

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body { font-family: "Inter", Arial, sans-serif; }

@font-face wijst een CSS-familienaam toe aan een bestand. Gebruik die gedeclareerde naam in de lettertypelijst, niet de bestandsnaam. Relatieve bestandspaden beginnen vanaf de locatie van het stijlblad. WOFF2 is een gecomprimeerd formaat dat door huidige browsers wordt ondersteund.

Statische lettertypen hebben doorgaans afzonderlijke bestanden en regels nodig voor elk gewicht en elke stijl. Variabele lettertypen kunnen een reeks gewichten in één bestand bevatten. Laad de bestanden die het ontwerp daadwerkelijk gebruikt. font-display: swap toont direct een terugvallettertype en vervangt dat zodra het weblettertype beschikbaar is.

Een lettertypedienst kan een HTML-link en de familiedeclaratie leveren; door zelf te hosten voorkom je een lettertypeverzoek aan een server van derden. Controleer of de lettertypelicentie gebruik op websites toestaat. Als het lettertype er verkeerd uitziet, inspecteer dan het weergegeven lettertype en het bestandsverzoek. Bij een verkeerd gespelde CSS-familienaam wordt ongemerkt teruggevallen op een ander lettertype, dus leesbare tekst alleen bewijst niet dat het bedoelde lettertype is geladen.

Tekstvormgeving moet bruikbaar blijven als grootte, inhoud en invoermethode veranderen. Begin met regelafstand en leesbare breedtes en voeg daarna details voor lijsten en links toe die lezers laten zien hoe de inhoud werkt.

Laat de regelhoogte elke lettergrootte volgen

Gebruik een regelhoogte zonder eenheid, zoals line-height: 1.5. Bij lopende tekst van 16px maakt dit regels van 24px. Kindelementen erven het getal, dus een kop van 32px krijgt regels van 48px. Een waarde van 1.5em of 150% op het ouderelement wordt daarentegen berekend als 24px en een kindelement kan die vaste regelhoogte van 24px overerven, ook als de eigen tekst groter is. De standaardwaarde normal hangt af van het lettertype en ligt vaak rond 1,2.

body { font: 1.125rem/1.6 Georgia, serif; color: #222222; }
h1 { font: 700 2.25rem/1.2 Arial, sans-serif; }
p { max-width: 65ch; }

Bij een hoofdelement van 16px is de lopende tekst 18px met regels van 28,8px; de kop is 36px met regels van 43,2px. De begrenzing van de alinea voorkomt zeer lange regels op een breed scherm.

text-align plaatst inline-inhoud binnen een blok. Mogelijke waarden zijn left, right, center, justify, start en end; start en end volgen de schrijfrichting. De eigenschap verplaatst het blok zelf niet. Uitvullen in smalle kolommen kan grote ruimtes tussen woorden veroorzaken.

Verander de weergave zonder tekst te herschrijven

text-transform kan woorden in hoofdletters, kleine letters of met beginhoofdletters tonen zonder de HTML-tekst te veranderen. letter-spacing, word-spacing en text-indent regelen verschillende soorten tussenruimte. text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5); geeft horizontale verschuiving, verticale verschuiving, vervaging en kleur.

text-decoration voegt onderstrepingen, bovenstrepingen of doorhalingen toe. De eigenschap kan ook stijl en kleur instellen, zoals in underline wavy crimson. Met de dikte en de afstand van de onderstreping stel je een lijn nauwkeuriger af. Lezers verwachten dat onderstreepte tekst een link is, dus gebruik die aanwijzing daarvoor.

Geef lijsten vorm zonder onbedoelde inspringing

list-style-type kiest markeringen zoals disc, square, decimal of lower-alpha. list-style-position: outside houdt markeringen buiten het tekstblok; inside plaatst ze in de eerste regel, zodat omgebroken regels onder de markering kunnen beginnen. list-style-image levert een afbeelding als markering en li::marker kan alleen de markering kleuren.

Gebruik voor een eenvoudige navigatielijst .menu { list-style: none; margin: 0; padding: 0; }. Als je alleen markeringen verwijdert, blijft de standaardbinnenruimte aan het begin van de lijst bestaan. list-style: square inside is een verkorte eigenschap die instellingen voor markeringen combineert.

Houd links zichtbaar tijdens gebruik

Zet toestandregels met gelijke specificiteit in de volgorde link, bezocht, focus, aanwijzen, actief. Een link kan tegelijk bezocht zijn en aangewezen worden; de bronvolgorde beslist tussen hun concurrerende kleurdeclaraties. :active betekent tijdens de activering, niet de huidige pagina.

Houd links herkenbaar met meer dan alleen kleur, doorgaans met een onderstreping in lopende tekst. Geef toetsenbordfocus een duidelijke indicator:

a:focus-visible {
  outline: 3px solid #f2a900;
  outline-offset: 2px;
}

Verwijder de focusomtreklijn niet tenzij een andere zichtbare focusstijl die vervangt. Een omtreklijn neemt geen ruimte in het boxmodel in, dus deze aanwijzing verschuift de omringende tekst niet.

Een achtergrond staat achter de inhoud van een box. De kleur vult de inhoud en binnenruimte en loopt door onder de rand; de marge blijft transparant. Een afbeelding wordt boven de achtergrondkleur getekend, zodat een kleur een betrouwbaar oppervlak kan bieden terwijl de afbeelding laadt.

Bepaal het pad vanaf het stijlblad

.hero {
  background-color: #1a2b3c;
  background-image: url("../images/hero.jpg");
}

Als de CSS in css/styles.css staat en de afbeelding in de map images op het hoogste niveau van de website, gaat .. uit css voordat images wordt binnengegaan. Een CSS-afbeeldings-URL begint bij het CSS-bestand, anders dan de link naar het stijlblad, die bij het HTML-bestand begint. Controleer het afbeeldingsverzoek als een geldige regel alleen de terugvalkleur toont.

Achtergronden zijn decoratie. Een schermlezer kondigt ze niet als afbeeldingen aan. Zet een informatieve afbeelding in HTML met betekenisvolle alternatieve tekst. Een terugvalkleur die dicht bij de hoofdtint van de afbeelding ligt, helpt ook om tekst leesbaar te houden als de afbeelding langzaam laadt of ontbreekt.

Regel herhaling, schaal en positie

Afbeeldingen worden aanvankelijk op hun natuurlijke grootte herhaald. no-repeat gebruikt één exemplaar; repeat-x maakt een rij en repeat-y een kolom. space verdeelt hele tegels met tussenruimtes, terwijl round tegels aanpast zodat een heel aantal past.

Voor een box van 800px bij 400px en een vierkante afbeelding van 1000px schaalt cover de afbeelding naar 800px in het vierkant, waardoor 400px van de afbeeldingshoogte buiten de box valt. Contain schaalt de afbeelding naar 400px in het vierkant; met no-repeat blijft 400px van de boxbreedte onbedekt. Alleen contain instellen schakelt herhaling niet uit.

De beginpositie is linksboven. background-position: center centreert een afbeelding; right 20px bottom 10px plaatst die op afstand van die randen. Een horizontale waarde komt eerst. Center plus cover houdt het midden zichtbaar als afsnijden nodig is.

Genereer en stapel afbeeldingen

Een kleurverloop is een afbeelding, dus zet het in background-image:

background-image: linear-gradient(to right, #1e90ff, #8a2be2);

De eerste kleur staat links en de tweede rechts. Hoeken en overgangspunten met een positie geven meer controle; radial-gradient(circle, white, steelblue) verspreidt zich vanuit het midden naar buiten. Een kleurverloop in background-color is ongeldig.

Scheid meerdere afbeeldingen met komma's; de eerste ligt bovenop. Een halfdoorzichtig zwart kleurverloop vóór een foto kan de afbeelding donkerder maken zonder de tekst te vervagen.

Gebruik de verkorte eigenschap bewust

background: url("hero.jpg") center / cover no-repeat #1a2b3c; combineert een afbeelding, positie, grootte, herhaling en kleur. De grootte volgt na de positie, na een schuine streep. Alleen de laatste laag kan een kleur hebben. Weggelaten achtergrondinstellingen worden teruggezet, dus een latere background: white; verwijdert een eerdere afbeelding.

background-attachment gebruikt aanvankelijk scroll, waarbij de achtergrond met het element meebeweegt als de pagina scrollt. fixed houdt de achtergrond vast aan de viewport. Test de daadwerkelijke box en tekst nadat je decoratie hebt toegevoegd; schalen en afsnijden mogen informatie die lezers nodig hebben niet verbergen.

Een rand maakt deel uit van het boxmodel. Een omtreklijn of schaduw wordt rond de box getekend zonder extra ruimte te reserveren. Je keuze beïnvloedt zowel het uiterlijk als de afmetingen die een stijl oplevert.

Geef een rand een stijl

.note {
  border: 1px solid #cccccc;
  border-left: 4px solid crimson;
  padding-left: 12px;
}

De verkorte eigenschap stelt breedte, stijl en kleur in; deze onderdelen mogen in elke volgorde staan. De randstijl is aanvankelijk none, dus als je alleen breedte en kleur instelt, ontstaat geen zichtbare rand. Stijlen zijn onder andere solid, dashed, dotted, double, groove, ridge, inset en outset, evenals none en hidden.

Als de breedte wordt weggelaten, gebruikt de rand medium, meestal 3px in huidige browsers. Als de kleur wordt weggelaten, gebruikt de rand currentColor en krijgt die dezelfde kleur als de tekst van het element. Met verkorte eigenschappen voor afzonderlijke kanten zoals border-top en afzonderlijke eigenschappen zoals border-left-color kun je na een algemene rand een uitzondering toevoegen. Zo verwijdert border-top: none alleen de bovenrand na een randdeclaratie voor vier kanten.

Volgens het content-boxmodel voegt een rand van 2px aan elke kant 4px toe aan de breedte en hoogte. Als je de rand bij aanwijzen dikker maakt, kan daardoor inhoud in de buurt verschuiven. Houd de randbreedte gelijk en verander de kleur, of gebruik een omtreklijn als aanwijzing die geen ruimte inneemt. Volgens het border-boxmodel gebruikt een dikkere rand daarentegen meer van de binnenkant van de opgegeven box.

Rond hoeken af in een voorspelbare volgorde

border-radius: 8px rondt alle hoeken af, ook als de rand zelf onzichtbaar is. Bij vier waarden is de volgorde linksboven, rechtsboven, rechtsonder, linksonder. Twee waarden gelden voor tegenoverliggende hoekparen: de eerste voor linksboven en rechtsonder, de tweede voor rechtsboven en linksonder.

border-radius: 50% maakt een vierkante box rond en een rechthoekige box ellipsvormig. De eigen achtergrond wordt langs die afgeronde rand afgesneden. De hoekafronding snijdt overlopende inhoud van kindelementen niet zelf af; dat is een afzonderlijke keuze voor overflow. De hoekafronding verandert de gemeten afmetingen van de box niet.

Voeg een focuslijn of diepte toe

.link:focus-visible {
  outline: 3px solid navy;
  outline-offset: 2px;
}

Een omtreklijn wordt buiten de rand getekend en neemt geen ruimte in de lay-out in. De afstand creëert een ruimte tussen de rand en de omtreklijn. De lijn is een nuttige focusaanwijzing omdat die kan verschijnen zonder aangrenzende boxen te verplaatsen.

box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); geeft een horizontale verschuiving van nul, een verschuiving van 2px omlaag, een vervaging van 6px en een halfdoorzichtige zwarte kleur. Een optionele spreidingswaarde komt na de vervaging. inset tekent de schaduw binnen de box; met komma's gescheiden waarden voegen meerdere schaduwen toe. Schaduwen volgen afgeronde hoeken en voegen geen ruimte toe aan het boxmodel.

Controleer een afgewerkte kaart

Een kaart met width: 280px; padding: 16px; border: 1px solid #dddddd; is volgens het content-boxmodel 314px breed. Tel twee keer 16px en twee keer 1px op bij 280px. Volgens het border-boxmodel blijft de kaart 280px breed en blijft 246px over voor de inhoud. Een hoekafronding van 12px en een zachte schaduw veranderen geen van beide berekeningen. Ze veranderen de getekende rand, niet de afmetingen die worden gebruikt om andere boxen te plaatsen.