CSS

Cascading Style Sheets (CSS) is een code taal ter ondersteuning van HTML. Met CSS maak je de HTML elementen van een webpagina op. Basiskennis over CSS maakt het eenvoudiger om de opmaak aan te passen. Maak je gebruik van een WordPress template? Ook dan heb je ongetwijfeld wel eens een stukje CSS code toegevoegd wat de ene keer beter ging dan de andere keer. Met onze CSS handleiding leer je de basisbeginselen, zodat je zelf aan de slag kunt gaan met het leren van CSS. Wil je zelf websites of applicaties bouwen dan heb je meer kennis van CSS nodig. Ook onze specialisten kunnen je hiermee helpen.

WordPress in een paar klikken online!

Wat is CSS?

De codetaal CSS wordt gebruikt in combinatie met de HTML. Aan het begin van de digitale tijdperk werd HTML zowel voor de structuur als de opmaak van de elementen gebruikt. Op een gegeven moment leverde de lange en overzichtelijke HTML-bestanden beperkingen op, wat de geboorte van codetaal CSS betekende. 

Met CSS kun je elementen opmaken. Dit betekent dat je de grootte, de kleur en het lettertype van de content hiermee kunt aanpassen. De achtergrondkleur, de breedte van de kantlijnen, horizontale en verticale positie, de zichtbaarheid en de transparantie gebeurd ook met CSS.

Hoe pas je CSS toe?

Kennis van HTML is een vereiste wanneer je begint met CSS. Daarom raden we jou aan om eerst onze HTML handleiding door te lezen. Hieronder leggen we uit hoe CSS werkt.

CSS editor

De meeste open software programma’s zoals WordPress hebben een CSS editor. Het is in dit geval belangrijk dat je een verwijzing maakt welk element je wilt opmaken. Dit kun je doen door een klasse (class in Engels) toe te voegen. Bouw je zelf een website? Dan maak je net als bij HTML gebruik van Kladblok. Vergeet niet om het bestand op te slaan met een .css extensie in plaats van een .html extensie.

Naast Kladblok kun je ook gebruik maken van geavanceerde editors, zoals Codepad, Notepad++, editor PSPad, Stylizer, Xyle Scope, Rapid CSS editor en Simple CSS.

CSS aan HTML koppelen

Er zijn drie verschillende manieren om CSS codetaal aan een HTML-bestand te koppelen, namelijk inline stijlen, een stijlblok en een extern stijlblad. 

 

  • CSS inline stijlen

 

Bij inline stijlen voeg je tags in een HTML-bestand door gebruik te maken van opmaak attributen. Dit kan er als volgt uit zien:

<p style=”color: red”>text</p>

Je gebruikt CSS inline stijlen wanneer je een enkel element binnen één HTML-bestand wilt opmaken. Het gevaar is dat het stukje code op een later tijdstip lastig terug te vinden is.

 

  • CSS stijlblok

 

CSS stijlblok gebruik je wanneer je meerdere elementen binnen één HTML-bestand dezelfde opmaak wilt geven. In dit geval voeg je het stukje CSS toe aan de head van het document (bovenaan het document). Dit kan er als volgt uit zien:

<!DOCTYPE html>
 <html>
<head>
<title>CSS Example</title> 

<style> p { color: red; } a { color: blue; } </style>

 

  • Extern stijlblad

 

Dit is een aparte CSS stijlblad, dat de stijl bepaalt voor de hele website of meerdere webpagina’s. Het bestand dient opgeslagen te worden als style.css. Het is noodzakelijk om een verwijzing te maken in elk HTML-bestand. Hieronder vind je een voorbeeld van een dergelijke verwijzing:

<!DOCTYPE html>
<html> <head> <title>CSS Example</title> <link rel=”stylesheet” href=”style.css”>

Van start gaan met CSS

Nu is het tijd om de basis van CSS te leren. Hieronder behandelen we verschillende aspecten die belangrijk zijn.

Elementen opmaken

Bij CSS werken we met twee principes namelijk eigenschap en waarde. Stel je wilt de kleur van een element aanpassen. Dan gebruik je de eigenschap om aan te geven wat er veranderd moet worden (= de kleur) en met de waarde geef je aan welke kleur dit moet zijn. De code zou er dan als volgt uit zien color:red;

Eigenschap Waarde
color: red; 

De eigenschap sluit je af met een dubbele punt en de waarde met een puntkomma. Een extra eigenschap + waarde toevoegen doe je als volgt:

color: yellow; background-color: red;

Bij inline stijlen is het belangrijk dat je aangeeft om welk element het gaat.

<P STYLE=”color: red;”>Deze tekst wordt weergeven in de kleur rood.</P>

Een stijlregel toevoegen

Wil je meerdere elementen in één HTML-bestand opmaken? Of werk je vanuit een externe CSS stylesheet? Dan is het belangrijk dat je aangeeft voor welke elementen de CSS bedoeld is. Een stijlregel bestaat uit een selector en één of meerdere stijldeclaraties.

De selector geeft aan welke elementen bewerkt moeten worden en met stijl declaraties geef je aan hoe de opmaak eruit komt te zien. Je kunt de selectors op de volgende wijzen toevoegen:

    1. Element selectors
      Vb. H3 { font-family: sans-serif; font-size: 13px; }
      H3 = element
    2. Attribuut-selectors
      Vb. IMG { border: none; }
      IMG = attribuut

 

  • CLASS selectors

 

Vb. .speciaal { color: #FF0000; background-color: #FFFFFF; }
Class = speciaal

  1. ID-selectors
    Vb. #ab03x { color: #FF0000; background-color: #FFFFFF; }
    ID = #ab03x

Het mechanische ‘Cascading’

De oplettende lezer is vast en zeker opgevallen dat inline stijlen, een stijlblok toevoegen en een extern stijlblad kan leiden tot conflicten door verschillende stijlen toe te voegen. De oplossing hiervoor wordt het cascading mechanisme genoemd.

Het werkt als volgt. Hoe specifieker de selector, hoe hoger de prioriteit. Stel je geeft in een extern stijlblad style.css aan dat alle H1 headers in de kleur rood weergeven moet worden, terwijl de element selector de kleur groen aan houdt. In dit geval wordt de titel op deze specifieke pagina (of element) in groen weergeven. De volgorde is als volgt:

  1. Extern stijlblad style.css
  2. Stijlblok
  3. Inline stijl
  4. Element-selectors