Wat is een stylesheet en hoe pas ik deze aan?

watisstylesheet

In het artikel Introductie van HTML en Styling is CSS al enigszin aan bod gekomen. Ik heb enkele voorbeelden gegeven van wat CSS nu precies is en waarvoor je het kan gebruiken, maar wat is nu precies een stylesheet waarin alle CSS staat? En hoe kan ik deze eventueel aanpassen? Dat komt vandaag aan bod!

Wat is een stylesheet?

Een stylesheet bevat CSS wat staat voor Cascading Style Sheets. Je kan hiermee bepaalde elementen een styling geven, denk hierbij aan een kleur, lettertype, dikgedrukt, schuingedrukt, enzovoort.

Hoe gebruik ik een stylesheet?

Er zijn drie manieren waarop je een stylesheet kan toepassen:

  1. Externe Stylesheet
  2. Interne Stylesheet
  3. Inline Stylesheet

Ik heb een Inline Stylesheet behandeld in de Introductie van HTML en Styling en daar ook enkele voorbeelden gegeven. Als je dit wilt gebruiken is het raadzaam om dat artikel te lezen.

De naam Externe Stylesheet geeft het waarschijnlijk al aan, dit is namelijk een los bestand dat gelinkt wordt op jouw website. Deze manier van linken zorgt ervoor dat je op meerdere pagina’s dezelfde styling toe kan passen. Dit heeft dan ook de voorkeur wanneer je een eigen website hebt. Een Externe Stylesheet wordt gelinkt door middel van deze methode:


<head> 
<link rel="stylesheet" href="bestandsnaam.css" type="text/css" /> 
</head> 

Een Interne Stylesheet wordt gebruikt wanneer je een pagina hebt die eigen styling bevat.


<head> 
<style type="text/css"/> 
Alle styling komt hier te staan.
</style> 
</head> 

Let op! Het toepassen van een interne of externe stylesheet gebeurd altijd in het <head> gedeelte.

Waar kan ik mijn stylesheet vinden?

Gebruik jij WordPress? Zoek dan naar het bestand dat eindigt met de .css extensie. In de meeste gevallen heet het bestand style.css. Hierin kan je alle styling vinden die jouw website gebruikt. WordPress maakt altijd gebruik van een Externe Stylesheet.

Gebruik jij Blogger? Dan zit dit iets anders in elkaar want bij Blogger heb je geen apart CSS bestand. Bij Blogger maak je namelijk gebruik van een Interne Stylesheet. Log in op je account, ga naar Template en vervolgens Customize. Klik dan op Advanced en scroll naar beneden. Daar zie je vervolgens Add CSS staan. Wanneer je daar op klikt dan krijg je een textvak waar je styling kan toevoegen.

CSS in Blogger
CSS in Blogger

Hoe pas ik mijn stylesheet aan?

Het aanpassen van een stylesheet kan op verschillende manieren. Persoonlijk geef ik de voorkeur aan om het bestand aan te passen om mijn computer door middel van een text editor bijvoorbeeld Sublime Text. Ik maak doorgaans veel wijzigingen en als ik dit zou doen via mijn blog zelf, dan kan ik een oude versie niet terughalen. Risico is dat je CSS niet meer klopt of erger nog, dat je hele website verpest is. Door middel van een text editor kan ik heel gemakkelijk CTRL+Z toepassen en mijn aanpassing terugdraaien.

Gebruik je geen text editor, zorg dan altijd voor een backup wanneer je een wijziging doorvoert. Of nog beter, maak gebruik van een Child Thema in WordPress (binnenkort meer hierover!).

In WordPress heb je de mogelijkheid om via Weergave -> CSS Bewerken naar je style.css te gaan en wijzigingen toe te voegen aan je styling.

Wordpress CSS Bewerker
In WordPress ga je naar Weergave -> CSS Bewerken.

Vervolgens krijg je een nieuw scherm waar je de gewijzigde CSS kan toevoegen. Aan de rechterkant heb je de optie om te kiezen tussen Add-On CSS en Vervang Thema’s’s CSS. Laat dit op Add-On CSS staan zodat je de oude stylesheet van je thema altijd nog achter de hand hebt.

Add On CSS WordPress

Alles wat je in het tekstveld noteert wordt toegevoegd aan je CSS, dus de basis die in het bestand style.css van jouw thema blijft staan. Experimenteer en kijk wat voor resultaten het oplevert. Vergeet niet op Opslaan te klikken! Ga vervolgens naar je blog en bekijk het resultaat. Vind je het niet mooi dan kan je deze verwijderen en eventueel opnieuw beginnen.

In Blogger is het ongeveer hetzelfde verhaal. Wanneer je op Add CSS klikt komt er ook een veld te voorschijn waar je styling kan toevoegen. Het leuke bij Blogger is dat je het resultaat gelijk kan zien wanneer je op Apply to Blog klikt omdat jouw blog aan de onderkant te zien is. Soms kan het voorkomen dat de wijzigingen die je maakt, niet meer in het veld te vinden zijn. Wat je kan dan doen is terug gaan naar het begin scherm en op Edit HTML klikken. Je krijgt dan vervolgens je gehele website te zien in de vorm van de coderingen. Jouw CSS is onder de regel <b:skin> verwerkt.

expand-blogger-css

Let op! Wat je onder Edit HTML vindt is jouw gehele website. Verwijder je hier regels met coderingen dan heb je kans dat jouw thema niet meer naar behoren werkt. Wees dus voorzichtig met wat je aanpast! Heb je geen ervaring met CSS of HTML, kies dan de veilige optie en werk standaard met de Add CSS methode die ik eerder heb uitgelegd.

Hoe weet ik wat er aangepast moet worden?

Dat is een hele goede vraag! Je moet namelijk het juiste attribuut (selector) vinden zodat je deze kan selecteren in je CSS. Kijk dus goed naar de coderingen van je thema, zoek naar een attribuut en noteer deze. Ga vervolgens aan de slag met jouw aanpassingen. Ik val waarschijnlijk in herhaling, maar maak voor de zekerheid ook een backup van je stylesheet vóórdat je aan de slag gaat. Better safe than sorry!

css-bestaat-uit

Experimenteer! En heb plezier in het ontdekken van nieuwe combinaties. Dat is juist het leuke van CSS, de mogelijkheden zijn eindeloos! Wees niet bang als iets niet lukt, maar probeer juist uit te vogelen waaraan dat zou kunnen liggen. En mocht het nou echt niet lukken, dan mag je bij mij ook altijd aankloppen. 🙂

Geef een reactie

3 reacties

  1. Nina says:

    Hi Naomi,

    Ten eerste, wat een fijn blog heb je! Ik ontdekte het bij toeval via Bloglovin’ en ben helemaal blij met de artikelen over css aangezien ik op dit moment bezig ben daar wat van te snappen en ermee aan de slag te gaan. Hoewel ik het al behoorlijk begin te begrijpen (hoera voor de inspector, verslavend om daarmee te rommelen :)) snap ik nog steeds niet helemaal waar je je css aan moet passen.

    Waar vind je bijvoorbeeld het bestand style.css? Op mijn ftp kan ik heel veel .css bestanden vinden maar geen die style.css heet. Wel zie ik bij Weergave > Editor een style.css staan? Kan je die ook gebruiken door te knippen en te plakken in Sublime Text?

    En wat zijn dan precies de stappen in Sublime Text? Eerst maak je er een backup van door het bestand onder een andere naam op te slaan?
    En vervolgens pas je dingen aan neem ik aan. Sla je de originele file vervolgens op? Of plak je de nieuwe css in wordpress in Weergave -> CSS Bewerken?

    Sorry voor mijn vele vragen. Misschien is het meer iets voor Fix It Saturday maar ben ongeduldig 😉
    Mocht je tijd hebben om mijn vragen te beantwoorden dan zou dat super zijn, ondertussen surf ik ook lekker door op zoek naar antwoorden.

    Groetjes
    Nina

    • Hoi Nina,
      Wat een lieve reactie van je! Sorry dat het zo lang heeft geduurd eer dat ik reageer… omdat we inmiddels twee weken verder zijn ben ik benieuwd of het allemaal gelukt is of niet? Als ik nog ergens mee kan helpen hoor ik dat graag! 🙂 A.s. zaterdag is het ook weer Fix-It Saturday dus dan kan je ook een hoop vragen stellen. Tot dan (misschien!)

  2. Nina says:

    Hi, ben ik weer 🙂 Sorry voor mijn eerdere waterval van vragen…
    Ik ben inmiddels al heel wat stappen verder, ben er nog niet, sommige dingen lukken andere dingen niet. Zoals dat gaat met trial & error. Maar laat mijn eerdere verhaal maar zitten hoor. En ga zo door, ik ben benieuwd wat voor fijne tips & tutorials er nog komen!