<!doctype html> <html lang="en-US"> <head> <title>Fox</title> </head> <body> the quick brown fox jumps over the lazy dog. </body> </html>
<!doctype html> <html lang="en-US"> <head> <title>Tekens</title> </head> <body> THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. the quick brown fox jumps over the lazy dog. !?;éèëñç αβγδε ηθζικ λμνξο πρσςτ υφχψω ΓΔΘΛΞ ΠΣΦΨΩ אℵøØ ℕℤℚℝℂℍ ¼½¾⅕⅖⅙⅛ + −×÷ √∛∜ = ≠ ≈ ≡ < > &✓✗ ➀➁➂➃➄ ➅➆➇➈➉ ⑪⑫⑬⑭⑮ ⑯⑰⑱⑲⑳ ➊➋➌➍➎ ➏➐➑➒➓ $£€¥ ✉✉✈⛟ ⛴ ©® □▵ ♠♥♡♦♢♣ ♔♕♖♗♘♙ ♚♛♜♝♞♟ </body> </html>
<!doctype html> <html lang="en-US"> <head> <title>Inline elementen</title> </head> <body> THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. the quick brown fox jumps over the lazy dog. !?;éèëñç <b>αβγδε</b> αβγδε ηθζικ λμνξο πρσςτ υφχψω ΓΔΘΛΞ ΠΣΦΨΩ אℵøØ ℕℤℚℝℂℍ <b>ℕℤℚℝℂℍ</b> ¼½¾⅕⅖⅙⅛ + −×÷ √∛∜ = ≠ ≈ ≡ < > &✓✗ <img id="rood_geel" src="css_0003_rood_geel_16_16.bmp"> ➀➁➂➃➄ ➅➆➇➈➉ ⑪⑫⑬⑭⑮ ⑯⑰⑱⑲⑳ ➊➋➌➍➎ ➏➐➑➒➓ <svg width="16" height="16"> <rect x="0" y="0" width="16" height="16" fill="palegreen" stroke="blue" stroke-width="1" /> </svg> $£€¥ ✉✉✈⛟ ⛴ ©® □▵ ♠♥♡♦♢♣ ♔♕♖♗♘♙ ♚♛♜♝♞♟ <a href="#rood_geel">abc</a> </body> </html>
<svg width="128" height="128"> <rect x="0" y="0" width="128" height="128" fill="palegreen" stroke="blue" stroke-width="8" /> </svg>
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8"> <title>HTML</title> <link rel="stylesheet" href="styles.css"> </head> <body> Tekst </body> </html>
body { color: black; font-family: Helvetica; }
Een selector geeft aan welk deel van het html-bestand het betreft. Het declaratie-blok geeft aan wat er voor dat deel van het html-bestand geldig is. In dit voorbeeld staat er dat tekst getoond wordt in zwarte letters, en dat het lettertype helvetica is. Als helvetica niet beschikbaar is op de computer wordt tekst in het default lettertype van de computer getoond.
Je kunt een opmaak-eigenschap via een selector aan een element, class of id koppelen. Als je de selector aan een element wil koppelen, krijgt de selector de naam van de tag. Voor de opmaak van een class laat je de selector met een punt beginnen. Voor de opmaak van een id laat je de selector met een # beginnen. Schematisch:
selector begint met | verwijst naar | voorbeeld |
---|---|---|
letter | tag | selector div is van toepassing op elk html-element div |
. | class | selector .abc is van toepassing op elk html-element met attribuut class="abc" |
# | id | selector #A132 is van toepassing op het html-element met attribuut id="A132" |
<!doctype html> <html lang="en-US"> <head> <title>Regenboog</title> </head> <body> <div class="rood">rood</div> <div class="oranje">oranje</div> <div class="geel">geel</div> <div class="groen">groen</div> <div class="lichtblauw">lichtblauw</div> <div class="donkerblauw">donkerblauw</div> <div class="violet">violet</div> </body> </html>
<!doctype html> <html lang="en-US"> <head> <title>Regenboog</title> <link rel="stylesheet" href="styles.css" />; </head> <body> <div class="rood">rood</div> <div class="oranje">oranje</div> <div class="geel">geel</div> <div class="groen">groen</div> <div class="lichtblauw">lichtblauw</div> <div class="donkerblauw">donkerblauw</div> <div class="violet">violet</div> </body> </html>
.rood { color: red; } .oranje { color: orange; } .geel { color: gold; } .groen { color: green; } .lichtblauw { color: skyBlue; } .donkerblauw { color: blue; } .violet { color: blueViolet; }
.rood { background-color: red; } .oranje { background-color: orange; } .geel { background-color: gold; } .groen { background-color: lightGreen; } .lichtblauw { background-color: skyBlue; } .donkerblauw { background-color: royalBlue; } .violet { background-color: blueViolet; }
.rood { background-color: red; padding: 0.5em; border: 0.25em solid darkred; margin: 0.5em; } .oranje { background-color: orange; padding: 0.5em; border: 0.25em solid orangeRed; margin: 0.5em; } .geel { background-color: yellow; padding: 0.5em; border: 0.25em solid gold; margin: 0.5em; } .groen { background-color: lightGreen; padding: 0.5em; border: 0.25em solid green; margin: 0.5em; } .lichtblauw { background-color: deepSkyBlue; padding: 0.5em; border: 0.25em solid dodgerBlue; margin: 0.5em; } .donkerblauw { background-color: royalBlue; padding: 0.5em; border: 0.25em solid blue; margin: 0.5em; } .violet { background-color: violet; padding: 0.5em; border: 0.25em solid darkViolet; margin: 0.5em; }
<!doctype html> <html lang="en-US"> <head> <title>Margin Border Padding Content</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="tegel"> Onderzoekt alle dingen, maar behoudt het goede. </div> </body> </html>
.tegel { background-color: aliceBlue; padding: 2em; border: 1em solid skyBlue; margin: 1em; }
<!doctype html> <html lang="en-US"> <head> <title>Tekst centreren</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="tegel"> <div class="tegel_tekst"> Onderzoekt alle dingen, maar behoudt het goede. </div> </div> </body> </html> </div> </body> </html>
.tegel { background-color: aliceBlue; padding: 2em; border: 1em solid skyBlue; margin: 1em; } .tegel_tekst { max-inline-size: 20em; margin: 0 auto; }
<!doctype html> <html lang="en-US"> <head> <title>Regenboog</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="flexcontainer"> <div class="rood">rood</div> <div class="oranje">oranje</div> <div class="geel">geel</div> <div class="groen">groen</div> <div class="lichtblauw">lichtblauw</div> <div class="donkerblauw">donkerblauw</div> <div class="violet">violet</div> </div> </body> </html>
.flexcontainer { display: flex; overflow-x: auto; } .rood { background-color: red; padding: 0.5em; border: 0.25em solid darkred; margin: 0.5em; } .oranje { background-color: orange; padding: 0.5em; border: 0.25em solid orangeRed; margin: 0.5em; } .geel { background-color: yellow; padding: 0.5em; border: 0.25em solid gold; margin: 0.5em; } .groen { background-color: lightGreen; padding: 0.5em; border: 0.25em solid green; margin: 0.5em; } .lichtblauw { background-color: deepSkyBlue; padding: 0.5em; border: 0.25em solid dodgerBlue; margin: 0.5em; } .donkerblauw { background-color: royalBlue; padding: 0.5em; border: 0.25em solid blue; margin: 0.5em; } .violet { background-color: violet; padding: 0.5em; border: 0.25em solid darkViolet; margin: 0.5em; }
.flexcontainer { display: flex; flex-wrap: wrap; } .rood { background-color: red; padding: 0.5em; border: 0.25em solid darkred; margin: 0.5em; } .oranje { background-color: orange; padding: 0.5em; border: 0.25em solid orangeRed; margin: 0.5em; } .geel { background-color: yellow; padding: 0.5em; border: 0.25em solid gold; margin: 0.5em; } .groen { background-color: lightGreen; padding: 0.5em; border: 0.25em solid green; margin: 0.5em; } .lichtblauw { background-color: deepSkyBlue; padding: 0.5em; border: 0.25em solid dodgerBlue; margin: 0.5em; } .donkerblauw { background-color: royalBlue; padding: 0.5em; border: 0.25em solid blue; margin: 0.5em; } .violet { background-color: violet; padding: 0.5em; border: 0.25em solid darkViolet; margin: 0.5em; }
In CSS kom je verschillende eenheden om afstanden te meten tegen. De basis-eenheden zijn:
Een pixel is een enigszings misleidende naam.
Een css-pixel hoeft niet exact gelijk te zijn aan een beeldscherm-pixel.
Dat is met name het geval bij high-resolution (“retina”) beeldschermen.
Het hangt af van een combinatie van de browser, het operating systeem en de hardware
hoe lang een pixel werkelijk is, maar gewoonlijk is het 1 inch op het scherm.
Het is in dit verband verstandig in het head-element aan het begin van het html-bestand
de regel
<meta name="viewport" content="width=device-width, initial-scale=1.0">
op te nemen.
Dit commando voorkomt dat teksten op mobiele telefoons veel te klein worden weergegeven.
Bovenstaande eenheden worden absolute eenheden genoemd. Daarnaast heb je nog relatieve eenheden. Hiertoe behoren:
Advies: als je erover twijfelt, kies
<!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rood Groen Blauw</title> <link rel="stylesheet" href="try.css" /> </head> <body> <div class="flexcontainer"> <div class="rood">rood</div> <div class="groen">groen</div> <div class="blauw">blauw</div> </div> </body> </html>
.flexcontainer { display: flex; flex-wrap: wrap; } .rood { background-color: salmon; padding: 0.5em; border: 2em solid red; margin: 0.5em; } .groen { background-color: lightgreen; padding: 0.5em; border: 2em solid green; margin: 0.5em; } .blauw { background-color: lightblue; padding: 0.5em; border: 2em solid blue; margin: 0.5em; }
Html-elementen worden weergegeven als een rechthoek die een hoogte en een breedte heeft. Deze hoogte en breedte worden vaak berekend, maar je kunt ook de hoogte opgeven met behulp van de hiervoor genoemde lengte-eenheden. Hoe de hoogte en breedte bepaald worden kun je beïnvloeden met de property block-sizing. Default heeft bock-sizing de waarde content-box. Dat betekent dat width en height betrekking hebben op de breedte en de hoogte van het content-gedeelte van het element. De waarde border-box maakt dat width en height betrekking hebben op de breedte en de hoogte van het border-gedeelte van het element. De volgende html-code bevat twee elementen. Van het ene element wordt de grootte berekend aan de hand van content-box, Van het andere element wordt de grootte bepaald aan de hand van border-box.
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8"> <title>box-sizing</title> <link rel="stylesheet" href="styles3.css"> </head> <body> <div class="boxSizingContent"> The quick brown fox jumps over the lazy dog. </div> <div class="boxSizingBorder"> The quick brown fox jumps over the lazy dog. </div> </body> </html>
In het bijbehorende css-bestand wordt de klasse boxSizingContent gekoppeld aan de css-regel "box-sizing: content-box;" en wordt de klasse boxSizingBorder gekoppeld aan de css-regel "box-sizing: border-box;". Verder zijn er geen verschillen tussen de klassen boxSizingContent en boxSizingBorder, afgezien van het feit dat ze anders gekleurd zijn.
.boxSizingContent { box-sizing: content-box; width: 50%; margin: 1em; border: 20px solid orange; padding: 2em; background-color: yellow; } .boxSizingBorder { box-sizing: border-box; width: 50%; margin: 1em; border: 20px solid Green; padding: 2em; background-color: paleGreen; }
Het resultaat in een browser ziet er als volgt uit:
In het volgende plaatje laten rode pijlen zien welke afstanden gelijk zijn aan de helft van de breedte van het browser-venster, d.i. de viewport.
Het bovenstaand plaatje laat zien dat de afstand tussen de twee rechthoekige elementen ongeveer even groot is als de afstand tussen de linkerkant van de viewport en het rechthoekige element, en ongeveer even groot als de hoogte van de letters, d.i. de lettergrootte (font-size).
*, ::before, ::after { box-sizing: border-box; }
Met flexbox kun je even hoge kolommen bereiken. Het html-bestand
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8"> <title>Even hoge kolommen</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="main"> Wij, die in concentratiekampen hebben geleefd, wij zijn de gevangenen niet vergeten die door de barakken liepen om anderen op te beuren en te troosten, die hun laatste korst brood aan een medegevangene schonken. Hun aantal was wellicht klein, toch hebben deze mannen overtuigend bewezen dat één ding de mens niet kan worden ontnomen: de allerlaatste menselijke vrijheid - de keuze onder alle omstandigheden zijn eigen houding te bepalen, zijn eigen weg te kiezen. </div> <div class="sidebar"> Uit "De zin van het bestaan", door Viktor E. Frankl </div> </div> </body> </html>
met css-bestand
.container { display: flex; } .main { width: 70%; background-color: yellow; padding: .5em; } .sidebar { width: 30%; background-color: paleGreen; padding: .5em; }
heeft in de browser als resultaat:
<!doctype html> <html lang="en-US"> <head> <title>Geheimtalen</title> </head> <body> In de moderne wereld gonst de lucht van codes. Bij elk gesprek dat we voeren met een mobiele telefoon, bij elk televisiekanaal waarop we afstemmen, bij elke keer dat we geld opnemen bij een pinautomaaat, vertrouwen we op uitgekiende versleutelingen door de computer die evoor zorgen dat spiedende oren en ogen van anderen niets kunnen zien of horen. (Uit : Geheimtalen, Stephen Pincock en Mark Frary, 2007) </body> </html>
<!doctype html> <html lang="en-US"> <head> <title>Geheimtalen</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css" /> </head> <body> <div id="site_center" class="center_strip"> In de moderne wereld gonst de lucht van codes. Bij elk gesprek dat we voeren met een mobiele telefoon, bij elk televisiekanaal waarop we afstemmen, bij elke keer dat we geld opnemen bij een pinautomaaat, vertrouwen we op uitgekiende versleutelingen door de computer die evoor zorgen dat spiedende oren en ogen van anderen niets kunnen zien of horen. (Uit : Geheimtalen, Stephen Pincock en Mark Frary, 2007) </div> </body> </html>
:root { --max_page_width: 45em; } *, ::before, ::after { box-sizing: border-box; } body { font-family: arial, calibri ; } .center_strip { max-inline-size: var(--max_page_width); margin:0 auto; }
:root { --max_page_width: 45em; }
*, ::before, ::after { box-sizing: border-box; }
body { font-family: arial, calibri ; }
.center_strip { max-inline-size: var(--max_page_width); margin:0 auto;
<!doctype html> <html lang="en-US"> <head> <title>Kleuren</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css" /> </head> <body> <div id="site_center" class="center_strip"> <div class="flexcontainer_scroll"> <div class="rood">rood</div> <div class="oranje">oranje</div> <div class="geel">geel</div> <div class="groen">groen</div> <div class="lichtblauw">lichtblauw</div> <div class="donkerblauw">donkerblauw</div> <div class="violet">violet</div> <div class="white">white</div> <div class="gray">gray</div> <div class="black">black</div> </div> </div> </body> </html>
/* variabele voor maximale breedte van de tekstregels definiëren*/ :root { --max_page_width: 45em; } /* grootte van html-elementen specificeren op basis van border */ *, ::before, ::after { box-sizing: border-box; } /* gewenst lettertype */ body { font-family: arial, calibri ; } /* maximale breedte van de tekstregels instellen; tekst centreren op brede schermen */ .center_strip { max-inline-size: var(--max_page_width); margin:0 auto; } /* horizontaal scrollen */ .flexcontainer_scroll { display: flex; overflow-x: auto; } .rood { background-color: red; padding: 0.5em; border: 0.25em solid darkred; margin: 0.5em; } .oranje { background-color: orange; padding: 0.5em; border: 0.25em solid orangeRed; margin: 0.5em; } .geel { background-color: yellow; padding: 0.5em; border: 0.25em solid gold; margin: 0.5em; } .groen { background-color: lightGreen; padding: 0.5em; border: 0.25em solid green; margin: 0.5em; } .lichtblauw { background-color: deepSkyBlue; padding: 0.5em; border: 0.25em solid dodgerBlue; margin: 0.5em; } .donkerblauw { background-color: royalBlue; padding: 0.5em; border: 0.25em solid blue; margin: 0.5em; } .violet { background-color: violet; padding: 0.5em; border: 0.25em solid darkViolet; margin: 0.5em; } .white { background-color: white; padding: 0.5em; border: 0.25em solid lightGray; margin: 0.5em; } .gray { background-color: lightGray; padding: 0.5em; border: 0.25em solid gray; margin: 0.5em; } .black { background-color: gray; padding: 0.5em; border: 0.25em solid black; margin: 0.5em; }
/* variabele voor maximale breedte van de tekstregels definiëren*/ :root { --max_page_width: 45em; } /* grootte van html-elementen specificeren op basis van border */ *, ::before, ::after { box-sizing: border-box; } /* gewenst lettertype */ body { font-family: arial, calibri ; } /* maximale breedte van de tekstregels instellen; tekst centreren op brede schermen */ .center_strip { max-inline-size: var(--max_page_width); margin:0 auto; } /* horizontaal scrollen */ .flexcontainer_scroll { display: flex; overflow-x: auto; } /* items in een lijst naar volgende regel verplaatsen */ .flexcontainer_wrap { display: flex; flex-wrap: wrap; } .rood { background-color: red; padding: 0.5em; border: 0.25em solid darkred; margin: 0.5em; } .oranje { background-color: orange; padding: 0.5em; border: 0.25em solid orangeRed; margin: 0.5em; } .geel { background-color: yellow; padding: 0.5em; border: 0.25em solid gold; margin: 0.5em; } .groen { background-color: lightGreen; padding: 0.5em; border: 0.25em solid green; margin: 0.5em; } .lichtblauw { background-color: deepSkyBlue; padding: 0.5em; border: 0.25em solid dodgerBlue; margin: 0.5em; } .donkerblauw { background-color: royalBlue; padding: 0.5em; border: 0.25em solid blue; margin: 0.5em; } .violet { background-color: violet; padding: 0.5em; border: 0.25em solid darkViolet; margin: 0.5em; } .white { background-color: white; padding: 0.5em; border: 0.25em solid lightGray; margin: 0.5em; } .gray { background-color: lightGray; padding: 0.5em; border: 0.25em solid gray; margin: 0.5em; } .black { background-color: gray; padding: 0.5em; border: 0.25em solid black; margin: 0.5em; }
<!doctype html> <html lang="en-US"> <head> <title>Kleuren</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css" /> </head> <body> <div id="site_center" class="center_strip"> <div class="flexcontainer_wrap"> <div class="rood">rood</div> <div class="oranje">oranje</div> <div class="geel">geel</div> <div class="groen">groen</div> <div class="lichtblauw">lichtblauw</div> <div class="donkerblauw">donkerblauw</div> <div class="violet">violet</div> <div class="white">white</div> <div class="gray">gray</div> <div class="black">black</div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>svg en css</title> <link rel="stylesheet" href="try.css" /> </head> <body> <div id="site_center" class="center_strip"> <div class="picture_scroll"> <svg width="500" height="50"> <rect x="0" y="0" width="400" height="50" fill="lightGreen" /> <rect x="400" y="0" width="100" height="50" fill="darkGreen" /> <text x="35" y="30">The quick brown fox jumps over the lazy dog</text> </svg> </div> <br><br> <div class="picture_scroll"> <div class="picture_center" > <svg width="500" height="50"> <rect x="0" y="0" width="400" height="50" fill="lightGreen" /> <rect x="400" y="0" width="100" height="50" fill="darkGreen" /> <text x="35" y="30">The quick brown fox jumps over the lazy dog</text> </svg> </div> </div> <br><br> <svg viewBox="0,0 500 50"> <rect x="0" y="0" width="400" height="50" fill="lightGreen" /> <rect x="400" y="0" width="100" height="50" fill="darkGreen" /> <text x="35" y="30">The quick brown fox jumps over the lazy dog</text> </svg> </div> </body> </html>
/* variabele voor maximale breedte van de tekstregels definiëren*/ :root { --max_page_width: 45em; } /* grootte van html-elementen specificeren op basis van border */ *, ::before, ::after { box-sizing: border-box; } /* gewenst lettertype */ body { font-family: arial, calibri ; } /* maximale breedte van de tekstregels instellen; tekst centreren op brede schermen */ .center_strip { max-inline-size: var(--max_page_width); margin:0 auto; } /* items in lijst horizontaal scrollen */ .flexcontainer_scroll { display: flex; overflow-x: auto; } .picture_scroll { overflow-x: auto; } .picture_center { text-align: center; }
/* variabele voor maximale breedte van de tekstregels definiëren*/ :root { --max_page_width: 45em; } /* grootte van html-elementen specificeren op basis van border */ *, ::before, ::after { box-sizing: border-box; } /* gewenst lettertype */ body { font-family: arial, calibri ; } /* maximale breedte van de tekstregels instellen; tekst centreren op brede schermen */ .center_strip { max-inline-size: var(--max_page_width); margin:0 auto; } /* items in lijst horizontaal scrollen */ .flexcontainer_scroll { display: flex; overflow-x: auto; } /* voor plaatje dat te breed is om in zijn geheel te tonen en je horizontaal wilt kunnen scrollen */ .picture_scroll { overflow-x: auto; } /* voor plaatje dat gecentreerd moet blijven */ .picture_center { text-align: center; }