Wat is CSS en hoe bepaalt het de opmaak?
Auteur: Redactie Domeny.ForSale Gepubliceerd
Kort samengevat: CSS is een taal voor stijlbladen die het uiterlijk en de indeling van websites bepaalt: kleuren, lettertypen, afstanden en de plaatsing van elementen. De taal werkt samen met HTML, dat de structuur en betekenis van de inhoud beschrijft. Dankzij CSS kan dezelfde pagina zowel op een telefoon als op een groot beeldscherm een goed leesbare indeling hebben.
Wat doet CSS en hoe verschilt het van HTML?
De afkorting CSS staat voor Cascading Style Sheets, oftewel trapsgewijs toegepaste stijlbladen. Het is een declaratieve taal: je beschrijft welk resultaat je voor een element wilt bereiken, en de browser zorgt voor de weergave. Je hoeft niet stap voor stap uit te leggen hoe de browser een knop moet tekenen of een alinea moet plaatsen.
Een contactformulier laat goed zien hoe de taken op een pagina verdeeld zijn:
- HTML legt vast dat het formulier labels, invoervelden en een verzendknop bevat.
- CSS bepaalt de breedte van de velden, het uiterlijk van de knop, de afstanden en de indeling van het formulier op verschillende schermen.
- JavaScript kan extra gedrag verzorgen, zoals het verzenden van gegevens zonder de pagina opnieuw te laden.
CSS vervangt geen correct geschreven HTML. Als je een gewoon stuk tekst eruit laat zien als een kop, herkennen ondersteunende hulpmiddelen het daardoor nog niet als een kop. Het uiterlijk en de betekenis van een element zijn twee afzonderlijke zaken.
Met stijlbladen kun je ook de presentatie scheiden van de inhoud. Eén gedeeld bestand met CSS kan het uiterlijk van knoppen op meerdere pagina’s veranderen, zonder dat je elke knop afzonderlijk hoeft te bewerken.
Hoe ziet een regel in CSS eruit?
Een regel in CSS bestaat uit een selector, die de elementen aanwijst, en declaraties, die hun uiterlijk bepalen. Elke declaratie bevat een eigenschap en de bijbehorende waarde.
p {
color: #222222;
font-size: 18px;
line-height: 1.6;
}
De selector p selecteert alle alinea’s. De eigenschap color bepaalt de tekstkleur, font-size de lettergrootte en line-height de regelhoogte. In dit voorbeeld is de regelhoogte 1,6 keer de lettergrootte, waardoor de tekst verticaal meer ruimte krijgt.
Je wilt echter niet altijd alle elementen van een bepaald type aanpassen. Een klasse is een naam die je in HTML aan een element toekent, zodat je het in CSS kunt selecteren. Een klasseselector begint met een punt:
.markering {
background-color: #fff4cc;
padding: 16px;
border-radius: 8px;
}
Deze regel geeft elementen met de klasse markering een lichte achtergrond, binnenruimte en afgeronde hoeken. Alleen de naam in het stijlblad zetten is niet genoeg: het betreffende element moet die klasse ook toegewezen krijgen in HTML.
Wat betekent de cascade en waarom wordt een stijl soms overschreven?
Meerdere regels kunnen op hetzelfde element van toepassing zijn. De cascade is het mechanisme dat bepaalt welke declaratie wordt toegepast als verschillende regels dezelfde eigenschap instellen.
Daarbij geldt niet simpelweg dat de laatste regel altijd wint. De browser houdt onder meer rekening met de herkomst en het belang van declaraties, cascadelagen en de specificiteit, oftewel het gewicht van de selector. Als alle andere factoren gelijk zijn, geeft de volgorde van de regels de doorslag.
p {
color: navy;
}
.opmerking {
color: darkred;
}
Een alinea met de klasse opmerking wordt donkerrood. In dit voorbeeld heeft de klasseselector een hogere specificiteit dan de selector die het elementtype aanwijst.
Een afzonderlijk mechanisme is overerving: sommige eigenschappen, zoals de tekstkleur, kunnen van een bovenliggend element worden doorgegeven aan de inhoud ervan. Dat geldt niet voor alle instellingen: randen en marges worden standaard niet overgeërfd. Werkt een stijl niet, controleer dan eerst of de selector overeenkomt met het element en welke andere declaraties ermee concurreren. Voeg niet meteen !important toe: dat verandert de prioriteit van de declaratie en kan latere aanpassingen lastiger maken.
Hoe past CSS een pagina aan het scherm aan?
Een responsieve indeling past zich aan de beschikbare ruimte aan. CSS maakt dit mogelijk met flexibele breedtes, mechanismen voor het plaatsen van elementen en media queries: voorwaarden die bepaalde stijlen activeren, bijvoorbeeld bij een specifieke breedte van het weergavegebied van de pagina.
Voor het maken van indelingen kun je onder meer Flexbox gebruiken, dat handig is om elementen in één richting te plaatsen, en Grid, dat bedoeld is voor indelingen met rijen en kolommen. Een productlijst kan bijvoorbeeld drie kolommen hebben op een breed scherm en één op een smal scherm.
Bij het instellen van afmetingen is het belangrijk om het boxmodel te begrijpen: een element heeft een inhoudsgebied, binnenruimte (padding), een rand (border) en een buitenmarge (margin). Standaard geldt de ingestelde breedte alleen voor de inhoud. Met de instelling box-sizing: border-box omvat die breedte ook de binnenruimte en de rand, waardoor je de afmetingen van het element gemakkelijker kunt beheersen.
Hoe begin je met CSS?
Meestal schrijf je de regels in een apart bestand met de extensie .css, waarnaar het document in HTML vanuit zijn head-sectie verwijst. Je kunt stijlen ook rechtstreeks in het document opnemen, maar een gedeeld stijlblad maakt een grotere website doorgaans gemakkelijker te onderhouden.
Voor je eerste oefening hoef je geen extra hulpmiddelen te installeren:
- Open een pagina in de browser en kies in het contextmenu de optie om een element te inspecteren.
- Selecteer een alinea en wijzig in het stijlenpaneel de eigenschap
coloroffont-size. - Bekijk welke declaraties zijn doorgestreept: meestal zijn die door andere regels overschreven.
- Maak het venster smaller en controleer of de tekst leesbaar blijft en of je niet onnodig horizontaal moet scrollen.
Wijzigingen in de ontwikkelaarstools zijn meestal tijdelijk en verdwijnen wanneer je de pagina vernieuwt. Als het resultaat goed is, neem je de regel over in het bestand van je project. Pas om te beginnen één element aan en controleer het resultaat ook met vergrote tekst. Zo begrijp je de onderlinge samenhang sneller dan wanneer je een groot, kant-en-klaar stijlblad plakt.
Zie ook: Wat betekent www?
Lees ook
