Wat is CSS en wat kun je hiermee?
Bijgewerkt: 31 augustus 2023
CSS staat voor Cascading Style Sheets. Het is een opmaaktaal voor webpagina’s. Hiermee bepaal je de presentatie en het uiterlijk. Dankzij deze opmaaktaal beheer je de visuele stijl zoals kleuren, lay-out, lettertypen en nog veel meer.
Gebruik het om fantastisch uitziende webpagina’s te maken. Maar hoe werkt CSS? In dit artikel leg ik dit op een eenvoudige manier uit.
Verschil tussen HTML en CSS
Problemen om meer verkeer naar je website te krijgen?
Hoi, ik ben Bianca en help websites doorgroeien. Zal dit jouw website zijn?
Eigenlijk zou je bij de basis moeten beginnen, en dat is HTML. Dit is een taal die uit elementen bestaat. Door stukjes tekst toe te voegen bepaal je de inhoud van een webdocument (webpagina). De kop van een HTML-document wordt niet in de webbrowser weergegeven. Maar het bevat wel belangrijke informatie over de pagina. Bijvoorbeeld metadata.
Alles wat binnen de <body> tags valt, is zichtbaar in de browser. Met HTML is het mogelijk om
CSS is een aparte opmaaktaal. Elke webpagina bestaat uit HTML, maar het is niet nodig om CSS te gebruiken. Dit doe je om speciale effecten of een visuele stijl toe te voegen. CSS voegt dus iets extra’s aan je webpagina’s toe.
Is CSS moeilijk?
Wanneer je helemaal geen basiskennis van HTML hebt, is het lastig om met CSS te werken. Dit komt omdat deze laatste een stapje verder gaat.
Je moet weten wat je doet. Wanneer je CSS-code verkeerd invoert, gaat er veel op je website mis. Elementen kunnen niet meer zichtbaar zijn, of je website reageert op een manier die je niet zou verwachten. Het kan zelfs dat je hele website niet goed bereikbaar is of op een rare manier wordt getoond.
Voor een absolute beginner is CSS moeilijk. Maar wanneer je bijvoorbeeld een WordPress website hebt, kun je de visuele stijl van je website veel eenvoudiger beheren. Via het dashboard kom je namelijk bij een apart gedeelte voor CSS-opmaaktaal terecht.
Dashboard > Customer > Weergave > CSS
Enkele belangrijke aspecten binnen CSS
Middels deze opmaaktaal is veel mogelijk. Hieronder heb ik de belangrijkste concepten op een rij gezet.
Selectors
Hiermee kies je de HTML-elementen waarop je stijlen wilt toepassen. Selectors kunnen gebaseerd zijn op elementtypen (zoals p, h1, div), klassen (bijv. .header), ID’s (bijv. #main-content), en meer.
Properties
Dit zijn de eigenschappen die je wilt toepassen op de geselecteerde elementen. Bijvoorbeeld color, font-size, margin, padding, enzovoort.
Values
Waarden zijn de instellingen die je aan de eigenschappen toewijst. Bijvoorbeeld, color: blue; of font-size: 16px;.
Selectors en Properties Combinaties
Door selectors te combineren met eigenschappen en waarden, kun je specifieke stijlen toepassen op specifieke delen van een webpagina.
Tot zover de basiskennis. Laten we nu eens gaan experimenteren met CSS.
Een border om je tekst
Wil je een rand om een geheel element? Dat kun je middels CSS instellen. Hierbij heb je keuze uit verschillende eigenschappen zoals de stijl, de kleur en de breedte.
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}Hierboven vijf verschillende CSS-codes. De eerste code zorgt ervoor dat er een rand van puntjes verschijnt. De tweede code bestaat uit een rand van een onderbreken streep is de derde is een zondagse gerichte rand, en de vierde een dubbele rand. De vijfde ziet er lichter uit.
CSS achtergrondkleur
Middels CSS kun je ook de achtergrondkleur van een element bepalen. Je kunt in het CSS formulier het volgende invoeren:
body {
background-color: lightblue;
}Hiermee krijgen alle webpagina’s een lichtblauwe achtergrondkleur.
De titel van een pagina niet tonen
Standaard laat WordPress de titel van een pagina zien. Wil je niet dan moet je de titel weghalen, maar dit is ongewenst. Hierdoor verdwijnt de titel ook in het tabblad van de browser. Bovendien is de afwezigheid van een titel niet goed voor zoekmachine optimalisatie.
Gelukkig kun je via CSS de titel van een pagina laten verdwijnen, terwijl hij er nog steeds is. Eerst moet je weer waar de pagina-id is. Wanneer je de betreffende pagina in WordPress bereikt, zie je bovenaan in de URL een reeks van nummers staan. Het gaat om 2 tot 5 nummers.
Voeg de volgende code aan het CSS-formulier:
.page-id-0000 .entry-title{
display:none;
}Zorg dat je 0000 voor de juiste pagina-id vervangt.
Een marge tussen top en bodem
Sommige WordPress thema’s maken de marge tussen content en de bovenkant en onderkant van de pagina zich klein. Wil je meer witruimte? Dit doe je middels de volgende CSS:
.site-content {
padding-top: 20px;
padding-bottom: 10px;
}Experimenteer met wat een goede afstand zou moeten zijn. 20px zorgt voor een minimale afstand. Wanneer je meer witruimte wil, die een bijvoorbeeld voor 35px.
Een rand om je laatste blogs (grid)
Binnen WordPress heb je de mogelijkheid om, waar dan ook, een overzicht van je laatste blogs te tonen. Bijvoorbeeld op basis van categorieën, publicatiedatums, tags of auteur. Sommige thema’s tonen een mooie rand rondom dit soort overzichten. Maar niet altijd. Wil je dit toch dan kun je dit handmatig instellen.
.wp-block-latest-posts.is-grid li{
border: 2px solid #ddd;
border-radius: 15px;
padding: 14px;
}Met deze code verschijnt inmiddels een dunne, lichtgrijze rand om je blogoverzicht. Wil je de kleur aanpassen, verander #ddd dan naar een hexkleur van jouw keuze. Wil je een voorbeeld van wat kleurcodes? In het artikel genderneutrale kleuren staan wat opties.
Positionering en lay-out
Stel dat je elementen wil uitlijnen. Of je wil de elementen in een grid (blog over) uitlijnen. Hieronder twee codes die jou hierbij helpen.
/* Uitlijnen van elementen naast elkaar */
.column {
float: left;
width: 50%
padding: 20px;
box-sizing: border-box
}
/* Uitlijnen van elementen in een grid */
.grid-container {
display: grid
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}De knoppen oftewel buttons op je website
Misschien wil je een opvallende button (knop) op je website. Bijvoorbeeld eentje met een opvallende achtergrondkleur, of dat de kleur verandert wanneer je er met de muis overheen gaat. Of je gaat voor een draaiende animatie, hoe tof is dat? Hieronder weer wat voorbeeldcodes.
/* Eenvoudige overgang bij het hoveren over een element */
.button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
transition: background-color 0.3s ease;
}.button:hover {
background-color: #0056b3;
}Hier wordt CSS voor gebruikt
Natuurlijk is het geen verplichting om CSS te gebruiken. Maar handig is het wel eens bijvoorbeeld om de grootte van koppen en links aan te passen. Of de achtergrondkleur van een pagina. Middels CSS op hoe je de opmaak van je site los van de inhoud.
Wat is een inline CSS?
Inline CSS betekent dat je code in een HTML-element zelf plaatst. Je past de code op dat element toe. Via WordPress gaat het als volgt:
- Voeg de CSS code aan het formulier toe
- Ga naar het bericht of de pagina die je wilt bewerken
- Klik op het element waar de CSS aan moet worden toegevoegd
- Klik aan de rechterkant op ‘blok’ > Geavanceerd
Voeg aan het gedeelte Extra CSS CLASS(ES) de code toe. Bijvoorbeeld:
.button:hover { background-color: #0056b3; }Bovenstaande code voeg je aan het formulier toe. In het gedeelte Extra CSS CLASS(ES) voeg je dit toe: .button.
Hulp nodig bij CSS
Je hoeft niet alles zelf te doen. Dit kan zelfs gevaarlijk zijn, want wanneer je met verkeerde CSS-codes werkt word je webpagina onverwacht anders weergegeven. Wel je het design van je website aan na te passen, of heb je hulp nodig bij CSS? Neem voor de mogelijkheden en de tarieven contact op.
Bianca schreef meer dan 50.000 artikelen voor het internet. "SEO is mijn missie, ik help anderen om hoger in Google te komen". Met zoveel geschreven onderwerpen, SEO- en marketingkennis is ze het startpunt voor elke (nieuwe) website. Een opdracht plaatsen of meer weten over de voordelige tarieven? Vraag vandaag nog de tarievenkaart aan.