Studieanker

# Opmaak met CSS

Logo CSS

# Stijlbladen

Een HTML-document zonder CSS ziet er vaak saai uit. Hoewel de browsers zelf standaardopmaak toepassen op verschillende elementen, zoals grotere tekst voor koppen of cursief voor <address> blokken, is de rest van de opmaak volledig afwezig. Om dit te remediëren en een webpagina te voorzien van allerlei soorten opmaak gebruik je CSS (Cascading Style Sheets).

Een CSS stijlblad bevat stijlregels. Een stijlregel wordt toegpast op één of meerdere elementen die je selecteert op een pagina. Een kleine opsomming van wat je met CSS allemaal kan doen:

  • Tekst- en achtergrondkleur
  • Tekststijl (vet, cursief, onderlijnd, ...)
  • Lay-out opstellen (header, navigatie, inhoud, footer, ...)
  • Animaties toevoegen (beweging, vervagen, ...)
  • En nog 101 dingen!

# Stijlregels

Een stijlregel bestaat uit twee delen: een eigenschap en een waarde. De eigenschap is wat je wil veranderen (kleur, lettertype, ...) en de waarde is het gewenste resultaat.

De syntax (code grammatica) van een stijlregel ziet er als volgt uit:

eigenschap: waarde;

Je kan zoveel stijlregels onder elkaar schrijven als je maar wil, zolang elke regel beëindigd wordt met een ; (puntkomma).

Om bijvoorbeeld de tekstkleur naar rood te veranderen:

color: red;

De tekstgrootte veranderen:

font-size: 48px;

Een vaste breedte geven aan een blok:

width: 400px;

# Selectoren

Je kan een stijlregel pas toepassen als je eerst selecteert welke HTML-elementen op een pagina in aanmerking moeten komen voor de nieuwe opmaak. Anders zou alle tekst op een pagina van kleur veranderen of de tekstgrootte van alle letters even groot zijn.

Er bestaan verschillende soorten selectoren, maar de eenvoudigste is de rechtstreeks element selector die alle elementen van een bepaald type op een pagina selecteert. De syntax hiervoor is eenvoudig:

elementnaam {
    // Stijlregels
}

Om dus bijvoorbeeld de tekstgrootte van alle <h1> elementen te veranderen:

h1 {
    font-size: 48px;
}

Om de tekstkleur van alle paragrafen aan te passen, maar de koppen met rust te laten:

p {
    color: red;
}

# Stijlregels laden

Je kan de stijlregels in aparte bestanden .css bestanden schrijven en hiernaar refereren binnen een HTML-pagina of de stijlregels rechtstreeks opnemen in het HTML-bestand onder een <style> element.

# Intern stijlblad

Het <style> element hoort thuis in de <head> sectie van een HTML-document. Tussen de openings- en sluitingstag kan je zoveel selectoren en stijlregels schrijven als je wil.








 
 
 
 
 
 
 
 
 







<!DOCTYPE html>
<html lang="nl-BE">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Intern stijlblad</title>
    <style>
        p {
            color: blue;
        }

        h1 {
            font-size: 48px;
        }
    </style>
</head>
<body>
    <h1>Intern stijlblad</h1>
    <p>Deze tekst wordt blauw!</p>
</body>
</html>

# Externe stijlbladen

Een HTML-bestand dient in principe om HTML in te schrijven. Het is dus vaak interessanter om de CSS in een apart .css bestand te schrijven en naar dit bestand te refereren binnen de HTML-pagina. Dit zorgt er ook voor dat de CSS-stijlregels op meerdere webpagina's kunnen hergebruikt worden zonder ze te moeten kopiëren van pagina naar pagina.

Maak een HTML-bestand met naam extern.html en een CSS-bestand met naam stijl.css. in dezelfde map. De naam die je voor de bestanden kiest speelt geen rol, maar moet je wel onthouden om de referentie tot stand te brengen.

Binnen de <head> sectie van het HTML-bestand plaats je vervolgens een <link> element. Het is een leeg element en heeft dus enkel een openingstag.








 







<!DOCTYPE html>
<html lang="nl-BE">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Extern stijlblad</title>
    <link rel="stylesheet" href="stijl.css">
</head>
<body>
    <h1>Interne stijlbladen</h1>
    <p>Deze tekst wordt blauw!</p>
</body>
</html>

Het CSS-bestand stijl.css vul je met dezelfde stijlregels als in het vorige voorbeeld:

p {
    color: blue;
}

h1 {
    font-size: 48px;
}

Het resultaat als je de HTML-pagina in de browser opent zou identiek moeten zijn aan het interne stijlblad, maar je hebt nu een betere organisatie voor de twee verschillende technologieën!

← HTML-attributen →