|
Het opnemen van CSS is helemaal niet moeilijk en ga ik je uitleggen aan de hand van een eenvoudig voorbeeld.
Stel, je wilt alle titels op je webpagina een rode kleur geven en
onderstrepen. Zoals je weet, wordt een titel in
HTML weergegeven met
<h1>.
De CSS-code voor de zelf gedefinieerde opmaak van de titel luidt dan als
volgt:
h1 { color: red; text-decoration: underline; }
Eerst en vooral laat je de browser weten op welk HTML-element je een regel
voor opmaak wilt toepassen. Dit noemt men de selector, in dit
geval is h1 de selector. Eender welk HTML-element kan dienen als
selector: img, table, td, hr,
body, p,...
Tussen accolades komen dan de kenmerken en waardes
die op <h1> moeten worden toegepast. Het kenmerk color
krijgt hier de waarde red. Bij elk kenmerk hoort dus een waarde die
je zelf kunt instellen. De verschillende kenmerken (met hun waarde) worden van
elkaar gescheiden door een puntkomma.
Bovenstaand voorbeeld gaf ons reeds een idee hoe CSS-codes zijn opgebouwd. Nu
gaan we de CSS-code een plaats geven in de HTML-pagina zodat het ook
daadwerkelijk werkt. Dat doe je als volgt:
<html>
<head>
<title>Uw eerste pagina met CSS</title>
<style type="text/css">
h1 { color: red; text-decoration: underline; }
</style>
</head>
<body>
<h1>Opmaak zoals bepaald in CSS-code</h1>
De header hierboven wordt onderstreept en in een rode kleur weergegeven.
<h1>Nog meer voordelen</h1>
Ook de header hierboven wordt onderstreept en in een rode kleur weergegeven. Je
hoeft dus maar één keer de opmaak in te voeren.
</body>
</html>
De CSS-code staat in de header en wordt tussen <style> en
</style> geplaatst. Telkens je nu de <h1>-tag gebruikt in
die pagina, zal die opgemaakt worden zoals vernoemd tussen de styletags.
Stel dat je je gehele website (dus al je webpagina's) wilt voorzien van de
opgemaakte <h1>-titel. Dan zou je in elke webpagina de CSS-regel
bovenaan in de header moeten plakken, maar gelukkiger gaat het veel makkelijker.
We gaan daarvoor eerst de CSS-code in een apart bestand opslaan met de extensie
.css. Een extensie is het geheel van de 3 (of 4) letters na de bestandsnaam en
punt:
- Open Kladblok en typ het volgende in:
h1 { color: red; text-decoration: underline; }
- Sla het bestand op als titel.css (verander de extensie .txt naar .css)
- Maak nu een lege webpagina aan en typ het volgende in:
<html>
<head>
<title>Voorbeeld 2</title>
<link href="titel.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Opmaak met externe stylesheet</h1>
</body>
</html>
- Sla je HTML-document op als titelpagina.html.
Je ziet dat ook nu de titel is opgemaakt zoals opgegeven in de CSS-code.
- Je plakt nu in al je webpagina's de roodgedrukte regel en op alle
webpagina's zal de h1-titel rood en onderstreept worden.
Deze werkwijze is vooral nuttig wanneer je in het CSS-bestand meer dan 1
regel moet opgeven voor de opmaak. En dat gaan we nu doen in ons volgende
voorbeeld:
We willen dat onze webpagina een zwarte achtergrond krijgt met witte letters,
h1 en h2-titels moeten rood en onderstreept worden, het lettertype wordt Arial,
12pt en de tekst wordt gecentreerd. Inhoud in tabelcellen geven we weer met een
zwarte achtergrond en witte letters.
body { background: black; color: white; font-family: Arial; font-size:
12pt; text-align: center; }
h1, h2 { color: red; text-decoration: underline; }
td { background-color: black; color: white; }
Plak de bovenstaande CSS-regels in je stijlbestand. Op al je webpagina's
zullen bovenstaande regels toegepast worden.
Ga naar het volgende deel van de CSS basiscursus : Elementen benoemen in CSS
|
Ontwerp je site