We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS (Cascading Style Sheets of Waterval Stijlbestanden) is de code die u gebruikt om uw webpagina van stijlen te voorzien. In De Basisbegrippen van CSS nemen we alles door wat u 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 u toestaat om stijlen op geselecteerde elementen in uw HTML-documenten toe te passen. Om bijvoorbeeld, alle paragraaf-elementen in uw HTML-pagina te selecteren en de tekst erin rood te maken, zou u deze CSS schrijven:

p {
  color: red;
}

Probeer het eens: kopieer deze drie CSS-regels in een nieuw bestand in uw broncode-editor. Dan noemt u het bestand stijl.css en slaat u het op in uw stijlbladenmap.

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

  1. Open uw 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 uw browser. U 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 uw paragraaf nu rood is, kan ik u feliciteren; u hebt nu uw 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, verandert u gewoon de selector.
Stijldeclaratie (declaration)
Een stijldeclaratie is enkele stijlregel, zoals color: red;. De declaratie bepaalt welke eigenschappen (properties in het Engels) van het element een stijl zullen krijgen.
Eigenschappen (properties)
Met eigenschappen kunt u een HTML-elementstijlen (In dit geval is color een eigenschap van de p-elementen). Met CSS kunt u de eigenschappen kiezen die u met uw regel wilt 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 u een dubbele punt  (:) gebruiken om de eigenschap van zijn stijlwaarden te scheiden.
  • Binnen elke regelset, moet u een puntkomma (;) gebruiken om elke stijldeclaratie van de volgende te scheiden.

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

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

Meerdere elementen selecteren

U kunt 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-document 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 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 u 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 u er met uw 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 u kunt 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, gaat u terug en vindt u de code van Google Fonts die u 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 verwijdert u de regel die in uw 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 u hieronder in het voorbeeld ziet, terwijl u de tijdelijke aanduiding door het lettertype (i.e. de 'font-family'-regel) vervangt die u uit Google Fonts hebt gehaald. ('font-family' betekent gewoon een of meerdere lettertypes die u voor uw tekst wilt 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 u uit Google fonts hebt gehaald
    }

    Opmerking: In het voorbeeld hierboven is er 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 u waar u nuttige opmerkingen kunt schrijven over de code waar u 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;
    }

U kunt deze px-waarden afstemmen tot u het ontwerp hebt dat u wilt, 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 u zult merken als u CSS-code schrijft. Heel vaak gaat die over dozen  — hoe u hun grootte, kleur, positie, enz. instelt. De meeste van de HTML-elementen op uw 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 verrassing dat CSS-opmaak hoofdzakelijk op het doos-model is gebaseerd. Elk van de blokken, die plaats innemen op uw pagina, heeft eigenschappen zoals die hieronder:

  • padding, (vulling, wattering) de ruimte die juist rond de inhoud zit  (bijvoorbeeld 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 (maakt u zich hier nog geen zorgen over) 

We gaan beginnen met nog meer CSS-toevoegingen aan onze pagina! Voeg al deze nieuwe regels toe onderaan uw 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 u kiest als u het ontwerp van uw 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 u 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). U kunt 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. Er is een soort van roodachtig oranje voor de body gebruikt in tegenstelling tot donkerblauw voor het  html-element. Gaat uw gang en experimenteer.  Gebruik wit of eender welke kleur die u 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 u 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 u 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 u zoal kunt 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: Maakt u zich geen zorgen als u display: block; en het block/inline verschil nog niet begrijpt. Dat komt als u CSS grondiger bestudeert. U kunt meer over de verschillende display-waarden ontdekken op onze display referentiepagina.

Conclusie

Als u alle instructies in dit artikel hebt gevolgd, zou u een pagina moeten hebben gemaakt die er ongeveer zo uitziet  (U 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 u vast komt te zitten, kunt u uw werk altijd vergelijken met onze voltooide voorbeeldcode op Github.

Hier hebben we u 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: evelijn, mientje
Laatst bijgewerkt door: evelijn,