“CSS? Nooit van gehoord”
Veel mensen weten niet wat het is en wat je ermee kan doen. Nog steeds zijn er veel designers die hun pagina’s met HTML opmaken omdat ze niets van CSS weten of denken dat het voorbehouden is aan W3C goeroe’s. Ten eerste is het helemaal niet moeilijk en ten tweede kan je zelf ook zo’n goeroe worden 🙂 In deze tutoriel leer je waarom je CSS moet gebruiken en hoe je het gebruikt.

Inleiding
Een eenvoudige website bestaat uit minimaal één component: HTML. Hiermee bouw je structuur, een soort frame, om de informatie van een pagina heen: <h1> voor de koptekst, <p> voor paragrafen enzovoort. Helaas ziet dit er nogal onaantrekkelijk uit voor een website; het is puur zwart en wit. Natuurlijk wil je dat jouw website er kleurig bij staat en dat kan niet beter dan met, je raadt het al, CSS. Met CSS kan je alle elementen op een pagina een opmaak geven, positioneren, hover (als je met de muis erop staat, bij Javascript “mouseover”) effecten meegeven enzovoort. De naam staat voor Cascading Style Sheets (Trapsgewijze stijl bladen). Deze trapsgewijze werking is een zeer krachtig element van CSS waar ik later nog op terugkom.

Een stukje geschiedenis
De meeste beginners – zelfs mensen met webdesign als beroep – op het gebied van HTML maken hun pagina’s op met HTML code. In het begin van het web was er nog geen CSS of een goede CSS ondersteuning door browsers, dus het was geen logische keus om het te gaan gebruiken. Op deze manier is het opmaken met HTML ingeburgerd. Omdat dit erg inefficiënt is, leg ik het alternatief CSS uit;

* Waar je in HTML beperkt bent tot stijlen die niet op elk element van toepassing zijn, bestaan deze ketens in CSS niet. Het is dus veel uitgebreider.

* HTML opmaakcodes verstuur je bij elke pagina. Het CSS bestand kan je één keer versturen en dan staat deze in de cache van de browser. Dit scheelt dataverkeer.

* HTML opmaakcodes worden door het W3C steeds meer als deprecated (afgekeurd) bestempeld. In de toekomst kan de ondersteuning door browsers hiervoor steeds minder worden en het is slecht gebruik van HTML.

* En dan het, voor webdesigners, duidelijkste voordeel van CSS: Als je op elke HTML pagina naar hetzelfde CSS bestand linkt, hoef je alleen dat ene bestand aan te passen om de hele site een ander uiterlijk te geven.

De opbouw van CSS
Heel leuk en aardig dat je nu weet wat CSS is, maar als je er niet mee kan werken heeft het nog weinig nut. Opzich is CSS heel eenvoudig. Het werkt volgens een paar strakke regels en kent geen uitzonderingen. In het volgende voorbeeld staat een kort stukje CSS:

span
{
background-color:lime;
font-style:italic;
}

De bovenstaande code geeft het volgende: voorbeeldtekst
Als eerste wordt gedefinieerd om welk element het gaat. In dit geval gaat het om een <span>. Tussen de accolades na een elementnaam staan de opmaakcodes voor dat element:

* background-color geeft de achtergrondkleur aan

* color definiëert de tekstkleur

* font-style kan een aantal waardes hebben en vertelt welke stijl de tekst heeft. In dit geval is het italic.

Als je meerdere elementen wilt stijlen zet je alles netjes achter elkaar:

div
{
font-style:italic;
}
a
{
text-decoration:underline;
}
p
{
margin-top:5px;
}

Spaties en returns maken niets uit in CSS, daarom is de volgende code hetzelfde als de vorige:

div {
font-style:italic;
}
a
{
text-decoration: underline;}
p{margin-top:5px;}

Zoals ik al had gezegd, is de trapsgewijze werking van CSS en krachtige en handige functie. Bestudeer de volgende code eens:

div p a
{
text-decoration:underline;
}

Zoals je ziet staan er op de plek waar het element gedefinieerd moet worden drie elementen. In dit geval worden alle <a>-elementen in <p>-elementen in <div>-elementen geselecteerd. Dus alleen links die in een paragraaf staan die in een <div> staan worden beïnvloedt door deze stijl. Op deze manier kan je makkelijk een bepaalde selectie uit de HTML elementen uit je pagina maken.

ID’s en classes
Er zijn nog twee manieren om specifieke elementen te selecteren behalve trapsgewijze selectie. Met een ID kan je één enkel element selecteren.Voorbeeld:

div#footer
{
background-color:pink;
}

In dit stukje code wordt alleen de <div> met het ID “footer” aangeroepen voor de styles. In HTML geef je een element een ID mee met het attribuut “id”. Voorbeeld:

<div id=”footer”><div>

Je definieert een ID met “#id-naam”. Er hoeft niet persé een elementnaam voor het hekje, zoals in het voorbeeld gebruikt is.
Opmerking: Elk unieke ID mag je op een pagina maar aan één element toekennen.
Met classes kan je een groep elementen selecteren van elk type en in elk parent element. Het volgend voorbeeld hoort bij de daaropvolgende HTML code:

span.underline
{
text-decoration:underline;
}
<div>
<p>
<span>Hallo wereld</span>
</p>
<span>Nog een fijne dag</span>
</div>

De class definitie in de CSS code .underlined geeft aan dat alle elementen mettab” doen of als de tekstcursor in een invoerveld staat

* lang Deze selecteert elementen die geschreven zijn in een andere taal. In dat element moet het lang-attribuut opgenomen zijn om de taal ervan op te geven

* first-child Deze selecteert het eerste child element in een ander element

* left

* right

* first

Op left, right en first wordt hier verder niet ingegaan
Ik leg kort het gebruik van lang en first-child even uit:

a:lang(nl)
{
text-decoration:underline;
}
<a lang=”nl” href=”#”></a>

De CSS code wordt alleen toegepast op elementen met lang=”nl” in de tag.

a:first-child
{
text-decoration:underline;
}

Hierbij worden alleen <a>’s die het eerste child-element in een ander element zijn aangesproken.

Tip: Met :focus kan je invoervelden een licht afwijkende achtergrondkleur geven, waardoor gebruikers eenvoudig kunnen zien in welk veld de cursor staat. Dit maakt de pagina weer wat gebruiksvriendelijker.
Met pseudo-elementen kan je ook leuke truukjes uithalen. Hier zijn er vier en dat zijn:

* first-letter Deze selecteert de eerste letter van het betreffende element

* first-line Deze selecteert de eerste regel van een element

* before Hiermee kan je dingen voor de content van het element plaatsen (tekst, afbeeldingen)

* afterHetzelde als voor :before, maar dan plaatst hij dingen na de content

Pseudo-elementen worden hetzelfde gedefinieerd als pseudo-classes. first-letter en first-line werken net zoals ID’s en classes, maar before en after werken iets anders:

p:before
{
content: “deze tekst staat ervoor”;
}

De waarde van content kan open-quote, close-quote, no-open-quote, no-close-quote, url(afbeelding) of een string tussen quotes zijn.
Opmerking: Internet Explorer ondersteunt het gebruik van :before en :after helaas niet.

Stylesheets maken

Nu je weet hoe je HTML code moet opmaken, is het ook wel handig te weten hoe je ervoor zorgt dat je styles aan je HTML gelinkt worden. Dit kan op drie manieren gedaan worden, waarvan eentje aan te raden is;

* Via een extern bestand. Je plaatst de CSS code in een apart bestand met de extensie

*.css en voegt hem in de <head> in. Dit is dan een external style sheet.

* Tussen <style> tags in de <head>. Dit is een internal style sheet

* De losse stukjes code in de HTML tags als inhoud van het “style” attribuut plaatsen. Dit zijn dan inline style sheets

De eerste oplossing is het beste, aangezien je hier maar één CSS bestand hebt, waardoor de layout van een pagina erg makkelijk aan te passen is. Als je besluit de opmaak over de hele site – ook al is met maar een klein detail – aan te passen, dan hoef je deze wijziging slechts in dit ene bestand toe te passen. Je hoeft de CSS code maar één keer hoeft te verzenden omdat hij daarna in de cache van de gebruiker staat. De HTML code wordt dan zo:

(…)
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
(…)

De tweede methode kan handig zijn bij het ontwikkelen van een pagina. Zo heb je CSS en HTML bij elkaar. Het verschilt weinig van de vorige methode, behalve dat de code in het HTML bestand staat i.p.v. in een CSS bestand. Voorbeeld:

(…)
<head>
<style type=”text/css”>
a
{
text-decoration:underline;
}
<style>
</head>
<body>
<a href=”#”>hyperlink</a>
</body>
(…)

Bij de laatste optie is elke HTML tag voorzien van zijn eigen CSS code:
<a style=”text-decoration:underline;” href=”#”>

Dit is erg omslachtig en het “bevuilt” de HTML code alleen maar. Zoekmachines komen er moeilijker door en voor jou is het ook niet makkelijk om alles te doorzoeken.

CSS blokopdrachten
Een pagina kun je zien als een blok waar je iets in kwijt kunt. In zo’n blok kun je ook weer blokken plaatsen. De plaats van een blok bepaal je met onderstaande opdrachten.

position: absolute; exact op die plek ongeacht wat er voor is geweest
position: fixed; blijft ook bij het schrollen op dezelfde plek

margin: auto; Blok centreren op het scherm
margin: 0px; Blok met 0 punten van links, rechts, beneden en boven
margin-left: 0px; Blok 0 pixels van links
margin-right: 0px; Blog 0 pixels van rechts
margin-top: 0px; Blok 0 punten van boven
margin-bottom: 0px; Blok 0 punten van beneden
width: 100px; Blok is 100 pixels breed
height: 21px; Blok is 21 pixels hoog

padding: 20px; Blok waar rondom binnen de rand een afstand is van 20px tot de rand.
Verder kan er ook net als bij margin ook padding-left, padding-right, padding-top en padding-bottum gebruikt worden.

float:left; tekst valt rechts om het blok heen
float: right; tekst valt links om het blok heen
We zijn nu aangekomen bij het einde van deze tutorial. Je kent nu de werking van CSS en waarom je het zou moeten gebruiken. Nu kan je aan de slag gaan met tutorials waarin je leert met welke CSS-eigenschappen je HTML-elementen kan opmaken..