Wat is CSS?

Cascading Style Sheets, afgekort CSS is een codeertaal waarbij je in combinatie met HTML een webpagina kan ontwikkelen. Allereerst is HTML belangrijk om de structuur van een pagina te bepalen, daarna kun je met CSS de style (kleuren, fonts etc) en posities (breedtes, hoogtes, uitlijning etc) bepalen.

Heb je CSS nodig?

Ja zeer zeker, wanneer je alleen HTML gebruikt zie je aan de voorzijde geen structuur aan de website. Dit word bepaald door CSS. Aan elk HTML element is vorm te geven middels CSS. Hieronder een voorbeeld van een element die is gestyled met CSS.

<div class="tekst-is-groen">
   Deze tekst word groen
</div>

.tekst-is-groen {
   color: green;
}

Class vs. ID

Hierboven zie je een voorbeeld hoe een class word gekoppeld aan een element (dit geval <div>). Dit kan ook door middel van een id, dan krijg je de volgende code:

<div id="tekst-is-groen">
   Deze tekst word groen
</div>

#tekst-is-groen {
   color: green;
}

Het nadeel van een id is dat je hier eenmalig gebruik mag maken, er kan dus maar één #tekst-is-groen op een pagina staan. Dat is bij een class anders, een class mag je zo vaak mogelijk gebruiken en word meer toegepast tijdens de ontwikkeling van een website, webshop of applicatie. Heb je bijvoorbeeld meerdere items die je wilt weergeven, dan gebruik je een class in combinatie met de volgende code:

<div class="item">
   Eerste item
</div>
<div class="item">
   Tweede item
</div>

.item {
   color: green;
}

Complexe regels in CSS

Het schrijven van lange regels CSS kan complex zijn, daarom maken developers vaak gebruik van SCSS, SASS of Less. Dit zijn uitbereidingen van de syntax van CSS. Hierdoor word het eenvoudiger om CSS te ontwikkelen.

Wil je meer weten over CSS(3) of heb je vragen hoe je dit het beste kunt implementeren? Neem gerust contact met mij op, ik geef graag antwoord op jouw vraag.