HTML5 en Webdesign
Tot aan de introductie van HTML5 was het gebruikelijk dat de opmaak van de pagina's werd geregeld
binnen de HTML pagina zelf.
Met eenvoudige tags als <b> en
</b> maar ook met
<bgcolor="yellow"> kom je wel een eind, maar om de pagina helemaal naar
je hand te zetten is CSS bedacht.
De stelregel is nu: HTML gebruik je voor de structuur, en CSS voor de opmaak.
Er is een drietal manieren waarop CSS gebruikt kan worden:
inline stijlen:
Een inline stijl gebruik je als een stijl slechts voor een enkel element binnen één HTML-document wilt
gebruiken. Je voegt dan aan een HTML-element het style-attribuut toe en geeft het als waarde één
of meer stijldeclaraties
een stijlblok:
Wanneer een stijl vaker gebruikt wordt en/of voor meer elementen, maar slechts binnen één document,
dan kun je het beste een stijlblok in de head van het document plaatsen.
Dat doe je door het style-element op te nemen en daarbinnen één of meer stijlregels te plaatsen.
<head>
<style>
body {background-color: linen;}
h1 {color: maroon; margin-left: 40px;}
</style>
</head>
een stijlblad:
Wanneer een stijl in meerdere documenten gebruikt moet worden, dan is het verstandig deze in een apart document te plaatsen: een extern stijlblad. In de head van een HTML-document kun je het LINK element opnemen om aan te geven in welk stijlblad de stijlen staan.
Het koppelen van een extern stijlblad gaat als volgt (bladzijde 4.58):
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Werken met CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
De tekst van deze website.
</body>
</html>
Het wordt tijd om de stijlregels eens wat nader te bekijken:
Met zo'n stijlregel maken we een selector op:
In onderstaande voorbeelden wordt aangegeven hoe je bepaalde tags kunt opmaken. We bespreken in
dit hoofdstuk de eigenschappen (properties) color, background-color, background-image,
font-family, font-size, text-align, font-weight,
font-style, en text-decoration met hun bijbehorende waarden (values).
Deze moet je kunnen gebruiken.
| body {font-family: Verdana; } | stel een lettertype in |
| body {font-family: Rockwell, Arial; } | geef tevens een tweede keus lettertype |
| h1 {font-size: 32pt; } | stel de 'puntgrootte' van deze letters in; lees meer over eenheden) |
| p {text-align: right; } | deze alinea wordt rechts uitgelijnd |
| p {text-align: left; } | deze alinea wordt links uitgelijnd |
| p {text-align: center; } | deze alinea wordt gecentreerd |
| p {text-align: justify; } | deze alinea wordt uitgevuld |
| h1 {font-weight: normal; } | deze kop wordt niet vet weergegeven |
| h2 {font-weight: bold; } | deze kop wordt wel vet weergegeven |
| h2 {font-style: normal; } | deze kop wordt niet cursief weergegeven |
| h2 {font-style: italic; } | deze kop wordt wel cursief weergegeven |
| p {text-decoration: none; } | deze alinea wordt niet bijzonder weergegeven |
| p {text-decoration: line-trough; } | deze alinea wordt doorgehaald |
| p {text-decoration: overline; } | deze alinea wordt met een streep erboven weergegeven |
| p {text-decoration: underline; } | deze alinea wordt onderstreept |