Omslag van 'Webtechniek voor niet-techneuten'

5. CSS

CSS staat voor Cascading Style Sheets. In de CSS is de opmaak van de teksten en andere onderdelen van de site vastgelegd.

5.1 CSS: opmaken van tekst en lay-out

In de CSS is vastgelegd welke opmaak er hoort bij welke tag, bijvoorbeeld bij de h1:

h1 {
font-size:1.3em;
font-weight:bold;
}

In bovenstaande CSS-code staat:

  • De grootte van de tekst van de h1 is 1,3 x de standaardgrootte
  • De tekst is vetgedrukt.

De browser voegt de HTML samen met de CSS tot een leesbare en opgemaakte titel.

HTML-code en CSS-opmaak worden samengevoegd tot een opgemaakte tekst op de webpagina

Het werken met stylesheets (CSS) is heel handig, want je kunt zo op één plek vastleggen hoe de opmaak in je site moet zijn. In feite definieer je met de CSS de huisstijl van de website. Ook leg je bijvoorbeeld posities van blokken tekst en afbeeldingen vast.

De CSS regelt onder andere de opmaak van:

  • lettertypes
  • tekstkleur
  • achtergrondkleur
  • alinea-afstand
  • positie tekst en andere elementen , zoals afbeeldingen
  • weergave knoppen in formulier

5.2 Werken met classes en id's

De standaard HTML-elementen, zoals de p (alinea) en de h1, kun je via de CSS opmaken door in de CSS dit element op te nemen en hier een opmaak aan toe te voegen, zoals we in het voorbeeld hierboven van de h1.

Daarnaast kun je de elementen ook opmaken door aan het element een class of id toe te voegen, bijvoorbeeld:

<p class="date">
<div id="summary">

In de CSS staat dan:

.date {
color: #333;
}
#summary {
font-weight:bold;
}

Een id mag je maar 1 keer op een pagina gebruiken, een class kun je meerdere keren gebruiken. Dus de code hieronder is niet goed:

<p id="space">Stukje tekst</p>
<p id="space">Foutief gebruik: 2 x dezelfde id gebruikt op 1 pagina.</p>

En deze code is goed:

<p class="space">Stukje tekst</p>
<p class="space">Correct gebruik: een class mag meerdere keren op 1 pagina gebruikt worden.</p>

Deze classes en id's zijn niet alleen handig voor het koppelen van de CSS aan de HTML. Ze worden ook gebruikt om bijvoorbeeld betekenis en gedrag aan de elementen toe te voegen. De betekenis is ook belangrijk voor zoekmachines, want die weten dan ook wat zo'n tekst betekent.

5.3 Opnemen van de CSS

De CSS kun je op 3 manieren koppelen aan je website:

  1. Inline style: CSS-code in de HTML-tag
  2. Interne stylesheet: CSS-code als blok in de head van de pagina
  3. Externe stylesheet: CSS als los bestand

Voor de duidelijkheid: dé manier om CSS te koppelen is methode 3: de CSS plaatsen in een los bestand. CSS is opmaakcode en die hoort niet in de HTML te staan. Omdat de andere methodes vaak voorkomen en het goed is dat je ze herkent, bespreken we ze hier allemaal.

Inline style: CSS-code in de HTML-tag

De CSS-code is geplaatst in het style-attribuut:

<p style="margin-bottom:1.2em">Stukje tekst&lkt;/p>

Als je een stukje tekst uit Word direct plakt in het CMS is dit vaak het gevolg: de opmaakcode vanuit Word is mee gekopieerd en staat ook in de webpagina.

De oplossing is vaak om de HTML-modus van de editor te kiezen en het style-attribuut met de stijldefinitie weg te halen. Dat vereist wel enige kennis van HTML ... (vandaar ook dit e-book)

Opgeschoond ziet bovenstaand voorbeeld er dan zo uit:

<p>Stukje tekst</p>

De nadelen van het opnemen van CSS via een inline style zijn:

  • Opmaak staat toch in de HTML, aanpassen opmaak moet in elke pagina.
  • Opmaak niet aanpasbaar per apparaat (desktop, mobiele telefoon enz.).
  • Gebruiker kan geen eigen opmaak kiezen.

Interne stylesheet: CSS als stijlblok in de head

De 2e manier is om de CSS in een stijlblok op te nemen in de head. Dat kun je doen met het style-element:

<head>
[…]
<style>
p {margin-bottom:1.2em;}
</style>
[...]
</head>

Ook aan deze manier van het koppelen van CSS zitten nadelen:

  • Opmaak staat toch in de HTML, aanpassen opmaak moet in elke pagina.
  • Gebruiker kan geen eigen opmaak kiezen.

Externe stylesheet: CSS als extern bestand

Zoals gezegd, dé manier om de CSS te koppelen aan de pagina is de CSS op te nemen in een apart bestand en in het head-gedeelte van de pagina te verwijzen naar dit bestand. In code ziet dat er bijvoorbeeld zo uit:

<link rel="stylesheet" href="../styles/default.css" type="text/css" media="screen">

Als je nu een alinea op een bepaalde manier opgemaakt wilt hebben, hoef je alleen in de CSS de opmaak voor p-element op te nemen:

p {
margin-bottom:1.2em;
}

Ook kun je met een class of id bij het element opnemen. Via de CSS kun je hier dan opmaak aan toevoegen. Dus bijvoorbeeld in de HTML voeg je de class 'summary' toe:

<p class="summary">Stukje tekst</p>

In de CSS staat dan de volgende code:

.summary {
margin-bottom:1.2em;
font-weight:bold;
}

Voordelen van het gebruik van een externe stylesheet zijn:

  • Opmaak kan eenvoudig worden aangepast, want een aanpassing hoef je maar 1 keer te doen.
  • Opmaak kan gevarieerd worden afhankelijk van de beeldschermgrootte (responsive design).
  • Gebruiker kan zijn eigen opmaak kiezen. Bijvoorbeeld mensen die last hebben van hele witte vlakken kunnen een grijze achtergrond kiezen. Of kiezen voor witte tekst op een zwarte achtergrond.

5.4 Responsive design

Met responsive design wordt bedoeld dat de lay-out van de website zich aanpast aan de grootte van het beeldscherm waarop de website wordt getoond. Dat is met name belangrijk als de website getoond wordt op kleinere schermen, zoals op een mobiele telefoon. Voor een groot deel wordt deze lay-outaanpassing gedaan met CSS. Bij een lagere resolutie zorgt de CSS ervoor dat de lay-out wordt gewijzigd.

Hieronder zie je een voorbeeld: de 1e afbeelding toont onze website op een gewone desktopmonitor.

weergave op desktopmonitor (hoge resolutie)

In de afbeelding hieronder zie je de lay-out op een lage resolutie, zoals een mobiele telefoon dat heeft. Je ziet dat bij de mobiele de content herschikt is en het menu is weggelaten, zodat de bezoeker zo snel mogelijk de primaire content van de pagina te zien krijgt.

weergave op lage resolutie zoals mobiel of tablet

5.5 Testen op correcte CSS

  • Ga naar de pagina die je wilt testen.
  • Ga naar Web Developer » Tools » Validate CSS.
  • Bekijk de errors en eventueel de warnings.
top

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.