En de laatste:
Stap 3: de css in een apart stylesheet
Als je alles volgens
Stap 2 in een mooi stijlblok in de <head> van de pagina hebt gezet, staat de html van de pagina prima los van de vormgeving in het stijlblok. Maar bij een andere pagina moet je het stijlblok wéér in de <head> plakken. Dat levert niet alleen extra werk (en zware html-pagina's), maar is ook erg lastig als je ergens een verandering van stijl wilt doorvoeren. Dan moet je alle stijlblokken van alle pagina's langs!
Maar ook hier is iets op gevonden.
Alle styles worden in één bestand gezet, en dat bestand wordt door elke pagina van de site opgevraagd en gebruikt voor de vormgeving.
Dit gaat heel eenvoudig:
- Knip alles van het stijlblok uit de <head> tussen: <style type="text/css"> en </style> er uit, en plak dit in een nieuw document.
- Noem het nieuwe document bv.: mijnstijlen.css
- De bestands-extensie is .css, maar eigenlijk is het een gewoon tekstbestand (en ook bv. met Kladblok aan te passen).
- In de <head> van het document wordt nu dit stylesheet als volgt aangeroepen:
<link rel="stylesheet" type="text/css" href="mijnstijlen.css">
- Klaar!
Het is alleen even uitkijken als pagina's, images en stylesheets ondergebracht zijn in verschillende mappen.
Stel je hebt in de root-map ...:
- index.htm
- paginas-map
- pagina1.htm
- pagina2.htm
- pagina3.htm
- images-map
- plaatje1.gif
- plaatje2.gif
- plaatje3.png
- css-map
... dan moeten de verwijzingen van alle images in de mijnstijlen.css relatief worden t.o.v. de plek van de css-map. Dus in de css wordt het bv.:
Code:
[FONT="Courier New"][SIZE="2"]body {
background: url(../images-map/mijnbackground.gif);
}[/SIZE][/FONT]
... en de link naar het css-bestand moet ook relatief zijn:
- vanuit index.htm: <link rel="stylesheet" type="text/css" href="css-map/mijnstijlen.css">
- vanuit pagina1.htm: <link rel="stylesheet" type="text/css" href="../css-map/mijnstijlen.css">
... enz. Maar dit wijst zichzelf. - Of je gebruikt altijd absolute verwijzingen.
Dan is hier de
voorbeeldpagina Stap 3 met extern stylesheet (de omgebouwde
Stap 2 met het stijlblok in de <head>).
Zie de broncode: kort en krachtig!
Einde 3-traps raket!
"Stel je een eenvoudig vraagje, trekt ie een boekenkast omver!"
Tja, en nu is dit maar het begin: er valt veel en veel meer over html en css te vertellen.
In elk geval, "u heeft helemaal geen kennis van codes nodig", wat een aantal webeditors (als programma, of online) beweren: daarmee is een beetje gecompliceerde website niet echt goed op te bouwen.
Zonder die kennis kan je niet handmatig iets invoeren, als dat nodig mocht zijn. En ook niet controleren of die programma's goede codes afleveren, en die zo nodig corrigeren (als het programma dat tenminste toestaat). Ook dat blijkt wel eens hard nodig.
Succes!
CSShunter
