Cursus – CSS voor beginners

In dit artikel ga ik je de basis geven van CSS. CSS is de afkorting voor Cascading Stylesheets. Vertaald is dit ’trapsgewijze stijlbladen’. Over het trapsgewijze ga ik het later wel hebben. In dit eerste artikel wil ik je de basis geven van CSS, waaruit bestaat CSS, hoe is het opgebouwd en wat kun je er mee.

Vervolgens ga ik een aantal voorbeelden geven hoe je CSS kunt toepassen en kunt gebruiken, zodanig dat je er ook wat aan hebt. Al met al wil ik je een goede basis geven zodat je de voordelen van CSS ziet ten opzichte van het verwerken van stijlen in HTML.

CSS is voor de opmaak van een html document

Met de komst van CSS veranderde er veel. Eerst was er eigenlijk helemaal geen sprake van opmaak voor internetpagina’s. Tenslotte was internet bedoeld om tekst informatie door te geven en daar was opmaak helemaal niet voor aan de orde.

Toen er op een gegeven moment wat opmaak kon toegevoegd worden aan de eerste browsers werd deze opmaak in de html code ingepast. Zo heb je bijvoorbeeld de tag <b> om letters vetgedrukt te maken, de <i> om letters schuingedrukt te laten zien. Wilde je bepaalde tekst rood weergeven dan maakte je gebruik van de volgende code: <font color=”red”>. Een achtergrond kleur bepaalde je met bgcolor enzovoort.

Opmaak op de ouderwetse manier is onhandig

Het frappante is dat er nog ongelooflijk veel websites op deze manier voorzien worden van kleur en grootte en dergelijke terwijl het hier om al oude manieren gaat.

Het grote nadeel van deze manier van werken was, dat als je een grotere website kreeg en je wilde een rood lettertype omzetten naar een blauwe letter, je alle pagina’s een voor een af moest gaan en steeds dezelfde regel moest aanpassen.

Nu is dat voor 1 regel niet zo moeilijk, maar als er meer van deze regels in de code staan wordt het allemaal onoverzichtelijk.

Beperkte opmaak mogelijkheden

Daarnaast waren de mogelijkheden wel wat beperkt qua aanpassingen. Dus het werd tijd voor een andere aanpak.

Met de introductie van CSS waren er ineens veel meer mogelijkheden. Dit is een extern document wat je kunt koppelen aan een html document en waarmee je de opmaak regelt. Het gaat alleen maar om de opmaak van het html document en niet om allerlei toepassing. Daarvoor gebruik je bijvoorbeeld javascript.

Gebruik CSS voor de opmaak

Tegenwoordig is het noodzaak dat je CSS gebruikt. Geen gedoe meer met interne stijlen in een html document, je moet HTML en CSS gescheiden houden.

Om CSS aan een HTML document te koppelen moet in de head van een HTML document dit externe stijlblad aanroepen. Daarmee vertel je de browser in feite hoe deze de html codes moet weergeven.

Dit doe je als volgt:

Je ziet dat de 6e regel de link bevat naar een stijlblad. Dit stijlblad staat in een aparte map. Je kunt namelijk ook stijlbladen maken voor bijvoorbeeld te printen pagina’s en mobiele telefoons. Het is daarom handig om stijlbladen in een aparte map te zetten.

Een andere extentie

Een stijlblad krijgt ook een andere extentie.
.css
Daarmee wordt het document als stijlblad gezien en dus ook toegepast.

Selector en declaratie

Een stijlblad wordt gevuld met selectoren en declaraties. Wat dat zijn? Dat ga ik nu uitleggen.

De selector verwijst naar het html element. In ons voorbeeld de h1-tag. Vervolgens staan er twee declaraties. De eerste is color, wat de letterkleur bepaald, de tweede is font-size, wat de lettergrootte bepaald.

Declaraties staan in een stijlblad tussen accolades. { als begin en } als einde. Tussen twee declaraties plaats je een punt-komma ; .

Een declaratie is onderverdeeld in de eigenschap, dat wil zeggen ‘wat ga je aanpassen’. De waarde is de aanpassing zelf. Dus in ons voorbeeld krijgt iedere h1 tag een rode kleur en een lettergrootte van 12 pixels. Tussen de eigenschap en de waarde staat een dubbele punt : .

Class en id

Dit kun je dus voor ieder html element toepassen. Maar natuurlijk wil je dat lang niet altijd. Soms wil je een klein stukje tekst rood laten worden, of een alinea vetgedrukt laten overkomen.

Daar zijn classes en id’s voor in het leven geroepen.

Je kunt ieder html element een class of id meegeven. Er is een verschil tussen deze twee. Een class mag meerdere keren op een webpagina voorkomen, een id maar een keer.

Een id wordt gebruikt om onderdelen van een webpagina te benoemen, bijvoorbeeld het menu, of het artikel zelf. Een class wordt meer gebruikt om algemene onderdelen te benoemen zoals plaatje links of plaatje rechts.

Een voorbeeld hiervan:

...
...

De eerste alinea (<p>) krijgt een id mee. Een menu komt meestal maar een keer voor op een pagina. De tweede alinea krijgt een class mee, een belangrijk stuk tekst kan vaker voorkomen op een pagina.

Praktische toepassing van class en id

Vervolgens kun je deze twee laten terugkomen in je stijlblad. Een id komt op de volgende manier terug:

#menu {font-size: 13px; font-weight: bold;}

Een id wordt dus aangeroepen met een hekje #.

De class wordt aangeroepen met een punt .
Dat gaat als volgt:

.belangrijk {color: green; font-weight: bold; font-style: italic;}

Je kent nu de opzet van CSS. In het volgende artikel ga ik het hebben over verschillende stijlen die je kunt toepassen met CSS.