CSS voor beginners

Na een namiddag HTML voor beginners was het nu tijd om CSS eens van dichterbij te bekijken.

CSS staat voor Cascading Style Sheets en wordt gebruikt om webpagina's van opmaak te voorzien. Daar waar HTML staat voor structuur, zorgt CSS dus voor opmaak.

In deze les hebben we wat eenvoudige CSS geschreven, om onze webpagina er wat leuker te doen uitzien:

Het lettertype en kleur van de tekst werden aangepast en we hebben een Belgische vlag toegevoegd. 🇧🇪

Een CSS-bestand linken

Om een CSS-bestand aan een HTML-document te koppelen, maken we gebruik van het link-element. Dat gaat dan als volgt, de code die we hadden:

<head>
    <title>Rode Duivels</title>
</head>

... wordt dan...

<head>
    <link href="style.css" rel="stylesheet">
    <title>Rode Duivels</title>
</head>

In het tweede codeblokje voegen we een link-element toe, waardoor we de link leggen naar het CSS-bestand. Eenvoudig, toch? 😀

CSS schrijven

Tijd om CSS te schrijven! Maak een bestand aan en noem het dus style.css. Open het in je favoriete editor en zet er volgend stukje code in:

a {
    color: red;
    text-decoration: none;
}

Zorg ervoor dat je al je wijzigingen opslaat en open de webpagina in je browser. Als alles goed zit, zijn alle links die je hebt gemaakt (de a-elementen), nu rood.

We bekijken de code die we hebben geschreven even van dichtbij. CSS bestaat altijd uit volgende stukken:

  • Een selector (element, class of id)
  • Declaration block met daarin:
    • properties
    • values

De selector hier is a, alles tussen de accolades zijn css-properties met hun values, bijvoorbeeld de property color met de value red.

Op deze manier selecteer je dus een HTML-element, en geef je een bepaalde waarde aan een van de eigenschappen ervan.

Selecteren met classes

Er zijn nog twee belangrijke manieren om elementen uit je HTML te selecteren binnen CSS, de eerste daarvan is het toekennen van een 'class'. Bekijk even volgend stukje HTML:

<table>
    <tr>
        <td class="deel1">De</td>
        <td class="deel2">Rode</td>
        <td class="deel3">Duivels</td>
    </tr>
</table>

Een tabel met één rij, met daarin drie cellen met tekst. Deze cellen hebben elk hun eigen class meegekregen door class="yourclassname" toe te voegen. Elk element op je pagina kan je een of meerdere classes geven, de naam mag je zelf kiezen.

In je CSS gebruik je een class zo:

.deel1 {
    background-color: black;
    color: red;
}

.deel2 {
    background-color: yellow;
    color: black;
}

.deel3 {
    background-color: red;
    color: yellow;
}

Je gebruik een punt en de naam van de class als selector, de rest blijft hetzelfde: properties en values.

Als we dan nog wat extra styling aan de tabel toevoegen, zou die er moeten uitzien als de Belgische vlag.

table {
    width: 600px;
    height: 200px;
}

td {
    width: 200px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: Helvetica;
}

Gelukt? Als er iets niet meteen werkt, niet opgeven, alles goed controleren en blijven proberen!

Selecteren met Id's

De laatste manier om elementen te selecteren is het gebruik van Id's. Een voorbeeld:

<p id="adres">Rode Duivels<br>
Koning Boudewijstadion 1 <br>
1000 Brussel</p>

We hebben de paragraaf (p-element) hier het id 'adres' gegeven. Dat gaat op een gelijkaardige manier als bij de classes: id="youridname".

In CSS gebruik je het ID zo:

#adres {
    font-family: Times;
    color: darkblue;
    font-style: italic;
}

Je gebruikt een hekje en de naam van het id als selector, de rest van de css-code blijft weer hetzelfde: properties met values om de eigenschappen van het element te selecteren.

Verschil tussen classes en id's

Wanneer zou je nu een class gebruiken en wanneer een id? Wel, de theorie daarachter is eigenlijk heel eenvoudig: een class mag meerdere keren gebruikt worden in je code, een id mag slechts een keer voorkomen op elke HTML-pagina.

Om dit goed te kunnen onthouden kan je volgend voorbeeld gebruiken: elke leerling in de school heeft een uniek rijksregisternummer, maar kan wel samen met anderen in een klas zitten (bijvoorbeeld klas 4B).
Je kan het rijksregisternummer (id) dus gebruiken om een specifieke leerling (element) te selecteren. De naam van de klas (class) kan je gebruiken om een of meerdere leerlingen te selecteren.

Het eindresultaat

Wil je verder experimenteren, of alles eens van dichtbij bekijken? Dan kan je hier alle bestanden en code downloaden.

Laat hieronder gerust een berichtje achter als er iets niet duidelijk is.
Veel css-plezier! 😊