WPLounge
CSS aanpassingen
Home » Tutorials » Basis CSS die iedereen zou moeten kennen

Basis CSS die iedereen zou moeten kennen

Iedereen met een WordPress site zal er vroeger of later mee te maken krijgen. Het zal hoogstwaarschijnlijk basis zijn en geen diepgaande programmeerkennis vereisen. Veelal gaat het om het aanpassen van wat CSS op basis niveau om bijvoorbeeld dat ene kleurtje of een bepaalde tussenruimte wat aan te passen aan de wensen.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

HTML en CSS zijn de basis waarmee het internet gebouwd is. Dus ook jouw WordPress site bestaat hier uiteindelijk uit! In dit artikel willen we je meenemen in de basisbegrippen van CSS, zodat ook jij begrijpt waar je mee bezig bent als je een keer op dat punt aankomt dat je bepaalde tweaks wilt gaan uitvoeren.

Wat is HTML en wat is eigenlijk CSS?

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »»
Lees meer over Divi.

De twee zijn namelijk onafscheidelijk en werken innig samen. Er zijn diverse manieren voor het aanpassen van HTML en CSS code in WordPress.
Heb je de artikels onder de links goed gelezen? Dan heb je nu een basis om de volgende stap te gaan maken en dieper in te gaan op CSS.

Selectors, Classes en ID’s

selectors-classes-ids

Een selector is de basis van CSS. Een selector selecteert op welk element (in het voorbeeld ‘p’) de code van toepassing is die tussen de accolades ({..})  staat. In het voorbeeld hiernaast is de kleur ‘white’ van toepassing op alle tekst tussen de HTML <p> tags. De <p> tag definieert in HTML een paragraaf. De kleur ‘red’ is in dit geval van toepassing op tekst in alle paragrafen van de specifieke HTML pagina.

Daarnaast heb je classes. Deze worden in de CSS altijd voorafgegaan door een ‘.’. De naam van een class mag de schrijver zelf verzinnen in tegenstelling tot een selector, die altijd een HTML-tag moet zijn. Een class werkt als aanduiding van de selector met het verschil dat je de class daar kan laten gelden waar je deze toevoegt in de HTML tag als attribuut. Het HTML voorbeeld (zie voorbeeld afbeelding code snippet .class) <p class=”class”>deze paragraaf</p> zorgt ervoor dat de tekstkleur van ‘deze paragraaf’ wit zal zijn. Dus de p selector bepaalt hier dat alle paragrafen rode tekst hebben, tenzij er in de <p> tag een ‘class=class‘ attribuut is toegevoegd. In dat geval is de tekst tussen de <p> tags wit.

Tot slot heb je ook nog ID’s. Deze worden in de stylesheet aangeduid met een # ervoor. In de HTML tag zijn ze herkenbaar als id=”id”. Ze werken in feite hetzelfde als classes, maar ze mogen maar één keer op de betreffende HTML pagina voorkomen. Classes mogen zo vaak voorkomen op de pagina als je wilt.

Dit zijn de basis selectors die we in dit kader bespreken. Er zijn ook nog andere advanced selectors voor het selecteren van specifieke elementen maar aangezien we hier de basis bespreken laten we die voor nu even buiten beschouwing.

Colons en Semicolons

display-none

Iedere regel in een CSS stylesheet bestaat uit een style en een waarde. Elke regel moet eindigen met een puntkomma (semicolon). Tussen de style en de waarde moet altijd een dubbele punt (colon) staan. Spaties waar dan ook in de stylesheet hebben geen invloed. Deze gebruik je alleen voor de leesbaarheid. In de meeste themes en websites zit een mogelijkheid om minification te gebruiken. Dit kun je zien als een automatisch filter dat alle spaties uit de stylesheet haalt.

CSS Commentaar

css-commentaarBij alle codering en programmering is het belangrijk om te zorgen dat de code die je hebt gemaakt ook (ver) in de toekomst nog te begrijpen is, al dan niet door iemand anders. Daarom wil je soms commentaar toevoegen om uit te leggen hoe iets werkt of waarvoor het precies dient. Je start een commentaarregel altijd met /* en hij eindigt met */.

Alles wat daartussen staat is vrije tekst en wordt niet door de stylesheet geïnterpreteerd.

!important

!important

De !important declaratie bepaalt dat de style waarin deze wordt gedeclareerd, alle andere styles overruled die ervoor of erna worden gedefinieerd. De !important declaratie staat altijd achter de waarde van het attribuut en de vóór puntkomma. Dit is één van de meest ge- en misbruikte CSS tags. Het is bedoeld voor uitzonderingen. Als deze te veel wordt gebruikt is dit een indicatie dat de basisstructuur van de CSS stylesheet niet op orde is.

Display: none

display-none

Dit is een belangrijk basiselement voor beginners; zeker voor WordPress gebruikers is dit een veelvuldig gebruikte eigenschap. Hiermee kun je namelijk elementen van je pagina laten verdwijnen. In bovenstaand voorbeeld verdwijnt de header navigatie compleet van de pagina. Let er wel op dat je hier zorgvuldig mee omgaat, want je kunt er ook gedeeltes ‘onverklaarbaar’ mee laten verdwijnen. Elementen kunnen ook op meerdere pagina’s voorkomen en misschien is het niet de bedoeling dat het overal verdwijnt.

Visibility: hidden

visibility-hidden

Visibility: hidden doet praktisch hetzelfde als display: none. Het enige verschil is dat bij display: none het element compleet van de pagina verdwijnt. Bij Visibility: hidden komt het element wel in de HTMl code voor op de pagina, maar wordt het niet getoond in de browser. Soms is dit nodig vanwege bepaalde functionaliteiten, zoals een tracking pixel die niet zichtbaar mag zijn maar wel aanwezig.

Margin en Padding

margin-padding

Margin en padding lijken zeker voor beginners hetzelfde. Je kunt met beiden de lege ruimte bepalen om een element. Het verschil is dat margin de lege ruimte rondom het element bepaalt, terwijl padding de lege ruimte binnen het element bepaalt. Wat houdt dat precies in?
Stel je hebt twee elementen onder elkaar, dan zorgt een margin-bottom van bijvoorbeeld 25px op de onderkant van het eerste element ervoor dat er een lege ruimte van 25 pixels tussen de twee elementen aanwezig is. Definieer je een padding van 25px onder het eerste element, dan veroorzaakt dat ook een ruimte tussen de twee elementen, maar het eerste element wordt hiermee 25 pixels groter aan de onderkant! Indien dat element een kader of een achtergrondkleur heeft dan is dit ook zichtbaar, maar anders lijkt het effect hetzelfde als bij margin. Voor zowel margin als padding kun je voor de verschillende zijden van het element een top, bottom, left en right definiëren. Margin kan daarbij nog een negatieve waarde hebben; het element beweegt dan in tegengestelde richting. Ook kunnen naast pixels nog andere eenheden worden gebruikt om de afstand te bepalen. Dat valt voor nu even buiten het kader van dit artikel.

Kleuren van elementen

color

Het wijzigen van kleuren zal waarschijnlijk één van de eerste dingen zijn waar je tegenaan loopt als je ooit CSS gaat aanpassen. Er zijn vele manieren waarop elementen een kleur kunnen krijgen. De kleuren zelf kunnen op een aantal manieren worden toegewezen; er zijn een aantal keywords beschikbaar voor de basiskleuren, die je kunt gebruiken in plaats van een kleurcode. Zo kun je bijvoorbeeld color: red; gebruiken om een tekst binnen een element een rode kleur te geven. Maar ook white, black, blue, etc. werken zonder een kleurcode te hoeven opgeven.

Kleurcodes

Wil je beschikken over alle mogelijke kleuren, dan zul je deze met een hexadecimale kleurcode moeten aangeven. Deze wordt aangegeven met een # ervoor, dus #000000 staat voor zwart, en #FFFFFF staat voor wit. De 6 getallen (#RRGGBB) staan dan voor de RGB waarde van de kleur, wat zoveel wil zeggen als hoeveel je van iedere afzonderlijke kleur Rood, Groen en Blauw moet mengen om een bepaalde kleur te krijgen. De code #000 is de verkorte notatie, wat wil zeggen dat er aangenomen wordt dat de volgende drie cijfers van de code dezelfde zijn als de eerste drie cijfers. #000 is dus hetzelfde als #000000.

Gebruik van kleurcodes

Een vuistregel voor het gebruik van kleurcodes, is dat binnen een element met tekst erin met de waarde color: #RRGGBB; de kleur van de tekst zal worden getoond in deze kleur. Heeft een element een achtergrond, een border of andere eigenschap dan kan deze op analoge wijze worden ingesteld. Voor het bepalen van jouw eigen kleurcode kun je ook eens de HTML Color Picker bekijken op de site van W3schools. Met deze Color Picker kun je op visuele wijze een kleurenwaaier samenstellen voor een kleur naar keuze die je kunt selecteren in een kleurenwiel.

Conclusie

In dit artikel tonen we slechts een glimp van alle mogelijkheden met CSS. Hiermee heb je al wel een aardig begrip van de basisprincipes en kun je in WordPress misschien al je eerste kleine aanpassingen doen in de CSS van je site.

Beoordeel dit artikel

Roger.Overdevest

Roger is eigenaar van de website WPLounge en van zoekmachine marketing bureau Kliq Internet

Reageer

Adverteerders




X