Les 3: Inline vs Block elementen

Zoals je weet worden alle HTML-elementen als een box gerenderd in je browser. Deze boxen kun je opmaken volgens het box-model. Er zijn twee van dit soort boxen:

  • inline elementen

  • block elementen

Voorbeelden van inline elementen zijn: <b>, <em>, <span>, <img>, <strong>. Ze zitten in de regel tekst en hun box is zo hoog en breed als de inhoud van de tekst. Block elementen daarentegen beginnen altijd op een nieuwe regel. Voorbeelden van block-elementen zijn: <div>, <h1>, <p>, <table>, <ul> enz. Standaard nemen ze de gehele breedte van hun parent (bijvoorbeeld de <body>) in beslag. Je kunt in tegenstelling tot de inline elementen de breedte en hoogte van een block-element wel instellen met height en width. Hier een voorbeeld:

HTML

<body>
  <h1>Parkieten</h1>
  <p>
    Voeding is ronduit één van de belangrijkste kennispunten waar je het     één en ander van moet weten als je <em>grasparkietjes</em> houdt.         <span id="nadruk">Goede</span> voeding zorgt voor een langer leven en     een beter leven voor je vogeltje.
  <p>
</body>

CSS

h1, p {
  background-color: grey;
}

em, #nadruk {
  background-color: red;
  font-weight: bold;
}

RESULTAAT

Zoals je ziet is element <em> en <span> met id #nadruk inline elementen. Ze zijn zo breed en hoog als de hoeveelheid tekst en zitten middenin de regel. De elementen <p> en <h1> zijn block-elementen. Ze nemen de gehele breedte in beslag van hun parent (in dit geval <body>) en beginnen op een nieuwe regel.

Opdracht

Ga na dat je de hoogte en breedte van een inline element niet kan veranderen, terwijl je dat met een block element wel kan doen. Doe dat in het volgende stuk code wat voor jou al is geschreven: https://codepen.io/h-akkas/pen/mMrZRV?editors=1100

Display

Nu is het zo dat je block elementen soms toch als inline elementen wilt behandelen en inline elementen als block element. Hoe doe je dat? Daar is het CSS-attribuut display voor bedacht! Als je voor een <p> element display: inline instelt, dan wordt de <p> als een inline element behandeld. Als je voor een <em> element display: block instelt, dan wordt het <em> element als een block element behandeld.

Opdracht

Bekijk de volgende pagina en de code:

Zoals je ziet hebben we alleen block elementen op deze pagina. Maak van de h1 en de vier div-elementen een inline element met display: inline. Wat gebeurt er? Gebruik deze link: https://codepen.io/h-akkas/pen/YxGoZX?editors=1100

Zoals je hierboven hebt gezien veranderen er twee dingen:

  1. Alle height en width instellingen worden genegeerd. De elementen worden zo hoog en breed als de inhoud van de tekst.

  2. Alles komt op een regel te staan, omdat het inline elementen zijn geworden.

Zo kun je ook inline elementen als block elementen beschouwen met display: block. Bekijk eens het volgende voorbeeld.

Ik heb hier drie linkjes naast elkaar. Zoals je weet is een <a>-tag een inline element. Wil ik van de linkjes een verticaal menu maken met vakjes die even breed zijn, dan moet ik er block elementen van maken.

Opdracht

Maak van de linkjes hierboven een verticaal menu met even brede vakjes. Je kunt de code via de volgende link raadplegen: https://codepen.io/h-akkas/pen/mMObdz?editors=1100

Als je je goed herinnert hebben we in lesbrief 1 ook display: inline-block gebruikt voor het menu. Waar is dat dan goed voor? Nou, met display: inline-block willen we een element op een lijn zetten (inline), maar dan ook als een block behandelen. Dus ook voorzien van een hoogte en een breedte. Hartstikke handig als je een horizontaal menu wilt maken. Zie ook het plaatje hieronder voor de verschillen:

In dit plaatje gaan we ervan uit dat alle elementen divjes zijn. Merk op dat inline-block dus zowel de elementen naast elkaar zet, maar waar ook een hoogte en een breedte voor kan worden opgegeven!

Pseudo classes en pseudo elementen

Als het goed is heb je al eerder kennisgemaakt met pseudo classes in HTML. Linkjes hebben namelijk vier verschillende toestanden:

Toestand link

Betekenis

link

als de link nog niet is bezocht

visited

als de link al bezocht is

hover

als je met je muis over de link scrolt

active

als je op de link klikt

Je kunt voor elk van deze toestanden een opmaak opgeven. Dit doe je met pseudo classes.

De code voor een pseudo class is als volgt:

<selector>:<pseudoclass> { }

Voorbeeld:

a:link {
  color: yellow;
  background-color: red;
}

a:visited {
  color: green;
  font-size: 26px;
}

a:hover {
  background-color: purple;
  color: yellow;
}

a:active {
  font-weight: bold;
}

Zoals hierboven te zien is zou je ervoor kunnen kiezen om voor elke toestand van het linkje opmaak aan te geven met pseudo classes. Maar dat hoeft natuurlijk niet. De bovenstaande code kun je via de volgende link in actie zien: https://codepen.io/h-akkas/pen/GvNRBr?editors=1100

Je kunt deze pseudo classes ook op andere HTML-elementen toepassen. Stel dat je een <div> een kleur wilt geven als je er met je muis overheen gaat, dan kan dat gewoon.

Opdracht

Maak een <div> die een andere kleur krijgt als er met je muis overheen gaat.

Nu is het aantal pseudo classes niet beperkt tot vier. Er zijn tientallen pseudo classes die je kunt gebruiken om dingen te doen die je anders met JavaScript had moeten programmeren. Stel dat je een tabel hebt en je wilt alle even rijen een kleur geven en alle oneven rijen een andere kleur. Dan zou je de pseudo class nth-child() kunnen gebruiken. Zie de onderstaande code: 

tr:nth-child(even) { /* alle even rijen */
  background-color: #915151;
}

tr:nth-child(odd) { /* alle oneven rijen */
  background-color: #B97777;
}

Zie de code in actie: https://codepen.io/h-akkas/pen/dzOyrM?editors=1100

In plaats van even of odd kun je ook gewoon een getal tussen haakjes zetten. Wel met een n erachter. Dus bijvoorbeeld nth-child(4n). Zo kun je iets bijzonders doen met exact de zoveelste rij.

Opdracht

Op de volgende pagina kun je een lijst met alle pseudo classes vinden: https://www.w3schools.com/css/css_pseudo_classes.asp Maak een webpagina waarin je minstens twee pseudo classes gebruikt voor een nuttige toepassing. Welke je wilt gebruiken, mag je zelf weten.

Web-fonts

Hiervoor heb je geleerd om lettertypen op te geven met de font-family property. Je hebt ook geleerd dat je niet zomaar alle lettertypen kunt gebruiken aangezien de lettertype ook aanwezig moet zijn op het systeem van de bezoeker van je website. Zo niet, dan zal je website er niet zo mooi uitzien. Om dit te voorkomen heb je geleerd om meerdere lettertypen op te geven: beginnen met een web-safe font en vervolgens een paar generieke fallback fonts voor als de eerst opgegeven lettertype toch niet beschikbaar is.

font-family: Verdana, Geneva, sans-serif

of

font-family: "Times New Roman", Times, serif

Nu is er ook de mogelijkheid om met web-fonts te werken. Dat houdt in dat je website altijd de ingestelde lettertype downloadt voor als het niet beschikbaar is bij de bezoeker. Waar kun je die fonts dan downloaden en hoe kom je eraan?

Nou, er zijn websites die allerlei mooie fonts aanbieden die je zo als web-font kan instellen voor je website. Sommige van deze websites vragen hier geld om, maar sommige ook niet. Een van de webfoundry websites die honderden fonts gratis beschikbaar stelt is Google Fonts. Hier een pagina dat gebruik maakt van Google Fonts:

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Een mooie font op je website</div>
  </body>
</html>

Zie hem hier in actie: https://codepen.io/h-akkas/pen/zdoGpP?editors=1100

Hoe gaat dat dan in zijn werk?

  1. Ga naar de Google Fonts website (https://fonts.google.com/)

  2. Kies een lettertype uit en druk op het rode plusje (er verschijnt een zwart-wit kadertje aan de onderkant van de pagina

  3. Klik op dat kadertje met de tekst (1 family selected).

  4. Dan kun je twee dingen doen. Of je kopieert de <link>-tag naar je HTML-bestand of je drukt op @IMPORT en kopieert de @import regel in je CSS. Ik zou kiezen voor het laatste aangezien je dat maar 1 keer hoeft te doen.

  5. Ten slotte kun je de lettertype gewoon gebruiken op je website.

Opdracht

Kies een leuke web-font en gebruik hem op een pagina.

PreviousLes 2: position in CSSNextEindopdracht [PET1]

Last updated