Wat is css en hoe werkt het?

Cascading Style Sheets, of kortweg CSS, is een programmeertaal die helpt bij de opmaak van HTML-bestanden. Een HTML-document, de kern van elke websitepagina, beheert alle inhoud die je ziet zoals tekst, afbeeldingen en hyperlinks. CSS zorgt voor de stijl of opmaak van deze inhoud.

CSS voorbeeld

Hoe ziet CSS code er dan eigenlijk uit? Onderstaand een simpel voorbeeld van een stukje CSS code.

h1 {
 color: white;
 text-align: center;
}
p {
 font-family: verdana;
 font-size: 20px;
}

In bovenstaande css code wordt aangegeven dat de titels (h1 in dit geval) wit moeten zijn en dat de titel uitgelijnd moet worden in het midden. De ‘p’ staat voor paragraph en geeft dus aan de de paragrafen het Verdana lettertype moeten zijn met een tekstgrootte van 20 pixels.

Hoe werkt CSS precies?

CSS zorgt voor de opmaak, maar om dingen anders op te maken, heb je een methode nodig om specifieke elementen te targeten. CSS kan worden gebruikt om verschillende delen van de site afzonderlijk te stijlen. Daarnaast worden klassen (class=) en identifiers (id=) vaak gebruikt in CSS om verschillende onderdelen te creëren. Op deze manier kan je dezelfde HTML-elementen op verschillende manieren aanpassen, afhankelijk van waar ze zich op de website bevinden.

Er zijn websites die je kunt gebruiken om te experimenteren met CSS zonder dat je zelf iets hoeft te doen! Een goed voorbeeld is http://www.w3schools.com/css . Hier kun je meer leren over de mogelijkheden van css. Als je nog meer wilt leren over de mogelijkheden van CSS, zijn er een aantal goede tutorials te vinden door te zoeken op “CSS tutorial” in Google.

De voordelen van CSS

Als je je afvraagt of je voor elk HTML-bestand op je website een apart CSS-bestand moet maken, is het antwoord nee. Je kunt CSS gebruiken om de lay-out en het ontwerp van jouw website vanuit één enkel bestand te beheren. Dit betekent dat je dus niet meerdere CSS-bestanden hoeft te maken voor verschillende HTML-pagina’s, maar slechts één stijlblad ofwel stylesheet kunt maken om de kleur, het lettertype en het uiterlijk van tekst te regelen, evenals het ontwerp, de lay-out en de presentatie van de hele website. Dit is ook het grote voordeel van css, je kunt de inhoud en opmaak scheiden.

Maar er zitten nog meer voordelen aan het gebruiken van CSS:

• Omdat alle ontwerp code van de website in één enkel bestand wordt bewaard, kunnen wijzigingen in het ontwerp van de hele website worden aangebracht vanuit dat ene bestand. Dit bespaart niet alleen tijd, maar minimaliseert ook de kans op fouten.
• Met CSS kan je de elementen van jouw website pagina tot op de pixel nauwkeurig ontwerpen en positioneren.
• Het is eenvoudig om alle pagina’s van uw website er precies hetzelfde uit te laten zien wanneer u Cascading Style Sheets gebruikt. Iets wat door de bezoekers van uw site als zeer welkom zal worden beschouwd.
• Wanneer de code voor het ontwerp van een website in een stijlblad wordt gezet, wordt de HTML-code kleiner en eenvoudiger te lezen en te begrijpen voor zoekmachines. Duidelijke en ‘schone code’ wordt ook aangemoedigd door zoekmachines, wat resulteert in betere rankings.

De plek van CSS code

CSS kan dus in een apart stylesheet bestand worden geplaatst, bijvoorbeeld style.css. Je moet dan in de head van je HTML bestand wel een link opnemen naar je stylesheet zodat deze aan elkaar gekoppeld zijn. Dit ziet er als volgt uit.

<link href=”css/style.css” rel=”stylesheet” type=”text/css”>

Kortom; maak voor de vormgeving van de verschillende html-elementen op deze pagina gebruik van een stylesheet dat style.css heet.

Een andere mogelijkheid is om css direct in het html bestand te zetten, we noemen dit inline CSS. Nadeel is dat opmaak en inhoud dan niet meer gescheiden zijn. Om de code zo ‘schoon’ mogelijk te houden is het verstandig de opmaak dus in een apart bestand te plaatsen. Plaats je CSS code toch direct in de html dan is het van belang dat je de css code tussen deze style elementen zet:

<style>hier komt je css code </style>