CSS Klassen: Selectoren, styling, tips, trucs en meer

Waarom zijn CSS Classes zo belangrijk?

• Herbruikbaarheid: Schrijf je stijlen één keer en pas ze toe waar en wanneer je ze nodig hebt.
  Dit bespaart een hoop tijd en moeite.
• Onderhoudbaarheid: Moet je het uiterlijk van al je knoppen veranderen?
  Werk gewoon de stijlen bij die aan je “knop”-klasse zijn gekoppeld en de wijzigingen worden meteen doorgevoerd op je hele site.
• Organisatie: Klassen helpen je om je CSS code schoon en gestructureerd te houden, waardoor het veel gemakkelijker te begrijpen en te beheren is als je website groeit.

De Elementor-verbinding

Elementor, een toonaangevende WordPress websitebouwer, maakt optimaal gebruik van CSS-klassen.
Het biedt een intuïtieve interface voor het maken en toepassen van classes, waardoor het proces van het stylen van je website wordt gestroomlijnd.
Met de visuele bouwer van Elementor kun je je wijzigingen in realtime bekijken, waardoor het aanpassen van het ontwerp zowel efficiënt als plezierig is.
Laten we beginnen!

Of je nu een doorgewinterde webontwikkelaar bent of net begint met webdesign, het begrijpen van CSS classes is een spelbreker.
In deze uitgebreide gids duiken we diep in de wereld van classes en verkennen we alles van de basis tot geavanceerde technieken, allemaal bedoeld om je te helpen verbluffende websites te maken.

Grondbeginselen van CSS-klassen

Wat is een CSS Class?

Laten we de basis eens uit de doeken doen.
Een CSS class is een identifier waarmee je specifieke stijlregels kunt koppelen aan een groep HTML elementen.
Dit is de basisstructuur:

1. Naam van de klas: Je maakt een klassenaam aan die typerend is voor de stijlen die het zal bevatten (bijvoorbeeld “markeer-tekst” of “hoofd-knop”).
   Klassenamen beginnen altijd met een punt (.).
2. CSS declaratieblok: Binnen accolades {} definieer je alle styling-eigenschappen en hun waarden die je wilt toepassen op elementen met die klasse.
3. Toepassen op HTML: Je voegt het class attribuut toe aan je HTML elementen en kent het de naam van je class toe.

CSS-klassen maken

Hoewel Elementor een fantastische visuele interface biedt om elementen te stylen en vaak automatisch classes voor je genereert, is het handig om de basisprincipes te begrijpen van hoe CSS classes worden geschreven.
Dit is het proces:

1. Je CSS-stylesheet: CSS klassen worden gedefinieerd in een apart bestand dat een stylesheet heet, meestal met een “.css” extensie (bijvoorbeeld “style.css”).
   Je HTML-document linkt naar dit bestand om de stijlen op te halen.
2. Begin met een punt: Elke CSS class naam moet beginnen met een punt (.).
   Zo weet de browser dat het om een class gaat en niet om een gewoon HTML element.
3. Kies een beschrijvende naam: Kies een naam die duidelijk het doel weergeeft van de stijlen die je binnen die klasse gaat definiëren.
   Het gebruik van kleine letters is standaard en als je meerdere woorden nodig hebt, scheid ze dan met koppeltekens (bijvoorbeeld “foutmelding”, “producttitel”).
4. De gekrulde haakjes: Gebruik accolades {} om de styling eigenschappen en waarden die je aan de class wilt koppelen in te sluiten.
5. Binnen de haakjes: Vermeld elke naam van een CSS eigenschap gevolgd door een dubbele punt (:) en dan de waarde die je aan die eigenschap wilt toekennen.
   Scheid elk eigenschap-waarde paar met een puntkomma (;)

Best Practices voor Klassenamen:

• Betekenisvol: Maak je namen beschrijvend zodat ze gemakkelijk te begrijpen en te onthouden zijn.
• Vermijd te algemene namen: Namen als “groot” of “rood” zijn te vaag.
  Wees specifieker (bijvoorbeeld “intro-paragraaf” of “foutmelding”).
• Consistentie: Gebruik een consistente naamgevingsconventie (zoals koppeltekens of camelCase) in je hele project.

Klassen toepassen op HTML-elementen

Hier gebeurt de magie van CSS-klassen pas echt.
Om de stijlen die je in een class hebt gedefinieerd toe te passen op een specifiek element op je webpagina, gebruik je het class attribuut binnen je HTML tags.

1. Zoek je HTML-element: Zoek de HTML-tag die de inhoud vertegenwoordigt die je wilt stylen (bijvoorbeeld een alinea <p>een rubriek <h1>een afbeelding <img>enz.).
2. Voeg het class attribuut toe: Voeg het class attribuut toe aan de openingstag van het gekozen element.
3. Je klasnaam toewijzen: Stel de waarde van het class attribuut in op de naam van de CSS class die je hebt gemaakt.
   Wanneer je de klasse toepast op je HTML, zorg er dan voor dat je de punt (.) weglaat.

Belangrijke punten:

• Meerdere klassen: Een enkel HTML-element kan tot meerdere klassen behoren.
  Scheid gewoon de klassennamen met spaties binnen het klasse attribuut (bijvoorbeeld, <h2 class=”primary-heading subtitle”>).
• Orde is (soms) belangrijk: In de meeste gevallen heeft de volgorde van klassen binnen het class attribuut geen invloed op de styling.
  Als er echter conflicterende stijlen zijn, wordt de klasse die in de lijst laatste zal voorrang krijgen vanwege een concept dat “specificiteit” heet, waar we later dieper op in zullen gaan.

Voordelen van het gebruik van CSS-klassen

Waarom zijn CSS classes zo’n fundamenteel hulpmiddel voor webontwerp?
Hier zijn de belangrijkste voordelen:

• Herbruikbaarheid: De kracht van classes ligt in hun herbruikbaarheid.
  Definieer een set stijlen één keer binnen een class en pas ze vervolgens moeiteloos toe op een willekeurig aantal elementen op je hele website.
  Dit bespaart aanzienlijk veel tijd en houdt je code schoner.
• Onderhoudbaarheid: Stel je voor dat je de kleur van het lettertype voor alle knoppen op je website moet veranderen.
  Met classes hoef je alleen maar de stijlen binnen je “button” class bij te werken en de wijziging wordt automatisch doorgevoerd op elke knop op je site.
  Dit maakt updates en grootschalige wijzigingen ongelooflijk efficiënt.
• Organisatie: Klassen helpen om een logische structuur aan te brengen in je CSS code.
  Door gerelateerde stijlen te groeperen onder beschrijvende class namen, wordt je stylesheet veel gemakkelijker te lezen, navigeren en beheren als je website complexer wordt.
• Scheiding van zorgen: Een van de basisprincipes van goede webontwikkeling is het handhaven van een duidelijke scheiding tussen de inhoud van je website (HTML) en de presentatie (CSS).
  Klassen versterken deze scheiding, waardoor je code schoner wordt en je werkstroom overzichtelijker.

Voorbeeld:

Je wilt alle productomschrijvingen op je website stylen met een specifiek lettertype, grijze kleur en wat marge voor tussenruimte.
Met behulp van een CSS class kun je dat doen:

1. Maak een klasse: Definieer een class met de naam “productbeschrijving” met de gewenste stijlen.
2. Toepassen op elke productbeschrijving: Voeg de klasse “product-beschrijving” toe aan elke alinea (<p>) met een productbeschrijving op je site.

Nu hebben al je productomschrijvingen automatisch de consistente stijl die je hebt gedefinieerd en hoeven toekomstige wijzigingen maar op één plek te worden aangepast – in de klasse “.product-description”!

De kracht van specificiteit en overerving benutten

Specificiteit begrijpen

Stel je voor dat verschillende personal trainers je instructies geven over hoe je moet trainen, en dat ze allemaal een iets ander advies geven.
Hoe bepaal je naar wie je moet luisteren?
Specificiteit in CSS werkt als een rangordesysteem en helpt de browser om te beslissen welke stylingregels voorrang krijgen als er conflicten ontstaan.

Hier is een vereenvoudigde manier om na te denken over de rangschikking van CSS-specificiteit:

1. Inline stijlen (meest specifiek): Stijlen die direct binnen het style attribuut van een HTML element zijn gedefinieerd, overschrijven bijna al het andere. Het gebruik van inline stijlen wordt echter over het algemeen afgeraden, omdat het ingaat tegen de scheiding van HTML-structuur en CSS-stijlen.
2. ID’s: Een unieke ID selector (bijv. “#main-header”) heeft veel gewicht in specificiteit.
3. Klassen, attributen en pseudoklassen: Deze selectors wegen over het algemeen even zwaar.
   Ze combineren kan echter de specificiteit verhogen (bijvoorbeeld een klasseselector samen met een pseudoklasse die gericht is op een specifieke toestand zoals .highlight:hover).
4. Elementen en pseudo-elementen: Eenvoudige selectors gericht op HTML-elementen (zoals “p” of “div”) zijn het minst specifiek.

Erfenis

Zie overerving als het doorgeven van eigenschappen binnen een familie.
In CSS kunnen bepaalde stijlen hun waarden “erven” van hun bovenliggende elementen.
Dit betekent dat als je een stijl instelt op een ouder element, de kindelementen vaak automatisch diezelfde stijl zullen aannemen, tenzij dit specifiek wordt overschreven.

Welke eigenschappen erven?

Niet alle CSS eigenschappen zijn overerfbaar.
Enkele veelvoorkomende voorbeelden van eigenschappen die wel overerven:

• Tekst/Lettertype: Eigenschappen van het lettertype zoals lettertypefamilie, lettergrootte, kleur, enz.
• Afstanden: Soms kunnen eigenschappen zoals marges en opvulling worden geërfd, afhankelijk van de context.
• Lijststijlen: Eigenschappen met betrekking tot de presentatie van lijsten (bijv. lijst-stijl-type)

Welke eigenschappen erven niet?

Veel lay-out-gerelateerde eigenschappen erven over het algemeen NIET:

• Achtergronden en randen: Eigenschappen zoals achtergrondkleur, rand, enz.
• Afmetingen: Breedte, hoogte, positie

Erfenis regelen

Er zijn specifieke sleutelwoorden die je kunt gebruiken om zo nodig overervingsgedrag te forceren:

• Overerven: Dwingt een eigenschap om de waarde van het bovenliggende element over te nemen.
• initiaal: Zet een eigenschap terug naar de standaardwaarde van de browser.

De cascade begrijpen

De “cascade” in Cascading Style Sheets verwijst naar de manier waarop browsers de uiteindelijke stijl bepalen die van toepassing is op een specifiek element.
Hierbij worden de volgende zaken in volgorde bekeken:

1. Specificiteit: We hebben behandeld hoe specifieke selecteurs voorrang krijgen.
2. Bron Bestel: Als er even specifieke regels bestaan, wint degene die later in je stylesheet staat (of verder naar beneden in een HTML-document voor inline stijlen).
   3.
   Overerving: Als een specifieke stijl niet expliciet is ingesteld voor een element, speelt overerving een rol bij het bepalen van de uiteindelijke waarde.

Stylingtechnieken met CSS-klassen

Richten op specifieke elementen binnen klassen

De mogelijkheid om specifieke elementen aan te wijzen die genest zijn binnen een bredere klasse is waar flexibiliteit en controle elkaar ontmoeten in je CSS-styling.
Hier volgt een overzicht van de meest gebruikte technieken:

Descendant Selectors: De meest eenvoudige manier om een genest element te stylen.
Je combineert gewoon de class naam met de naam van de geneste tag die je wilt stylen.
Bijvoorbeeld, om alle links binnen elementen met de klasse “callout-box”:

Kind selectoren Voor meer precisie richten child selectors (aangegeven met een > symbool) zich alleen op de directe kinderen van een element.
Je kunt bijvoorbeeld alleen de lijstitems op het eerste niveau binnen je klasse “productlijst” wilt stylen.

Combinatoren: Je kunt nog granulairder worden met andere combinatoren:

• Aangrenzende broer of zus selector (+): Richt zich op een element dat direct volgt op een ander element.
• Algemene broer-zus selector (~): Deze selector richt zich op elementen die een ander element volgen zolang ze dezelfde parent hebben.

Praktisch voorbeeld

Stel je voor dat je een “sidebar” klasse hebt die wordt gebruikt voor verschillende inhoudelijke zijbalken op je website.
Je wilt misschien links in verschillende zijbalken van elkaar onderscheiden:

• .sidebar a – Stijlen alle links binnen een zijbalk
• .sidebar > p – Stijlt alleen paragrafen die direct genest zijn binnen zijbalken
• .navigation-sidebar a – Stijld links specifiek binnen zijbalken die ook de “navigation-sidebar” klasse hebben.

Stylingtechnieken met CSS-klassen

Pseudoklassen: Dynamische styling op basis van status

Met pseudoklassen kun je elementen niet alleen selecteren op hun naam, maar ook op hun huidige status, positie in het document of zelfs gebruikersinteracties.
Ze beginnen altijd met een dubbele punt (:) en zijn gekoppeld aan een gewone class of element selector.

Veelgebruikte pseudoklassen

• Zweefstand (hover) Activeert stijlen wanneer de gebruiker over een element beweegt.
  Perfect om links en knoppen te accentueren of extra informatie te tonen als je er overheen beweegt.

• Actieve staat (active) Past stijlen toe wanneer een element wordt aangeklikt of geactiveerd.
• Focusstatus (focus) Geeft vorm aan elementen die toetsenbordfocus hebben (handig voor toegankelijkheid en bruikbaarheid van formulieren).
• Positionele pseudoklassen Richt elementen op basis van hun positie binnen hun parent:
  • eersteklas
  • laatste-kind
  • n-de-kind(): Maakt selectie mogelijk op basis van complexere patronen (even, oneven of specifieke getallen)
• En nog veel meer! Er zijn er te veel om hier te behandelen, maar voorbeelden zijn:visited voor het stylen van bezochte links, : checked voor selectievakjes en :disabled voor formulierelementen die zijn uitgeschakeld.

Belangrijke opmerking: De volgorde van pseudoklassen is belangrijk, vaak volgens een patroon dat bekend staat als “LVFHA” (Link, Visited, Focus, Hover, Active) om ervoor te zorgen dat stijlen de verwachte volgorde volgen wanneer een link van status verandert.

Pseudo-elementen: Stijl en inhoud toevoegen buiten je HTML

Pseudo-elementen geven je de mogelijkheid om specifieke onderdelen van een element of zelfs gegenereerde inhoud invoegen die niet expliciet aanwezig is in je HTML-structuur.
Ze gedragen zich als virtuele kind-elementen die je kunt manipuleren met CSS.
Pseudo-elementen worden aangeduid met dubbele dubbele punten (::)

De populairste pseudo-elementen

• ::before: Hiermee kun je inhoud invoegen vóór de werkelijke inhoud van het geselecteerde element.
  Vaak gebruikt voor decoratieve effecten, pictogrammen of extra labels.
• ::na: Vergelijkbaar met ::before maar voegt inhoud in na de inhoud van het element.

• ::eerste-letter: Deze optie richt zich op de eerste letter van een blok tekst, zodat je speciale styling kunt toepassen voor drop caps of andere typografische effecten.
• ::eerste lijn: Hiermee kun je de eerste regel van een tekstblok opmaken.
  Het wordt vaak gebruikt om lettergrootte, kleur of gewicht te veranderen.

Belangrijke punten

• Inhoud eigenschap: Voor ::before en ::after is de content eigenschap essentieel om te definiëren wat er daadwerkelijk wordt ingevoegd.
  Het kan leeg zijn, tekst of zelfs speciale tekens met Unicode.
• Niet alle elementen supporten ze: Sommige elementen kunnen beperkingen hebben op welke pseudo-elementen ermee werken.

Veelgebruikte CSS-eigenschappen met klassen

CSS eigenschappen vormen het hart van je styling gereedschapskist.
Laten we eens een paar van de meest essentiële op een rijtje zetten die je keer op keer zult gebruiken:

Uiterlijk en tekst

• achtergrondkleur: Stelt de achtergrondkleur van een element in.
• kleur: Bepaalt de kleur van je tekst.
• lettertype-familie: Specificeert het te gebruiken lettertype (kies uit algemene families zoals schreefloos of schreefloos, of specificeer specifieke lettertypes).
• lettergrootte: Bepaalt de grootte van je tekst (met eenheden zoals pixels (px) of ems (em)).
• lettertype-gewicht: Bepaalt hoe vet of licht je tekst wordt weergegeven (normaal, vet, of numerieke waarden zoals 400, 700).
• tekst-uitlijnen: Lijnt tekst uit binnen een element (links, rechts, centreren, justeren).
• tekst-decoratie: Voegt onderstrepingen, overlappingen of doorhalingen toe aan tekst.

Afstand en indeling

• marge: Creëert ruimte rond de buitenkant van een element, waardoor andere elementen worden weggedrukt.
• opvulling Creëert ruimte binnen een element tussen de inhoud en de rand.
• breedte en hoogte: Vaste afmetingen voor elementen instellen.
  Merk op dat elementen vaak extra formaatgedrag hebben op basis van inhoud en het boxmodel, wat een heel ander onderwerp is!
• weergeven: Dit bepaalt het fundamentele gedrag van de lay-out:
  • blok: Element neemt beschikbare horizontale ruimte in.
  • inline: Element zit binnen een regel tekst.
  • inline-blok: Een hybride met zowel blok- als inline-aspecten.
  • (Er zijn ook veel opties specifiek voor lay-out, zoals flex (flexbox) en grid (CSS Grid), die we later zullen behandelen!)

Elementor integratie: De kracht van visuele styling

Elementor begrijpt dat, hoewel de concepten achter CSS classes ongelooflijk krachtig zijn, slechts sommigen codewizards zijn.
De kracht van Elementor ligt in het bieden van een intuïtieve, visuele manier om diezelfde kracht te benutten.
Dit is hoe het integreert met CSS classes:

• Automatische klassengeneratie: Vaak creëert Elementor automatisch logische CSS-klassen achter de schermen wanneer je elementen via de interface stijlt.
  Je kunt deze verder aanpassen voor de organisatie of om ze zelfstandig te targeten.
• Visuele controles: In plaats van handmatig CSS-regels te schrijven, biedt Elementor een groot aantal visuele besturingselementen.
  Wanneer je kleuren, lettertypen, spatiëring, etc. aanpast, vertaalt Elementor deze keuzes slim naar overeenkomstige CSS stijlen die gekoppeld zijn aan de juiste klassen.
• Tabblad Geavanceerd: Bij elk Elementor element vind je een tabblad “Geavanceerd”.
  Dit biedt opties om:
  • Je eigen CSS-klassen direct aan dat element toevoegen
  • Schrijf aangepaste CSS regels die gericht zijn op alle klassen die bij dat element horen.
    Dit geeft je volledige controle over geavanceerde aanpassingen!

Voordelen van deze aanpak

• Snelheid: Visueel stylen met Elementor is aanzienlijk sneller dan helemaal opnieuw CSS schrijven.
• Toegankelijkheid: Het opent de wereld van webdesign voor mensen die niet zo vertrouwd zijn met coderen.
• Organisatie: Het klassebeheer van Elementor helpt je CSS goed gestructureerd te houden.
• Leerhulpmiddel: Elementor kan een fantastische manier zijn om CSS klassen te leren kennen.
  Je kunt de stijlen die het genereert inspecteren en gaandeweg beginnen met het toevoegen van je eigen aangepaste CSS ernaast.

Geavanceerde concepten met CSS-klassen

Lay-out en structuur met CSS-klassen

In de wereld van webdesign is lay-out koning!
CSS klassen, gecombineerd met krachtige lay-outtechnieken, geven je de hulpmiddelen om de structuur van je webpagina’s vorm te geven.
Laten we ons richten op twee essentiële methoden:

1. Rastersystemen: CSS rasters bieden een flexibele manier om je pagina op te delen in rijen en kolommen.
   Door klassen toe te wijzen aan elementen, bepaal je welke rastergebieden ze bezetten, zodat je eenvoudig complexe lay-outs met meerdere kolommen kunt maken.
2. Flexbox: Flexbox blinkt uit in het uitlijnen en verdelen van items binnen een container.
   Het is perfect voor kleinschalige opmaakcomponenten zoals navigatiemenu’s, heldensecties of inhoudsblokken.
   Door CSS-klassen te gebruiken met Flexbox kun je de afstand en grootte van items binnen deze secties nauwkeurig afstellen.

Algemene gebruikssituaties met klassen:

• Koptekst: Maak klassen om het logo, de navigatielijst en andere header-elementen van je site te targeten en te stylen.
• Inhoudblokken: Ontwerpklassen voor op zichzelf staande inhoudsblokken (bijv. “feature-box”, “testimonial-kaart”, “prijstabel”), zodat je een consistente visuele stijl kunt hergebruiken op je hele site.
• Voetteksten: Deel net als de koptekst je voettekst op in logische onderdelen met klassen voor styling.

Pro Tip: Vaak bieden gevestigde CSS raamwerken (zoals Bootstrap) kant-en-klare raster- en componentklassen die helpen bij het opstarten van je lay-outs.
Dit kan ontwikkeltijd besparen, maar het kan ook betekenen dat je de specifieke naamgevingsconventies van dat framework moet leren.

Responsief ontwerp: Aanpassen aan verschillende schermen

In de huidige wereld van smartphones, tablets, laptops en grote desktopmonitoren is er meer nodig dan een ontwerp dat in alle maten past.
Responsive design zorgt ervoor dat je website zich netjes aanpast aan verschillende schermformaten, en CSS-klassen spelen een cruciale rol om dit mogelijk te maken.

Media Query’s: De sleutel tot reactiesnelheid

Met media queries kun je CSS regels schrijven die alleen van toepassing zijn als aan bepaalde voorwaarden wordt voldaan, voornamelijk schermgrootte.
Hier volgt een vereenvoudigd overzicht van hoe ze werken met classes:

1. Breekpunten: Bepaal de schermbreedten waarop je wilt dat je lay-out zich aanpast.
   Typische breekpunten zijn gebaseerd op veelvoorkomende apparaatformaten (tablets, smartphones, enz.).
2. Media query: Je schrijft een media query met een voorwaarde, zoals: