Geschatte leestijd: 2 minuten
CSS of Cascading Style Sheets is een style sheet taal die wordt gebruikt om het uiterlijk en de opmaak van HTML-documenten te definiëren. WordPress thema’s gebruiken CSS en HTML om de gegevens te genereren die worden gegenereerd door WordPress. Elk WordPress thema bevat een style.css-bestand met stijlregels om de opmaak van door WordPress gegenereerde pagina’s te definiëren.
CSS is heel eenvoudig te gebruiken en gemakkelijk te leren. Er zijn veel websites die CSS-tutorials voor beginners publiceren die een nieuwe gebruiker van WordPress kunnen helpen om te beginnen. Omdat het heel eenvoudig te gebruiken is, kunnen veel WordPress gebruikers de basiskennis begrijpen door simpelweg naar het styles.css-bestand van hun WordPress thema te kijken.
Voorbeeld:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | body { font-size:14px;color: #444;background-color:#FFFFFF; } h1 { font-size:18px;text-transform:uppercase;} .post-title { font-size: 16px; color: #4C0000;font-weight:normal;} |
HTML-elementen kunnen rechtstreeks in CSS worden opgemaakt. Ontwerpers gebruiken ook ID’s en klassen om verschillende secties te definiëren die in CSS kunnen worden opgemaakt. Dit helpt hen om verschillende stijlen te gebruiken voor dezelfde HTML-elementen op een webpagina, maar in verschillende secties. Een h1-element voor de blogtitel in het kopgedeelte van een pagina kan bijvoorbeeld anders worden weergegeven dan een ander h1-element in het berichtgedeelte van dezelfde pagina.
Voorbeeld:
| 1 2 3 4 5 6 7 | <div id="header"> <h1 class="blog-title"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1> </div> |
De hierboven getoonde HTML bevat een identifier genaamd ‘header’ en een klasse genaamd ‘blog-title’. Deze secties kunnen worden gestijlt in CSS.
Voorbeeld:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | #header { background-color:#4C0000;height:120px;width:100%;padding:20px; } h1.blog-title a { font-color:#FFFFFF; font-size:16px;font-family: Georgia, "Times New Roman", serif; text-decoration:none;} |
