MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

De basisbegrippen van CSS

CSS (Cascading Style Sheets of Waterval Stijlbestanden) is de code die je gebruikt om je webpagina van stijlen te voorzien. In De Basisbegrippen van CSS nemen we alles door wat je nodig hebt om te beginnen. We beantwoorden vragen zoals : Hoe maak ik mijn tekst zwart of rood? Hoe laat ik mijn inhoud op die en die plaats in het scherm verschijnen? Hoe versier ik mijn webpagina met afbeeldingen en kleuren?

Dus wat is CSS eigenlijk?

Zoals HTML is CSS  niet echt een programmeertaal. Het is ook geen opmaaktaal. Het is een stijlbladtaal, dat wil zeggen, dat het je toestaat om stijlen op geselecteerde elementen in je HTML-documenten toe te passen. Om bijvoorbeeld, alle paragraaf-elementen in je HTML-pagina te selecteren en de tekst erin rood te maken, zou je deze CSS schrijven:

p {
  color: red;
}

Probeer het eens: kopieer deze drie CSS-regels in een nieuw bestand in je broncode-editor. Dan noem je het bestand stijl.css en sla je het op in je stijlbladenmap.

Maar we moeten de CSS nog op je HTML-document toepassen, anders zal de CSS-stijl geen effect hebben op de manier waarop je browser het HTML-document weergeeft.  (Als je niet aan ons project hebt meegedaan, lees dan eerst Omgaan met Bestanden en Basisbegrippen HTML zodat je weet wat je eerst moet doen.)

  1. Open je index.html bestand en plak de volgende lijnen ergens in het hoofd, dat wil zeggen tussen de <head> en </head>-labels:
    <link href="stijlen/stijl.css" rel="stylesheet" type="text/css">
  2. Sla index.html op en laadt het in je browser. Je zou iets moeten zien dat er ongeveer zo uitziet:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

Als de tekst van je paragraaf nu rood is, kan ik je feliciteren; je hebt nu je eerste succesvolle CSS geschreven! 

Anatomie van een set CSS-regels

We gaan de CSS hierboven wat grondiger bekijken:

De hele structuur wordt een regel-set (een rule set in het Engels) genoemd (maar vaak afgekort tot "stijlregel", i.e. "rule"). Elk onderdeel heeft ook zijn eigen naam:

Selector
Dit is de HTML-elementnaam aan het begin van de regelset. Het selecteert de elementen waarop een stijl zal worden toegepast (in dit geval p-elementen). Om een ander element een stijl te geven, verander je gewoon de selector.
Stijldeclaratie (declaration)
Een enkele stijlregel zoals color: red; De declaratie bepaalt welke eigenschappen (properties in het Engels) van het element een stijl zullen krijgen.
Eigenschappen (properties)
De manieren waarop je een HTML-element kan stijlen. (In dit geval is color een eigenschap van de p-elementen.) Met CSS kan je de eigenschappen kiezen die je met je regel wil beïnvloeden. 
Stijlwaarden (property values)
Aan de rechterkant van de eigenschap, na de dubbele punt (:), vinden we de stijlwaarde die per eigenschap vele verschillende gedaantes kan aannemen (behalve rood, zijn er nog vele andere kleuren).

Dit zijn de andere belangrijke delen van de syntax:

  • Elke regelset (behalve de selector) moeten worden ingesloten tussen accolades ({}).
  • Binnen elke stijldeclaratie , moet je een dubbele punt  (:) gebruiken om de eigenschap van zijn stijlwaarden te scheiden.
  • Binnen elke regelset, moet je een puntkomma (;) gebruiken om elke stijldeclaratie van de volgende te scheiden.

Dus om meerdere stijlwaarden tegelijk te gebruiken, moet je ze apart en gescheiden door puntkomma's schrijven zoals hieronder:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Meerdere elementen selecteren

Je kan meerdere elementtypes selecteren en één enkele regel op hen allemaal toepassen. Ze worden met komma's van elkaar gescheiden. Bijvoorbeeld:

p,li,h1 {
  color: red;
}

Verschillende selectortypes

Er zijn vele verschillende selectortypes. Hierboven hebben we enkel elementselectoren bekeken. Dit zijn selectoren die alle elementen van een bepaald type in een HTML-documents selecteren. Maar we kunnen veel preciezer dan dat selecteren. Hieronder volgende de gebruikelijkste selectortypes:

Selectornaam Wat het selecteert Voorbeeld
Elementselector (soms een label of typeselector genoemd) Alle HTML-elementen van het gekozen type. p
selecteert <p>
ID-selector Het element op de pagina die het ID als attribuut heeft gekregen (in een HTML-pagina is je slechts 'één element per ID toegestaan). #my-id
selecteert <p id="my-id"> of <a id="my-id">
Class-selector Een of meerdere elementen op de pagina die een specifieke class als attribuut hebben gekregen. (In het Nederlands is dit een klasse maar je moet het Engelse 'class' als selector gebruiken.)   (verschillende elementen kunnen dezelfde klasse krijgen ). .my-class
selecteert <p class="my-class"> en <a class="my-class">
Attribuut- selector Een of meerdere elementen op de pagina met het specifieke attribuut.  img[src]
selecteert <img src="myimage.png"> maar niet <img>
Pseudo-class selector Een of meerdere gekozen elementen maar enkel als ze zich in een specifieke staat bevinden, bijvoorbeeld als je er met je muis overheen beweegt (dat is "hover" in het Engels).  a:hover
selecteert <a>, maar enkel als de muis over de hyperlink heen beweegt.

Er zijn nog veel meer selectoren om te onderzoeken en je kan er een gedetailleerde lijst van vinden in onze Selectorengids.

Lettertypes en tekst

Nu we een inleiding op CSS hebben verwerkt, kunnen we meer stijlregels en informatie aan ons stijl.css bestand toevoegen om ons voorbeeld er mooi uit te laten zien. Eerst gaan we aan onze lettertypes en tekst werken.

  1. Om te beginnen, ga je terug en vind je de code van Google Fonts die je ergens veilig hebt opgeslagen. Voeg het  <link ... >-element in het hoofd van index.html toe (opnieuw, ergens tussen de <head> en </head>-labels). Het zal er ongeveer zo uitzien:
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  2. Dan verwijder je de regel die in je stijl.css bestand staat. Die regel was een goede test, maar rode tekst ziet er eigenlijk echt niet goed uit. 
  3. Vervang de verwijderde regel door de regels die je hieronder in het voorbeeld ziet, terwijl je de tijdelijke aanduiding door het lettertype (i.e. de 'font-family'-regel) vervangt die je uit Google Fonts hebt gehaald. ('font-family' betekent gewoon een of meerdere lettertypes die je voor je tekst wil gebruiken). Deze regel stelt een globaal basislettertype in en de lettergrootte voor de volledige pagina. ( <html> is het ouderelement van de volledige pagina en alle elementen die erin zitten erven hetzelfde lettertype en dezelfde lettergrootte):
    html {
      font-size: 10px; /* px betekent 'pixels': de basislettergrootte is nu 10 pixels hoog  */
      font-family: tijdelijke aanduiding: dit zou de rest van de stijlregel moeten zijn die je uit Google fonts hebt gehaald
    }

    Opmerking: In het voorbeeld hierboven heb ik een commentaar toegevoegd dat uitlegt wat  "px" betekent. Alles dat in een CSS-document tussen /* en */ staat is een CSS commentaar, dat de browser zal negeren wanneer het de code genereert. Dit is een plek voor jou waar je nuttige opmerkingen kan schrijven over de code waar je mee bezig bent.

  4. Nu gaan we de lettergroottes instellen voor elementen binnen het HTML body (<h1>, <li>, and <p>) die tekst bevatten. We gaan ook de tekst van onze hoofding centreren en de lijnhoogte en letterafstand op de inhoud van het body instellen om die wat leesbaarder te maken: 
  5. h1 {
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;
    }

Je kan deze px-waarden afstemmen tot je het ontwerp hebt dat jij wil maar in grote lijnen moet het er ongeveer zo uitzien :

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

Dozen, dozen, het gaat allemaal over dozen

Er is een ding dat je zal merken als je CSS-code schrijft. Heel vaak gaat die over dozen  — hoe je hun grootte, kleur, positie enz instelt. De meeste van de HTML-elementen op je pagina kunnen als dozen worden gezien die op elkaar zijn gestapeld.

a big stack of boxes or crates sat on top of one another

Het is dan ook geen verassing dat CSS-opmaak hoofdzakelijk op het doos-model is gebaseerd. Elk van de blokken, die plaats innemen op je pagina, heeft eigenschappen zoals die hieronder:

  • padding, (vulling, wattering) de ruimte die juist rond de inhoud zit  (bijv., rond de tekst van een paragraaf)
  • border, (boord) de volle lijn die zich rond de padding bevindt 
  • margin, (marge) de ruimte die rond de buitenkant van het element zit (dus ook rond de border)

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

In dit gedeelte gebruiken we ook:

  • width (breedte) van een element
  • background-color, (achtergrondkleur) de kleur die achter de inhoud en padding van een element zit
  • color, (kleur) de kleur van de inhoud van een element (meestal de tekst) 
  • text-shadow: (tekstschaduw) stelt een slagschaduw in op de tekst in een element
  • display: (weergave) stelt de weergavemodus van een element in (maak je hier nog geen zorgen over) 

We gaan beginnen met nog meer CSS-toevoegingen aan onze pagina! Voeg al deze nieuwe regels toe onderaan je pagina en wees niet bang om met de waarden van de eigenschappen te experimenteren. 

De kleur van de pagina veranderen

html {
  background-color: #00539F;
}

Deze regel stelt de achtergrondkleur van de hele pagina in. Verander de kleurcode hierboven in eender welke kleur die je kiest als je het ontwerp van je site plant.

Uitzoeken hoe de body in elkaar steekt

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

En dan nu het body-element. Er zijn nogal wat stijldeclaraties hier en we gaan er een per een doorheen:

  • width: (breedte) 600px; — dit dwingt de body om altijd 600 pixels breed te zijn.
  • margin: (marge) 0 auto; — Als je deze twee waarden op een eigenschap zoals margin of padding, instelt, zal de eerste waarde (in dit geval 0) de bovenkant en onderkant van het element bepalen en de tweede waarde (auto) de linker- en rechterkant van het element. (Hier is auto een speciale waarde die de beschikbare horizontale ruimte gelijk in een linkse en rechtse helft verdeelt). Je kan ook één, drie of vier waarden invullen, zoals hier verder wordt uitgelegd. 
  • background-color: #FF9500; — zoals reeds vermeld, stelt dit de achtergrondkleur van het element in. Ik heb een soort van roodachtig oranje voor de body gebruikt in tegenstelling tot donkerblauw voor het  html-element. Ga  je gang en experimenteer.  Gebruik wit of eender welke kleur die je bevalt. 
  • padding: (vulling) 0 20px 20px 20px; — we hebben deze vier waarden op de padding ingesteld om een beetje ruimte rond onze inhoud te maken. Deze keer stellen we geen padding in op de bovenkant van de body en 20 pixels op de linker-, onder- en rechterkant. De waarden stellen boven-., rechter-, onder-, en linkerkant in, in die volgorde.
  • border: (boord) 5px solid black; — dit stelt een volle zwarte boord in die 5px breed is rond alle zijden van de body .

Onze hoofdtitel positioneren en stijlen

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Het is je misschien al opgevallen dat er een afschuwelijk gat aan de bovenkant van de body zit. Dat gebeurt omdat browsers een default styling (een standaardstijl) op het <h1>- element  toepassen (en ook op andere), zelfs als je geen enkele CSS hebt ingesteld! Dat klinkt misschien als een slecht idee maar we willen dat een onopgemaakte pagina toch leesbaar is. Om van dat gat af te raken hebben we de default styling opgeheven door de  marge op 0 te zetten:  margin: 0;.

We gaan verder met de padding van de onder- en bovenkant van de grootste heading (dat is dus de hoofdtitel). Die hebben we 20 pixels gegeven en we hebben de tekst van de heading dezelfde kleur gegeven als de achtergrondkleur van de html.

We hebben hier een interessante eigenschap gebruikt: text-shadow, die past een slagschaduw toe op de tekstinhoud van het element. Het krijgt de volgende vier waarden:

  • De eerste pixelwaarde stelt de horizontale offset van de tekstschaduw in — hoe ver die van de letter weg beweegt: een negatieve waarde zou hem naar links moeten schuiven.
  • De tweede pixelwaarde stelt de verticale offset van de slagschaduw van de tekst in — hoe ver hij naar beneden beweegt, in dit voorbeeld zou een negatieve waarde de tekstschaduw naar boven moeten duwen.
  • De derde pixelwaarde stelt de troebelewaarde voor de omtrek (in het Engels blur radius) van de tekstschaduw in — een grotere waarde creëert een vagere schaduw.
  • De vierde waarden bepalen de basiskleur van de schaduw.

Probeer opnieuw met verschillende waarden te experimenteren en kijk eens wat je zoal kan bedenken.

Het beeld centreren

img {
  display: block;
  margin: 0 auto;
}

Tot slot zullen we de afbeelding centreren zodat die er beter uitziet. We zouden opnieuw de margin: 0 auto truck kunnen we gebruiken zoals we dat voor de body hebben gedaan, maar we moeten ook iets anders doen. Het body-element zit namelijk op block niveau, wat wil zeggen dat het ruimte inneemt op de pagina en margin-waarden kan krijgen (het kan ook andere waarden krijgen die de afstand tussen elementen bepalen).  Afbeeldingen, daarentegen, zijn inline elementen, wat wil zeggen dat zij dat niet kunnen. Dus, om de afbeelding marges te kunnen geven, moet het beeld zich gedragen als een element op block niveau. We doen dat met  display: block;.(display is weergave in het Nederlands)

Opmerking: Maak je geen zorgen als je display: block; en het block/inline verschil nog niet begrijpt. Dat komt als je CSS grondiger bestudeert. Je kan meer over de verschillende display-waarden ontdekken op onze display referentiepagina.

Conclusie

Als je alle instructies in dit artikel hebt gevolgd, zou je een pagina moeten hebben gemaakt die er ongeveer zo uitziet  (je kan ook onze versie hier bekijken):

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

Als je vastraakt, kan je je werk altijd vergelijken met onze voltooide voorbeeldcode op Github.

Hier hebben we je niet meer dan de eerste stappen op het CSS-pad laten zetten. Ga naar onze CSS Learning topic om meer te ontdekken.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: mientje
 Laatst bijgewerkt door: mientje,