n00b pro

02. CSS design

Dit hoofdstuk is onderdeel van de cursus CSS. Andere cursussen in dezelfde reeks: HTML, Javascript, C#, Ontwikkelomgeving.

Youtube totaaldemo

Deze video's maken deel uit van een HTML + CSS totaaldemo uit de Basic Web Development playlist, die begint met de video BWD 01. HTML - deel 8: praktijkdemo

Header, footer & menus opmaken

https://www.youtube.com/watch?v=QXkjTonqPD0

Rem en em eenheden

https://www.youtube.com/watch?v=BiOo4lv_6Ag

Eenheden

CSS eenheden worden gebruikt voor afmetingen, margins, paddings, randdiktes en andere CSS properties.

eenheid type kennen gebruiken wordt gebruikt voor
px absoluut vaste afmeting; gebruik standaard deze eenheid
cm / mm / in / pt / pc / Q absoluut centimeter, millimeter, inch, punt, pica, kwart mm; enkel relevant in drukwerk
% relatief tov. parent percentage van parent waarde
fr fractie fractie van beschikbare ruimte (gebruikt in CSS Grid)
em relatief tov. font relatief t.o.v. element font-size; herschaalbare componenten
rem relatief tov. font "root em"; relatief t.o.v. <html> font-size; herschaalbare componenten
ch / ex / cap / ic / lh / lrh relatief tov. font relatief t.ov. '0' / 'x' / hoofdletter / '水' / regelhoogte / <html> regelhoogte
vw / vh relatief tov. viewport percentage viewport breedte / hoogte *
svw / svh, lvw / lvh, dvw / dvh relatief tov. viewport percentage small, large, dynamic viewport breedte / hoogte *
vmin / vmax relatief tov. viewport kleinste / grootste waarde van vw en vh *
svmin / svmax , lvmin / lvmax, dvmmin / dvmax relatief tov. viewport kleinste / grootste waarde van svw en svh / lvw en lvh / dvw en dvh *
w / h / i / b / min / max relatief tov. element percentage element breedte / hoogte / inline afmeting / ...
vw-i / vh-i / vi-i / vb-i / vmin-i / vmax-i logisch relatief t.o.v. de inline (of lees-) richting
vw-b / vh-b / vi-b / vb-b / vmin-b / vmax-b logisch relatief t.o.v. de block (of stapel-) richting

* Voor het onderscheid tussen smallest / largest / dynamic viewport afmetingen, zie o.a. deze pagina.

px

De px wordt gebruikt voor vaste afmetingen, zoals borders, kleine afbeeldingen, knoppen...:

input[type=submit] {
   border: 2px solid #666;
}
img.hamburger_icon {
   height: 22px;
   width: 22px;
}
.button {
   font-size: 14px;
   padding: 5px 10px;
}

→ dit is je standaard gebruikte eenheid

%

De % betekent percentage van parent. Typische use cases zijn:

Een samenvattend voorbeeld met twee kolommen, een afbeelding en een blockquote:

<body>
   <section>
      <h2>Gouden Buddha</h2>
      <p>Maak het browservenster smaller en smaller! Merk op:</p>
      <ul>
         <li>linkerkolom is 80% breed, rechterkolom is 20% breed</li>
         <li>afbeelding is 500px breed, maar nooit breder dan 100%</li>
         <li>de blockquote is altijd 70% breed</li>
      </ul>
      <img src="photo.jpg" alt="photo">
      <blockquote>"Three things cannot be long hidden: the sun, the moon, and the truth." – Buddha</blockquote>
   </section>
   <aside>
      aside content hier...
   </aside>
</body>
body {
   display: flex; /* zie onderdeel 04. layout */
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body > section {
   padding: 20px;
   width: 80%;
}
body > aside {
   background-color: #ffe;
   padding: 20px;
   width: 20%;
}
img {
   max-width: 500px;
   width: 100%;
}
blockquote {
   background-color: #eee;
   border: 4px dashed #666;
   margin: 20px auto;
   padding: 10px;
   width: 70%;
}

→ je kan % in principe ook gebruiken voor andere properties als font-size, padding e.d. maar daar is em gebruikelijker
→ gebruik % in deze cursus dus enkel voor afmetingen!

em

In CSS heeft em twee betekenissen:

Het voordeel van em is dat je componenten kunt laten meeschalen met de tekstgrootte van de parent. Een voorbeeld waarin px en em vergeleken wordt, zie demo:

<body>
   <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley ...</p>
   <div class="review-px">
      <h3 class="review-title">Great hotel! (px versie)</h3>
      <p>
         In friendship diminution instrument so. Son sure paid door with
         say them. Lorem ipsum dolor sit amet, consectetur adipiscing elit!
      </p>
      <img src="mugshot.jpg" alt="avatar">
      <footer>
         <p>by John Doe on <span class="date">2019-01-01</span></p>
      </footer>
   </div>
   <p>Yarrow ricebean rutabaga endive cauliflower sea lettuce ...</p>
   <div class="review-em">
      <h3 class="review-title">Great hotel! (em versie)</h3>
      <p>
         In friendship diminution instrument so. Son sure paid door with
         say them. Lorem ipsum dolor sit amet, consectetur adipiscing elit!
      </p>
      <img src="mugshot.jpg" alt="avatar">
      <footer>
         <p>by John Doe on <span class="date">2019-01-01</span></p>
      </footer>
   </div>
</body>

body {
   font-size: 16px; /* pas deze waarde aan en de em versie schaalt mee! */
}

/* px versie */
.review-px {
   border: 2px dotted #ccc;
   font-size: 14px;
   max-width: 280px;
   padding: 7px;
}
.review-px .review-title {
   font-size: 16.8px;
}
.review-px p {
   font-size: 14px;
}
.review-px img {
   width: 56px;
}
.review-px footer {
   font-size: 11.2px;
}
.review-px .date {
   font-size: 15.68px;
}

/* em versie */
.review-em {
   border: 2px dotted #ccc;
   font-size: 0.875em; /* 16px * 0.875 = 14px */
   max-width: 20em; /* 14px * 20 = 280px */
   padding: 0.5em; /* 14px * 0.5 = 7px */
}
.review-em .review-title {
   font-size: 1.2em; /* 14px * 1.2 = 16.8px */
}
.review-em p {
   font-size: 1em; /* 14px * 1 = 14px */
}
.review-em img {
   width: 4em; /* 14px * 4 = 56px */
}
.review-em footer {
   font-size: 0.8em; /* 14px * 0.8 = 11.2px */
}
.review-em .date {
   font-size: 1.4em; /* 11.2px * 1.4 = 15.68px */
}
de em versie schaalt mee met body fontsize, de px versie niet
de em versie schaalt ook mee met de review wrapper fontsize

De em is dus ideaal voor schaalbare componenten, zoals widgets. Onderstaande demo illustreert nog eens hoe een widget die volledig in em gecodeerd is (inspecteer de code), kan schalen met de tekstgrootte van de widget container:

widget schaalt dankzij em mee met de widget container fontsize

Zoals je ziet uit de voorbeelden, heeft em voordelen, maar is het redelijk complex om mee te werken.

rem

De rem of "root em" betekent aantal keren de tekstgrootte van <html>. Meestal wordt het als volgt gebruikt:

Volgende fragmenten zijn dus gelijkwaardig:

html { }
body { font-size: 14px; }
h1 { font-size: 20px; }
footer { font-size: 11px; }
footer a { font-size: 12px; }
html { font-size: 10px; } /* dan is 1rem = 10px */
body { font-size: 1.4rem; }
h1 { font-size: 2rem; }
footer { font-size: 1.1rem; }
footer a { font-size: 1.2rem;  }

Wat hebben we daarmee gewonnen? Niet veel, behalve dat je door aanpassen van de tekstgrootte van <html> makkelijk de hele pagina kan herschalen. Je hoeft het niet te gebruiken in de cursus, maar aangezien je het in de praktijk wel eens tegenkomt, moet je het wel kennen.

vw / vh

De vw / vh eenheden betekenen percentage van de viewport breedte / hoogte. De viewport is het zichtbare gedeelte van de pagina in de browser. Deze eenheden komen courant voor, vooral in mobiele toepassingen.

De definitie van viewport is iets ingewikkelder dan het lijkt, zie deze pagina.

Fonts

Wat is een font

Een font is een grafische weergave van tekst. De belangrijkste CSS properties:

Code voorbeeld in CSS:

p {
   color: #5a4c34;
   background-color: #f0ede3;
   font-size: 14px;
   font-family: Lato, Arial, sans-serif; /* provide several alternatives */
   font-weight: bold; /* default: normal */
   font-style: normal; /* also try italic */
   letter-spacing: 2px; /* add 2px extra space between letters */
   line-height: 1.6; /* 160% of character height */
   padding: 5px 10px;
   text-shadow: 2px 2px 15px #666;
   text-transform: capitalize;
}
a {
   text-decoration: none; /* onderlijnen of niet; werkt alleen bij links */
   color: #aa8938;
}
a:hover {
   text-decoration: underline;
}
deze CSS code is aanpasbaar — probeer zelf andere waarden uit!

In Friendship Diminution Instrument So. Son Sure Paid Door With Say Them. Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Donec Iaculis Malesuada Mi, Nec Pharetra Elit Vehicula Et. Donec Consectetur Porttitor Mauris Mollis Facilisis. Phasellus Et Lorem Augue, Eget Eleifend Quam. Sed Ac Bibendum Lorem. Praesent Molestie Lobortis Elementum. Nam Sed Magna Eget Quam Ullamcorper Semper. Ut Molestie Faucibus Accumsan. Donec Sodales Rhoncus Augue Ac Aliquam. In Hac Habitasse Platea Dictumst.

Commerciële fonts

Fonts worden met de hand ontworpen, karakter per karakter:

→ bedenk hoeveel werk dit is: alle letters, getallen, accenten, interpunctie, hoofd- / kleine letters... en dat in alle tallen, alle vetdiktes en stijlen!
→ licenties voor kwaliteitsvolle commerciële fonts zijn daarom vaak zeer duur

Gratis fonts

Gelukkig zijn er genoeg gratis en open source lettertypes te vinden. Google heeft een uitstekende collection die je kan downloaden of zelfs gewoon hotlinken. Selecteer je font, en link het met één regel in de <head>:

<html>
<head>
  <!-- kopieer de Google Font link hier -->
  <link href="https://fonts.googleapis.com/css?family=Spicy+Rice" rel="stylesheet">
  <style>
    p {
      font-family: 'Spicy Rice', sans-serif; /* gebruik je nieuw font hier */
      font-size: 30px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
   <p>
      Wie werkten meestal men menigte bersawa. Om monopolies ad nu mislukking
      interesten verscholen smeltovens. Brandhout mee snelleren geschiedt bezorgden
      aandeelen den are. Dat treffen gomboom zekeren tot fortuin gelaten stellen.
      Het ziet niet lage deze het per zes ipoh.
   </p>
</body>
</html>

Werkwijze voor het verkrijgen van de juiste link:

  1. surf naar https://fonts.google.com/
  2. zoek naar een lettertype, b.v. "Roboto", of filter op de categorie, b.v. "Handwriting"
  3. klik in de lijst op het gewenste lettertype, en klik "Get font"
  4. klik vervolgens op "Get embed code"

Je zou een codefragment als dit moeten krijgen:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;...&display=swap" rel="stylesheet">

Je kan dit vereenvoudigen tot één element, dat je in de <head> plaatst:

<head>
  ...
  <link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
  ...
</head>

Help! Mijn font wordt niet goed weergegeven

Zaken die kunnen foutgaan:

Je kan controleren welk font effectief gebruitk wordt via de Chrome inspector (beneden rechts, tab ‘Computed’, onder ‘Rendered fonts’):

Variable fonts

Van klassieke lettertypes kan je een paar eigenschappen aanpassen als de grootte en (in stappen) het gewicht. Variable fonts hebben veel meer tweaking mogelijkheden, b.v. het prachtige Decovar font (run de demo):

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Variable fonts</title>
   <style>
      @font-face {
         font-family: Decovar;
         src: url(fonts/DecovarAlpha-VF.ttf) format("truetype");
      }
      label {
         display: block;
         font-family: Lato;
         margin: 10px;
      }
      #text {
         border: 2px ridge;
         font-family: Decovar;
         font-size: 50px;
         font-variation-setting: 'SKLD' 0, 'TRML' 0, 'SKLA' 0;
         padding: 20px;
      }
   </style>
</head>
<body>
   <div id="controls">
      <label>Grootte: <input type="range" id="size" min="20" max="100" value="50" step="1"></label>
      <label>Stripes: <input type="range" id="setting1" min="0" max="1000" step="1" value="0"></label>
      <label>Worm terminal: <input type="range" id="setting2" min="0" max="1000" step="1" value="0"></label>
      <label>Inline skeleton: <input type="range" id="setting3" min="0" max="1000" step="1" value="0"></label>
      <p> → meer instellingen zie  <a href="https://www.axis-praxis.org/specimens/decovar">deze pagina</a></p>
   </div>
   <p id="text">
      In no impression assistance contrasted.
   </p>
   <script>
      // aliases
      const size = document.querySelector('#size');
      const setting1 = document.querySelector('#setting1');
      const setting2 = document.querySelector('#setting2');
      const setting3 = document.querySelector('#setting3');
      const text = document.querySelector('#text');

      // apply all settings
      function applyAll() {
         text.style.fontSize = size.value + 'px';
         text.style.fontVariationSettings = `'SKLD' ${setting1.value}, 'TRML' ${setting2.value}, 'SKLA' ${setting3.value}`;
      }

      // attach events
      size.addEventListener('input', applyAll);
      setting1.addEventListener('input', applyAll);
      setting2.addEventListener('input', applyAll);
      setting3.addEventListener('input', applyAll);
   </script>
</body>
</html>

Variabel fonts kunnen ook symbolen bevatten. Voorbeeld met het Zycon font (run de demo):

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Variable fonts — Zycon</title>
   <style>
      @font-face {
         font-family: Zycon;
         src: url(fonts/Zycon.woff2);
      }
      label {
         display: block;
         font-family: Lato;
         margin: 10px;
      }
      #text {
         border: 2px ridge;
         font-family: Zycon;
         font-size: 42px;
         padding: 20px;
      }
   </style>
</head>
<body>
   <div id="controls">
      <label>Kleur: <input type="color" id="color" value="#000000"></p>
      <label>Grootte: <input type="range" id="size" min="10" max="60" value="42" step="1"></p>
      <label>T1: <input type="range" id="setting1" min="0" max="1" value="0" step="0.01" value="0"></label>
      <label>T2: <input type="range" id="setting2" min="0" max="1" value="0" step="0.01" value="0"></label>
      <label>T3: <input type="range" id="setting3" min="0" max="1" value="0" step="0.01" value="0"></label>
      <label>T4: <input type="range" id="setting4" min="0" max="1" value="0" step="0.01" value="0"></label>
      <label>M1: <input type="range" id="setting5" min="0" max="1" value="0" step="0.01" value="0"></label>
      <label>M2: <input type="range" id="setting6" min="0" max="1" value="0" step="0.01" value="0"></label>
   </div>
   <p id="text">☀ ✯ ➟ ⬤ 🌝 🏵 🐈 🐕 🐢 💡🔒 🕛 🖐 🚴 🦉 🦎 </p>
   <script>
      // aliases
      const color = document.querySelector('#color');
      const size = document.querySelector('#size');
      const setting1 = document.querySelector('#setting1');
      const setting2 = document.querySelector('#setting2');
      const setting3 = document.querySelector('#setting3');
      const setting4 = document.querySelector('#setting4');
      const setting5 = document.querySelector('#setting5');
      const setting6 = document.querySelector('#setting6');
      const text = document.querySelector('#text');

      // apply all settings
      function applyAll() {
         text.style.color = color.value;
         text.style.fontSize = size.value + 'px';
         text.style.fontVariationSettings = `'T1  ' ${setting1.value},'T2  ' ${setting2.value},'T3  ' ${setting3.value},'T4  ' ${setting4.value},'M1  ' ${setting5.value},'M2  ' ${setting6.value}`;
      }

      // attach events
      color.addEventListener('input', applyAll);
      size.addEventListener('input', applyAll);
      setting1.addEventListener('input', applyAll);
      setting2.addEventListener('input', applyAll);
      setting3.addEventListener('input', applyAll);
      setting4.addEventListener('input', applyAll);
      setting5.addEventListener('input', applyAll);
      setting6.addEventListener('input', applyAll);
   </script>
</body>
</html>

Kleuren & achtergronden

Kleurnotaties

Er zijn verschillende manieren om kleuren te definiëren in CSS. Een overzicht, samen met het gebruik in deze cursus (alfakanaal = transparantie):

notatie toegelaten? voorbeeld opmerking
#rrggbb
#rrggbbaa
color: #CC4420
color: #CC442077 		rr (rood), gg (groen), bb (blauw): waarden tussen 00 en FF
aa (alfakanaal, optioneel): waarde tussen 00 en FF
rgb(r, g, b)
rgba(r, g, b, a)
color: rgb(204, 68, 32)
color: rgba(204, 68, 32, 0.7) 		r, g en b: waarden tussen 0-255
a (alfakanaal, optioneel): waarde tussen 0 en 1
mnemonisch bijna nooit (*) color: blue kleurnaam: blue, aqua, coral, beige...
hsla(h, s%, l%, a) color: hsl(128, 50%, 25%)
color: hsla(128, 50%, 25%, 0.7) 		h: hue (tint), s: saturatie, l: lightness
a (transparantie, optioneel): waarde tussen 0 en 1

(*) gebruik het enkel voor white en black, maar b.v. geen silver, fuchsia, maroon...

Er bestaan nog twee notaties, lab(l, a, b) en lch(l, c, h) gebaseerd op lichtheid, saturatie, tint enz... maar die laten we buiten beschouwing.

Hexadecimale notatie

De meest gebruikte kleurnotatie is #rrggbb hexadecimaal:

p {
   background-color: #ffcccc;
   color: #d2003c;
}
deze CSS code is aanpasbaar — probeer zelf andere waarden uit!

In Friendship Diminution Instrument So. Son Sure Paid Door With Say Them. Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Donec Iaculis Malesuada Mi, Nec Pharetra Elit Vehicula Et. Donec Consectetur Porttitor Mauris Mollis Facilisis. Phasellus Et Lorem Augue, Eget Eleifend Quam. Sed Ac Bibendum Lorem.

verkorte notatie

Als je hexcode #xxyyzz is, kan je de verkorte notatie #xyz gebruiken:

p {
   background-color: #fcc; /* verkorte notatie voor #ffcccc */
   color: #c09; /* verkorte notatie voor #cc0099 */
}

hexcodes lezen

De hexadecimale kleurnotatie is een combinatie van rood, groen en blauw: #d2003c bijvoorbeeld betekent (d=13)*16 + 2 rood, 0 groen en 3*16 + (c=12) blauw, of (210, 0, 60) in (r, g, b) notatie. Dit is veel rood, geen groen, en een beetje blauw, wat uitkomt op een soort roze-rood.

Wil je vlot kleurcodes leren lezen? Bekijk dan deze briljante talk op de dotCSS conferentie van 2018 in Parijs:

Developer tools color picker

De ingebouwde tools van browsers hebben een prima color picker met live preview:

Achtergronden

Een illustratie van de belangrijkste CSS properties voor achtergronden:

div {
   background-color: #ccc; /* achtergrondkleur */
   background-image: url(img/02_design/grass.png); /* link naar de afbeelding */
   background-position: left bottom; /* ook: center, waarde(n) in px of %... */
   background-repeat: no-repeat; /* ook: repeat, repeat-x, repeat-y */
   background-size: 100% 100%; /* ook: cover, contain, waarde(n) in px of %... */
}
deze CSS code is aanpasbaar — probeer zelf andere waarden uit!

Normaal zit je css in een bestand css/styles.css, en de afbeelding b.v. in img/grass.png. Het pad wordt dan:

background-image: url(../img/grass.png); /* van de css map naar de root, dan naar de img map */

Transities

Maak CSS overgangen geleidelijk, “smooth”, met de transition property:

div {
   background-color: #ccc;
   transition: background 0.5s, width 1s; /* transities */
   width: 200px;
}
div:hover {
   background-color: #ee3c87;
   border-radius: 0 15px 15px 0;
   color: white;
   width: 300px;
}
hover me!

Gradiënten

Gebruik een gradiënt als achtergrond met linear-gradient:

p {
   background: linear-gradient(
      to bottom,
      #0ae 10%, /* lightblue */
      #fff 30%, /* white */
      #ff0 50%, /* yellow */
      #6c0 70% /* green */
   )
}

GRADIENT EXAMPLE

Filters

CSS biedt met de filter property een aantal basisfilters als blur, grayscale, brightness, contrast, sepia. Een voorbeeld met grayscale (hover over de afbeelding):

img {
   cursor: pointer;
   filter: grayscale(100%);
   transition: filter 0.5s;
}
img:hover {
   filter: grayscale(0%);
}
hover over de afbeelding

Transformaties

Roteer, rek uit en herschaal elementen rond de X, Y en Z-as met de transform property:

#contactbox {
   background-color: #eee;
   transform: rotate(8deg) skewY(15deg);
   width: 250px;
}

Contacteer me!

Animaties

Definieer keyframes, properties en easing (= animatiecurve) met @keyframes:

<div id="scene">
   <img src="img/bus.png" alt="" id="bus">
</div>

#scene {
   max-width: 800px;
   border: 2px solid #999;
   height: 200px;
   overflow: hidden;
}
#bus {
   margin-left: -300px;
   margin-top: 50px;
   animation: bus-animation 3s infinite ease-in-out;
}
@keyframes bus-animation {
   0% { margin-left: -300px; }
   50% { margin-left: 70px; }
   100% { margin-left: 2000px; }
}

Nog meer CSS animatiedemo's:

Weergave

Opacity

Maak een element (gedeeltelijk) transparant:

<div class="banner">
   <div class="tagline">
      your great tagline here
   </div>
</div>

.banner {
   background-image: url(img/02_design/lapland.jpg);
   background-position: center;
   background-size: cover;
   padding: 150px 100px 50px 10px;
}
.tagline {
   background-color: black;
   border: 5px solid #747738;
   color: white;
   opacity: 0.6; /* verander deze waarde */
   padding: 15px 20px;
}

Opacity vs. alpha

De opacity maakt een element transparant, terwijl het alfakanaal een kleur transparant maakt. Volgende vergelijking verduidelijkt het verschil:

.banner {
   background-color: rgb(0, 0, 0);
   opacity: 0.7;
}
met opacity = 0.7 op de banner: hele blok inclusief tekst en rand vervaagt
.banner {
   background-color: rgba(0, 0, 0, 0.7);

}
met alpha = 0.7 op achtergrondkleur: tekst en rand vervagen niet

Het nadeel van opacity is dat het hele blok vervaagt; met kleuren gebruik je beter alpha

Visibility

De visibility property heeft twee waarden: visible (de standaardwaarde) en hidden, wat exact hetzelfde is als opacity: 0 (volledig transparant). Verwar het niet met display: none (zie verder), dat het element compleet verwijdert.

Display

De display property bepaalt hoe een element weergegeven wordt. De waarden gebruikt in deze cursus zijn:

display weergave
inline als doorlopende tekst, in regels naast elkaar
block als blokken, op aparte regels
inline-block als blokken, maar dan naast elkaar
flex als flex container, zie flexbox
grid als grid container, zie grid
none het element wordt compleet verwijderd

→ er zijn nog een hoop andere waarden als contents, run-in, inline-flex enz... maar die mag je niet gebruiken en hoef je ook niet te kennen.

HTML elementen hebben een standaardwaarde voor display: voor <p> of <h1> is dat block, voor <span> of <a> is dat inline enz... Er kunnen goede redenen zijn om de standaardweergave te veranderen. We geven een paar typische voorbeelden.

voorbeeld 1: knop maken van een link met display: block

Links zijn standaard inline elementen, wat betekent dat je geen hoogte of breedte kan instellen ‐ dat kan alleen bij blocklevel elementen. Gebruik dus display: block als je een link als een button wil opmaken:

<a class="button" href="#">Verzend</a>
a.button {
   background-color: beige;
   border: 2px solid #ccc;
   color: #333;
   display: block; /* verwijder dit en kijk wat gebeurt */
   height: 40px; /* werkt enkel bij blocklevel */
   line-height: 40px;
   margin: 10px;
   text-align: center;
   text-decoration: none;
   width: 100px; /* werkt enkel bij blocklevel */
}

voorbeeld 2: labels verbergen met display: none

Zoals hier uitgelegd, moet in de HTML voor elke control een <label> gecodeerd zijn, ook als ze in het finale design niet zichtbaar zijn. 

<form>
   <div>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="email">
   </div>
   <div>
      <label for="password">Full Name</label>
      <input type="password" id="password" placeholder="paswoord">
   </div>
   <button type="submit">Next</button>
</form>

input, button {
   border-radius: 3px;
   border: 1px solid #ccc;
   margin: 5px;
   padding: 5px;
}
label {
   display: none; /* verwijder dit en kijk wat gebeurt */
}

voorbeeld 3: menu horizontaal maken met display: inline-block

Een al wat oudere manier om een horizontaal menu te maken is met display: inline-block: 

<ul>
   <li><a href="">Home</a></li>
   <li><a href="">Products</a></li>
   <li><a href="">Contact</a></li>
</ul>

ul {
   list-style: none;
}
li + li::before {
   content: " | ";
}
li {
   display: inline-block; /* verwijder dit en kijk wat gebeurt */
}

→ in praktijk wordt tegenwoordig flexbox gebruikt voor layouts als deze