CSS (Webdevelopment)

CSS staat voor Cascading Style Sheet en is een techniek om de vormgeving (positionering en opmaak) van een website te bepalen. Het CSS bestand bevat alle informatie (styledeclaraties) over de vormgeving van de website en kan aan een HTML of XML document worden toegevoegd. Het voordeel hiervan is dat de vormgeving in een apart document staat waardoor deze (vaak grote hoeveelheid) informatie niet in de broncode staat. De broncode blijft zo compact en overzichtelijk en de kans op fouten maken neemt af. Bovendien wordt de stylesheet in veel gevallen gecached door je computer, waardoor de laadtijd bij een volgende pageview of bezoek beperkt blijft.


CSS werd in 1996 geintroduceerd door het World Wide Web Consortium (W3C).

Styledeclaraties


Een styledeclaratie kan worden toegepast op een specifiek element en bevat een zogenaamde property en een bijbehorende waarde. Deze properties en waarden zijn vastgelegd door het W3C, net als mogelijke elementen en selectors. Je dient eerst het element aan te geven waar je stylen op toe wilt passen, de betreffende stylen komen daarna tussen accolades. Om de achtergrondkleur oranje en het lettertype verdana te maken voor alle koppelingen, kun je de volgende css-code gebruiken:
a
{
background-color: #fc0;
font-family : verdana;
}


Voordelen CSS


Een van de grootste voordelen van CSS is dat men vanuit een enkel bestand de vormgeving van een gehele site kan aanpassen. Wil men de kop van een pagina groter maken of een andere kleur geven, dan kan dat vanuit de CSS file. Het is zelfs mogelijk om gehele contentdelen te veranderen of verplaatsen. Een horizontaal menu kan ineens verticaal gemaakt worden en een linkerkader kan eenvoudig aan de rechterkant worden geplaatst. Dit wordt vervolgens op elke pagina toegepast die gebruik maakt van deze centrale stylesheet.

Plaatsing van styledeclaraties


Styledeclaraties kunnen in een extern bestand (stylesheet) geplaatst worden, maar dit kan ook intern of inline.

Externe css
Veel voorkomend is dat styledeclaraties in een extern (buiten het html-document) geplaatst wordt in een stylesheet. Deze stylesheet kan uiteindelijk toegepast worden op bijvoorbeeld een html-document met de volgende html-code welke in de head tags geplaatst moet worden:
<link rel="stylesheet" type="text/css" href="/pad/naar/stylesheet.css" />

Interne css
Intern houdt in dat styledeclaraties in het html-document staat waar het op toegepast moet worden. Als die declaraties op meerdere webpagina's toegepast moet worden, is een extern bestand dus praktischer. Interne styledeclaraties worden in daarvoor bestemde style-elementen geplaatst binnen de head tags:
<style type="text/css">
a
{
background-color: #fc0;
font-family : verdana;
}
</style>

Inline css
Inline css is ook mogelijk. In dit geval gaat het om interne css, welke echter niet in de head tags komen te staan, maar direct in het element waar je het op toe wilt passen. Uitgaande van de vorige twee declaratie-voorbeelden, dien je inline css op de volgende manier te doen:
<a style="background-color: #fc0; font-family: verdana" 
href="http://www.google.nl">Google</a>

Gerelateerde woorden

Meer over CSS (externe links)

  • CSS.startpagina.nl - De Cascading Style Sheets dochterpagina. (CSS) Style sheets behoren tot de nieuwe standaard.
  • W3C.org - Alles over CSS door W3C, met links naar artikelen, resources, tutorials en interessante websites.

Thema & categorieën