Het schrijven van CSS.

Bron: http://www.sceneone.nl/algemeen/notatie.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

In het vorige onderdeel 'CSS koppelen aan HTML' heb je gezien hoe je HTML en CSS van elkaars bestaan op de hoogte brengt.
Nu is het nog zaak dat je ze op de juiste manier met elkaar 'laat praten'. In dit onderdeel behandel ik de volgende onderwerpen:

CSS3/HTML5 Opmerking! - Ik behandel op deze plaats de basis van het schrijven van CSS. Als je de basis onder de knie hebt kun je je kennis uitbreiden met bijvoorbeel CSS3 kennis. Alle moderne browsers ondersteunen ondertussen het meeste van CSS3 dus je kunt er volop mee aan de gang!
Als je wilt weten wat ondersteund wordt door welke browser kun je dat hier nakijken: http://caniuse.com/

Type selectors

Een bepaalde stijldeclaratie in je CSS heeft altijd betrekking op een bepaald element of op meerdere elementen in je HTML. Je moet in de CSS (en vaak ook in de HTML) aangeven welke stijldeclaratie betrekking heeft op welk element. Eén van de manieren waarop je dat kunt doen is de type selector. Met een type selector spreek je rechtstreeks een bepaald HTML element aan:

CSS: p{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF6600;
font-size: 90%;
}

Het bovenstaande voorbeeld is opgebouwd uit een paar onderdelen.
Om te beginnen de letter 'p'. Dit is de type selector. De 'p' verwijst rechtstreeks naar het HTML element <p>. Vervolgens open je het gedeelte van de stijlregels met een accolade. Daarna volgen (in dit geval) 3 stijlregels, iedere keer afgesloten met een ';'. Als laatste zie je een afsluitende accolade.
Deze stijldeclaratie is van toepassing op álle paragrafen van de pagina's waaraan je dit stylesheet koppelt (ik ga er van uit dat deze stijldeclaratie onderdeel van een stylesheet is).
Je kunt op deze manier ieder HTML element direct aanspreken.

Class selectors

Het kan natuurlijk voorkomen dat je helemaal niet wilt dat een stijldeclaratie van toepassing is op bijvoorbeeld alle paragrafen. Je wilt dat een declaratie van toepassing is op 1 of een paar van je paragrafen. In dat geval kun je gebruik maken van een class.
In je CSS geef je een class aan met een class-name (mag je zelf verzinnen) voorafgegaan door een punt. In je HTML hang je vervolgens die class-name aan het element waarvan jij wilt dat de declaratie erop van toepassing is:

CSS: .voorbeeld{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF6600;
font-size: 90%;
}
HTML: <p class="voorbeeld">De stijldeclaratie met de naam 'voorbeeld' zal van toepassing zijn op deze paragraaf.</p>
<p>De stijldeclaratie met de naam 'voorbeeld' zal niet van toepassing zijn op deze paragraaf.</p>

De class uit het bovenstaande voorbeeld kun je aan ieder element hangen waaraan je wilt. Er is ook een manier om een class te beschrijven zodat deze maar van toepassing kan zijn op 1 soort element:

CSS: ul.voorbeeld{
font-family: verdana, helvetica, arial, sans-serif;
color: #FF6600;
font-size: 90%;
}

De class uit dit voorbeeld werkt alleen bij ul's. Als je deze class nu aan een <p> zou hangen dan doet hij dus niets.

Id selectors

Een id werkt op dezelfde manier als een class, maar wordt in de CSS niet vooraf gegaan door een '.' maar door een '#'. In de HTML schrijf je <p id="naam_van_id">
Verder is er nog 1 groot verschil tussen id's en classes. Een class mag je per HTML pagina zo vaak gebruiken als je maar wilt. Er kunnen dus op 1 pagina een heleboel paragrafen zijn met de class 'voorbeeld'. Een id mag je per pagina maar 1 keer gebruiken. Een id is dus altijd uniek.

Je mag dus de naam voor een class of een id zelf verzinnen. Let er wel op dat deze namen nooit met een cijfer mogen beginnen en dat je geen spaties mag gebruiken.

Child selectors

In het onderdeel 'het document object model' heb ik het gehad over de hiërarchische structuur van een HTML document en het feit dat er sprake is van parent-elementen en child-elementen. En dat komt nu mooi uit, want we kunnen in ons CSS deze children direct aanspreken zonder dar we iedere keer weer een aparte class hoeven aan te maken. Stel dat je de volgende HTML hebt:

HTML: <p class="voorbeeld">De stijldeclaratie met de naam 'voorbeeld' zal <span>van toepassing zijn</span> op deze paragraaf.</p>

In dit stukje HTML is dus de <span> het child van de paragraaf met de class 'voorbeeld'. Je gebruikt in de rest van je pagina's ook nog wel span's (en misschien op deze pagina ook nog wel). Maar je wilt graag een aparte opmaak voor deze éne span. Deze opmaak mag niet terugkomen bij andere span's. Nou kun je natuurlijk een aparte class voor deze span aanmaken, maar je kunt ook gebruik maken het 'parent-child' gegeven. Dat doe je in je CSS zo:

CSS: p.voorbeeld span{
background-color: #999999;
}

Je hebt hier nu een stijldeclaratie met 1 stijlregel die zegt dat de achtergrondkleur grijs moet zijn. Deze declaratie is alleen van toepassing op span's die een child zijn van paragrafen met de class 'voorbeeld'. Alle andere span elementen zullen deze declaratie negeren.

Wat verder nog van belang is dat je met behulp van een class een type selector altijd kunt overschrijven. Bijvoorbeeld:

CSS: h2{
text-decoration: underline;
}

.uitzondering{
text-decoration: none;
}
HTML: <h2>Deze header zal onderstreept zijn.</h2>
<h2 class="uitzondering">Deze niet, omdat de type selector wordt overschreven door de class 'uitzondering'.</h2>

Eén stijl aan meerdere elementen hangen

Je kunt 1 stijl ook aan meerdere elementen, classes en id's tegelijkertijd koppelen. Dat doe je zo:

CSS: h2, li, blockquote span, p.voorbeeld, div#header{
font-size: 80%;
color: #FFFFFF;
}

De twee stijregels over font-size en color zijn nu van toepassing op de volgende elementen

Het schrijven van shorthand CSS

Ten slotte wil ik het in dit onderdeel nog even hebben over shorthand CSS. Je zou het engelse shorthand kunnen vertalen als snelschrift. Het is een verkorte versie van bepaalde stijlregels, een soort samenvatting.
Als je bijvoorbeeld de border van een div wilt beschrijven kun je dat zo doen:

CSS: div#header{
border-width: 1px;
border-color: #FF6600;
border-style: solid;
}

Maar je bereikt precies hetzelfde resultaat met deze declaratie:

CSS: div#header{
border: 1px #F6O solid;
}

Let ook op de kleurcode in het bovenstaande voorbeeld. Je mag alle websave colors op deze manier afkorten.

Nog een voorbeeld van shorthand. Dit kan:

CSS: div#header{
padding-top: 5px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 10px;
}

Maar dit is handiger en sneller:

CSS: div#header{
padding: 5px 0 10px 10px;
}

Hetzelfde kun je met margin doen. Het is wel belangrijk dat je de juiste volgorde aanhoudt. Je begint altijd met 'top'. In dit voorbeeld dus 5px. En dan ga je met de klok mee: right, bottom, left.
Let in bovenstaand voorbeeld ook op de right padding van 0px. Je mag bij de waarde 0 de toevoeging 'px' altijd weglaten.

Nog één voorbeeld van een veelgebruikte shorthand stijlregel. Voor het beschrijven van een achtergrond voor een bepaald element kun je de volgende declaratie gebruiken:

CSS: div#header{
background-color: #CCCCCC;
background-image: url(images/bg.gif);
background-position: top right;
background-repeat: no-repeat;
}

Of dit:

CSS: div#header{
background: #CCC url(images/bg.gif) top right no-repeat;
}

Ik heb hier de belangrijkste regels voor het schrijven van CSS behandeld. Er is natuurlijk nog veel meer over te zeggen, veel meer dan ik hier kan behandelen. Ik denk dat het belangrijk is dat je ermee aan de slag gaat en zelf dingen gaat uitproberen.

Kijk hier voor een uitgebreide lijst van CSS eigenschappen en hun mogelijke waarden.

naar het begin van de pagina