Johan, ik zou zeggen css is verplicht te leren
Grapje, maar dit is de aanbevolen manier. En het leuke is: het is heel simpel.
HTML dient infeite alleen om informatie weer te geven (dus de inhoud) .
Hoe je dat doet (opmaak: lettertypes, kleuren, aspect,...) hoort eigenlijk niet thuis in HTML, omdat dat niet behoort tot de informatie an sich (de inhoud). Daarvoor bestaan zogenaamde stylesheets: dit zijn
stijlbladen die enkel info bevatten over de opmaak.
Een HTML-pagina kan verwijzen naar zo een stylesheet en dus de opmaak overnemen uit die stylesheet. CSS staat voor Cascading Style Sheet. Het
Cascading laten we even voor wat het is.
Stel nu eens dat je een website hebt, bestaande uit 20 pagina's. Elke pagina heeft dezelfde achtergrond-kleur. Als je die achtergrondkleur in de HTML-bestanden definieert, en je wilt de achtergrondkleur veranderen, moet je elk HTML bestand veranderen.
Als je een Stylesheet gebruikt, moet hje de achtergrondkleur alleen dààr veranderen. Alle HTML-pagina's die deze stylsheet gebruiken, zullen automatisch de nieuwe achtergrondkleur aannemen.
een voorbeeld:
In een html-file zet je in de <head>:
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
Hierdoor gaat deze html-file voor zijn opmaak kijken naar een css-file, genaamd "styles.css"
Dus de link moet zeker die drie elementen bevatten: rel="stylesheet" type="text/css" href="bestandsnaam.css"
De css-file kan er zo uitzien (bestandsnaam: "styles.css", die je opslaat in dezelfde map als de html-files):
h1 {
color: red;
}
Vanaf nu zullen alle h1's in uw html-file rood zijn. Vergeet de puntkomma niet op het einde van een eigenschap. Je kan nog meer eigenschappen instellen dan alleen de kleur:
h1 {
font-family: helvetica;
border: thin dotted black;
text-align: right;
color: red;
}
Een voorbeeld voor de achtergrondkleur:
body {
background-color: black;
color: white;
overflow: scroll
}
Vanaf nu gaat de achtergrondkleur in de body zwart zijn (en tekst wit). En als de inhoud te lang wordt, komt er een scrollbar.
Als het je interesseert, ga ik hier nog verder op in, want dit is echt de basis van de basis van css, maar het toont toch al het principe. Je html-code is nu ook veel leesbaarder, omdat al dat opmaak-gedoe eruit is.
