Het aanpassen van je WordPress website met CSS en een zogenaamde class of span geeft je veel meer mogelijkheden voor de vormgeving en ontwerp van je website. Lees de handleiding.

Wat is een CLASS of SPAN in CSS?

Een class of span is een HTML ontwerpstijl van tekst voor je website. Classes en Spans houden je website veel overzichtelijker en maken het onderhoud van je website veel eenvoudiger. Ik werk zelf altijd met classes en spans en maak nooit tekst op in een pagina. Ik raad mijn cursisten en opdrachtgevers ook aan om altijd van classes en spans gebruik te maken, helemaal voor grotere websites. Hoe groter de website, hoe belangrijker het wordt. Het is even wennen en niet voor beginners. Vandaar deze uitgebreide handleiding.

Wat is CSS?

Met CSS kun je de vormgeving en ontwerp van meerdere webpagina bepalen en kun je effecten bereiken die met HTML tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle ‘h2 kopteksten’ 24 pixels groot moet zijn in de kleur blauw en met het lettertype ‘Open Sans’. Het is dus veel flexibeler dan HTML wat de vormgeving betreft. Lees meer over CSS en de mogelijkheden:

Waarom CLASS of SPAN gebruiken?

Lees hieronder waarom het altijd goed is classes en spans te maken:

CLASS en SPAN zijn belangrijk voor onderhoud

Classes en Spans stellen je in staat om alle stijlelementen van een website in een document onder te brengen. Je hoeft maar een document hoeft te veranderen om alle pagina’s van je site aan te passen. Dit gebeurd in het CSS bestand van je WordPress thema. Wil je bijvoorbeeld de kleur van de naam van al je medewerkers op je site veranderen of het lettertype dat je in je paragrafen gebruikt? Dan verander je het CSS document en alle pagina’s nemen deze stijl dan over. Met HTML zou je al deze wijzigingen in alle pagina’s moeten aanbrengen, wat heel veel werk met zich meebrengt.

CLASS en SPAN zijn beter voor SEO (Zoekmachine-optimalisatie)

De pagina’s van je WordPress website worden kleiner doordat je minder code gebruikt. Je WordPress website zal sneller laden waardoor je weer hoger in Google komt.

CLASS en SPAN werken altijd in elke browser

CSS code is browser-vriendelijk. Het wordt ondersteund door alle browsers: Chrome, Firefox, Safari en Internet Explorer 3 en hoger. Lagere browsers negeren CSS waardoor het daar niet voor problemen zorgt. Lees meer hierover op:
www.w3schools.com/tags/tag_span.asp

Zelf CLASS in CSS maken

Voorbeelden typografie stijlen met css met classes

De typografie van bepaalde onderwerpen kun je goed naar je hand zetten en er iets subtiels van te maken. Wil je bijvoorbeeld een inleiding aan het begin van een artikel plaatsen dan kun je de tekst in een ‘class’ zetten. Bijvoorbeeld:

Voorbeelden CLASS

Dit is het tekstje met de class (opmaakstijl) die ‘inleiding’ heet.

Dit is het tekstje met zonder class. Gewone standaard opmaak dus.

Dit is het tekstje met de class (opmaakstijl) die ‘klein’ heet.

Dit is het tekstje met de class (opmaakstijl) die ‘mini’ heet.

Dit is het tekstje met de class (opmaakstijl) die ‘colofon’ heet.

Hier onder lees je hoe je het bovenstaande met behulp van een class kan maken:

Handleiding CLASS stijlen maken met CSS

Stap 1: Je zet de tekst op je pagina of bericht in WordPress dan tussen de onderstaande code:

Dit is het tekstje voor je inleiding

Stap 2: plaats de onderstaande tekst in je custom css van je WordPress thema:

p.inleiding { font-size: 160%; line-height: 140%; color: #777777; }

Zo kun je diverse stijlen aanmaken. Bijvoorbeeld voor kleine en mini-tekstjes:

p.klein {font-size: 85%; } 
p.mini { font-size: 70%; } 
p.colofon { font-size: 60%; }

Zelf een SPAN in CSS maken in HTML

Wat is het verschil tussen een class en een span?

Met ‘Span’ element kan een klein deel van een HTML-document worden ingesloten. Het element ‘Span’ is een inline-element en breekt de tekst niet op in paragrafen. Je kan dit gebruiken door accenten in je tekst aan te geven. In het onderstaande voorbeeld zie je hoe je bijvoorbeeld een woordje rood kan maken.

Voorbeeld SPAN

Dit is het tekstje met de class (opmaakstijl) die ‘inleiding’ heet.

Dit is het tekstje met de class (opmaakstijl) die ‘klein’ heet.

Dit is het tekstje met de class (opmaakstijl) die ‘mini’ heet.

Handleiding SPAN stijlen maken met CSS

Zet de onderstaande CSS-code voor een span in je Custom CSS van je thema of in je child theme:

span.rood { color: #ff0000; }

Plaats de onderstaande code op je webpagina:

<span class="rood">Deze tekst wordt rood</span>

Het bovenstaande voorbeeld is dus zo gemaakt:

Dit is het tekstje met de class (opmaakstijl) die ‘klein’ heet.

Buttons maken met css met classes

Een gewone link ziet er in html zo uit:
<a href="https://www.cursuswp.com">Dit is een link</a>

Door een class-code toe te voegen creeer je eenvoudig een button. Dit doe je zo:

Stap 1: Je zet de tekst dan tussen de onderstaande code:

<a class="bestelbutton" href="https://www.cursuswp.com">Bestel product</a>

Dit is eigenlijk een gewone html link alleen is de class toegevoegd in het begin van de html.

Stap 2: plaats de onderstaande tekst in je custom css van je WordPress thema:

.bestelbutton { 
display: inline-block; 
background-color: #a1bf0b; /* AW buttonkleur */ 
border: none; color: white; padding: 12px 24px; 
text-align: center; 
text-decoration: none; 
font-size: 100%; 
margin: 14px 2px 124px 2px !important; 
-webkit-transition-duration: 0.4s; /* Safari */ 
transition-duration: 0.4s; cursor: pointer; border-radius: 34px; 
}

Het resultaat is deze button:

CSS van WordPress Gutenberg blokken aanpassen

Wil je CSS van Gutenberg blokken aanpassen dan kan dat op verschillende manieren. Lees hier de uitgebreide handleiding:
CSS van Gutenberg blokken aanpassen

Meer handleidingen over blokken, CSS en Gutenberg

• Kolom maken in WordPress handleiding Gutenberg blokken
• Horizontale lijn maken regelscheidingsteken WordPress
• Herbruikbare blokken maken Gutenberg Reusable blocks
• Zelf blokken maken Gutenberg WordPress-editor plugin

Links over CSS en span

how-to-make-an-inline-element-appear-on-new-line-or-block-element-not-occupy-th

Meer weten over css, class, span en opmaakstijlen voor WordPress webdesign

Meer weten of hulp nodig bij typografie stijlen, css, class, span en opmaakstijlen voor WordPress webdesign? Volg dan de onderstaande WordPress cursus:

• Online WordPress cursus volgen op afstand vanuit huis
• WordPress Pop-up Bootcamp spoedcursus op maat
• WordPress Bootcamp all-in one spoedcursus
• Designcursus WordPress voor ontwerpers en vormgevers
• Cursus WordPress op maat beginners & gevorderden