Een klein beetje kennis van CSS kan je website aanzienlijk verbeteren!

CSS (Cascading Style Sheets) is een taal die wordt gebruikt om de presentatie en opmaak van HTML-documenten te bepalen. Met CSS kun je onder andere de kleuren, lettertypen, marges, uitlijning en lay-out van een webpagina aanpassen. Elke moderne website heeft dus een CSS. En als jij als website eigenaar daar iets vanaf weet is dat reuze handig!

Waarom moet ik CSS leren. Mijn WordPress thema regelt de opmaak toch?

Dat klopt. En bij veel thema’s kun je heel veel aanpassen. Ook pagebuilders zoals de WP-Bakery Builder kennen veel opmaakmogelijkheden. Toch loop je vast wanneer je een bepaald effect niet kunt realiseren. Je kunt dan genoegen nemen met wat het thema en de builder je aan mogelijkheden bieden, maar je kunt ook custom CSS schrijven. En geloof me, dat is fun!

Waar kan ik custom CSS maken dan in WordPress?

Vele WordPress thema’s hebben een speciale plek voor eigemaakte CSS, Javascript en/of HTML. Kijk even waar dat zit bij jouw thema en vraag anders even aan de bouwer van je thema. Let wel: het schrijven van CSS hoef niet online in je thema te schrijven. Je kunt dat ook in een tekstverwerker doen. MS-Word is prima! Mocht je het toch handiger vinden in een editor te werken kijk dan eens op de CSS playground: https://playcode.io/css

Ok, let’s go!

Alhoewel je weinig om zeep kunt helpen met CSS raad ik je aan een backup te maken. You never know nietwaar? Verder ga ik er hiervan uit dat je een stevig thema en de WP Bakery page builder gebruikt. Doe je dat? Nou dan kun je los!

Hoe ziet een CSS er uit?

Een CSS van een website heet meestal style.css. Speur maar eens je de files van je thema. Je komt ‘m absoluut tegen. Je zal wel zien dat het CSS zeer uitgebreid kan zijn. Het uitgebreide CSS aanpassen kun je beter aan experts overlaten. Wij gaan alleen de dingen aanpassen die voor ons van toepassing zijn.

Een simpel CSS zou er zo uit kunnen zien:

O jee, wat is dit nou weer…

Dit is een stukje CSS. Je ziet een aantal zogenaamde klassen: body, h1 en p. Deze klassen hebben eigenschappen: bij body bijvoorbeeld zie je dat de achtergrondkleur (backgound-color) #f0f0f0 is en dat het lettertype (font-family) een schreefloze Arial (Arial, sans-serif) is. Ook de klasse h1 heeft een paar eigenschappen: de kleur is donkerblauw en de tekst is in het midden uitgelijnd. De klasse p laat zien dat alles wat onder deze klasse valt lettergrootte van 16 pixels heeft en een lijnhoogte van 1,5 EM.

In het kort komt het hierop neer: Wanneer je een webpagina, of een deel daarvan, vertelt dat de opmaak in een bepaalde klasse staat zal de pagina, of een deel daarvan, de opmaak die in die klasse staat oppikken.

Voorbeeldje dan

Iedereen weet dat de letters in een webpagina zijn opgedeeld in koppen (H1 tm H6) en paragrafen (p). Nu willen we de belangrijkste kop op een pagina aanpassen. De belangrijkste kop is <H1>.

Wanneer we dit in een klasse plaatsen krijgt deze klasse dan ook h1 mee:

h1 {
}

Tussen de accolades gaan we nu regels schrijven die gaan bepalen hoe we H1 willen stylen. Stel voor dat je de H1 een schaduw wilt geven. Dat kunnen we dan als volgt doen:

h1 {
text-shadow: 2px 2px #6c6c6c;
}

In deze klasse heb je ervoor gezorgd dat alle <h1> regels in je website een schaduw van 2 pixels hebben en dat de kleur #6C6C6C moet zijn. Voila, je hebt je eerste klasse voor je stylesheet geschreven! Dat betekent dat alle webteksten die de tag <H1> hebben een schaduw krijgen. En dat door de hele website heen. Pas je deze klasse aan dan zal dat dan ook in de hele website aangepast worden. Handig! Hieronder een voorbeeld van de <H1> in dit blog:

We kunnen de <H1> ook een andere kleur geven, bijvoorbeeld rood:

h1 {
text-shadow: 2px 2px #6c6c6c;
color: red;
}

Je krijgt dan uiteraard een rode kleur:

Elk element in een website kan worden aangepast

Bovenstaande was slechts een klein voorbeeldje, maar je begrijpt ongetwijfeld dat je met CSS ieder element kunt aanpassen: kleuren, schaduwen, lijnen, positie, verzin het. Zelfs animaties zijn mogelijk. Het is echter aan jou of je voor ieder CSS effect een aparte klasse gaat maken of dat je dit aanpast in de mogelijkheden die je thema en je builder. Soms is het gemakkelijker om het even bij de “Theme Options” te doen. Het ligt aan je thema uiteraard. Wanneer je het in je thema of builder doet wordt het CSS (style.css) door de builder of het thema aangepast. Een stylesheet in een thema kan zeer groot zijn.

Omdat de stylesheets van thema’s vaak zeer groot zijn bieden veel thema’s de mogelijkheid om zelf geschreven CSS in te voegen. Check je thema waar je dat kunt doen. Er zit wel een dikke adder on het gras: wanneer de stylesheet aanpast loop je een grote kans dat deze overschreven wordt wanneer er een update komt van je thema. Daarom is het slim een zg child-theme aan te maken. Daarmee ondervang je dit. Hoe je een child theme maakt kun je hier lezen.

HTML en CSS

Wanneer je een HTML ninja bent en zelf je website bouwt zonder CMS dan moet je de website wel vertellen waar het CSS staat. Dat kun je ook doen met delen van de pagina. Je kan zelfs verschillende stylesheets maken. De standaard file is uiteraard style.css, maar je kunt ook een tweede of derde aanmaken met de namen style2.css en style3.css. Normaal gesproken is het zo dat je in iedere pagina in de header <header></header> een regel moet toevoegen die verwijst naar de stylesheet zoals bijvoorbeeld: <link rel=”stylesheet” href=”style/style.css”>.

Tekstregels

Wanneer je een bepaald element eigenschappen gaat toekennen zijn er uiteraard strikte regels die tot op de puntjes goed moeten worden ingevoerd. Wil je bijvoorbeeld dat een paragraaf een bepaalde kleur moet krijgen doe je dat zo:

h1 {
color: #6c6c6c;
}

Het zal dus alleen werken wanneer je de tekst ‘color’ gebruikt! Zo zijn er uiteraard heel veel standaard tekst waarden:

Lettertype		font-family
Lettergrootte		font-size
Ruimte rondom		margin
Tekstkleur		text-color
Uitlijning		align
Tekstuitlijning		text-align

Deze lijst is uiteraard niet compleet, er zijn veel meer mogelijkheden.

Maar ook afzonderlijke elementen hebben standaard waardes:

Breedte		width
Hoogte		height
positie		position
Plaats op de pagina		float
afronding		border-radius
Achtergrondkleur		background-color
Marge		margin
Padding		padding
rand		border

Ook deze lijst is uiteraard niet compleet

Aan de slag met CSS en de WP Bakery Page Builder

Stel je voor: je best aan de slag met een mooie webpagina. Je bouwt de pagina met de WP-Bakery page builder. Nu heb je een rij aangemaakt met 3 kolommen:

Nu wil je deze tekstblokken allemaal dezelfde opmaak geven. Dat kan uiteraard door elk blok afzonderlijk op te maken, maar dat kost veel tijd. Daarbij moet je goed onthouden welke waardes je hebt ingevoerd zodat de andere kolommen er ook precies hetzelfde uitzien: welke achtergrondkleur had ik ook alweer toegepast? Welke kleur had de lijn? Hoeveel pixels radius had de afronding? met een stukje CSS is dat veel gemakkelijker!

Laten we ervan uitgaan dat je de lettertypes en grootten al gedefinieerd hebt. We gaan ons dus concentreren op de blokken zelf:

We gaan een stuk CSS schrijven. Je kunt de klasse iedere naam geven die je maar wilt, zolang de klasse maar logisch in voor jezelf. Er is 1 strikte voorwaarde: elke klasse die je aanmaakt begint altijd met een punt. Zo weet de HTML dat het standaard CSS niet gebruikt wordt, maar dat de klasse geldt die wij de kolom toekennen.

Ik noem de klasse: .box10:

.box10 {

}

Tussen de accolades gaan we nu regels toevoegen:

.box10 {
border-radius: 15px;
background: #F2F2F2;
padding: 20px;
outline: 2px solid #464646;
margin: 30px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Achter iedere waarde zet je een ;. De waardes zet je netjes onder elkaar. De laatste accolade zet je netjes aan het begin.

Wat hebben we nu gedaan?

box10 {	Klasse openen
Border-radius: 15px;	Afronding hoeken 15 pixels
background: #F2F2F2;	Achtergrondkleur #F2F2F2 = lichtgrijs)
padding: 20 px;	Ruimte rondom de inhoud 20 pixels)
outline: 2px solid #464646;	Rand 2 pixels dik en kleur #464646 (grijs)
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;	Schaduw
margin: 30px;	Ruimte tussen de kolommen
}	Klasse sluiten

Nogmaals: Ieder goed WordPress Thema heeft een sectie in de interface waar je ‘custom CSS’ kunt toevoegen. Kijk bij jouw thema waar dit kan. Mocht je het niet kunnen vinden of is die mogelijkheid er niet, neem dan contact op met de maker van het thema!

Onze pagina heeft nog geen custo CSS. Het ziet er nu zo uit:

Je ziet dat de header tekstkleur Turqoise is en dat de tekst een schaduw heeft. Dit heb ik reeds in een ander stuk CSS gedefinieerd!

Nu gaan we de kolommen vertellen dat we een klasse hebben aangemaakt: We klikken op de kolom en dan zien we dit:

Het onderste invoerveld is bedoeld voor ons zelfgemaakte stukje CSS:

Wanneer we de pagina opslaan en we bekijken de preview dan zie we onze klasse aan het werk:

Deze opmaak (.box10) kunnen we nu overal in de site toepassen!

In deze website zit veel custom CSS. Hieronder zie je een stuk pagina:

Uiteraard is ook dit tekstblok voorzien van custom CSS:

.box01 {
border-radius: 15px 120px 30px 15px;
background: #ffffff;
padding: 20px;
outline: 2px solid #57c5cf;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Ook de sidebar kun je met custom CSS. De sidebar is bij veel thema’s een ondergeschoven kindje. De website van ProFM Broadcast heeft zo’n sidebar met custom CSS: