CSS staat voor Cascading Style Sheets en wordt gebruikt om je HTML te stylen. Zoals eerder gezegd gebruik je HTML voor de basis en opbouw van je website, CSS gebruik je voor de presentatie.
Zie het als je outfit: een spijkerbroek en wit t-shirt kan heel saai overkomen, net zoals een website die alleen uit html code bestaat. Gooi wat sieraden om en verf je nagels rood en je outfit is gelijk completer!
De opbouw van CSS
De opbouw van CSS ziet er als volgt uit:| p | {color: | red; | font-size: | 12 px;} |
Waar html met tags werkt, gebruiken we in CSS selectors. De selector staat aan het begin van de regel en geeft aan welk html element of tag deze opmaak krijgt, in het voorbeeld dus de paragraaf elementen. Wil je alle h1 elementen stylen? Dan wijzig je de p in h1.
Vervolgens wordt er binnen de haakjes { en } aangegeven door middel van declarations wat die opmaak dan is.
In dit geval wordt door de property color aangegeven dat er iets met de kleur van de <p> elementen moet gebeuren. De value red geeft aan dat de <p> elementen rood gekleurd moeten worden.
Waar je in html de name en value attributen moet scheiden door het = teken te gebruiken wordt in CSS het : teken vermeld.
Waar je in html de name en value attributen moet scheiden door het = teken te gebruiken wordt in CSS het : teken vermeld.
Binnen de haakjes { en } kun je meerdere declarations aangeven, deze worden dan gescheiden door het ; teken. In het voorbeeld hierboven is bijvoorbeeld ook aangegeven dat de tekst in de <p> elementen niet alleen rood is, maar ook een grootte heeft van 12 pixels.
Het is goed om jezelf aan te wennen altijd een ; teken achter een declaration te plaatsen, ookal is het voor nu de laatste die je invult. Misschien dat je in de toekomst toch bedenkt dat de <p> elementen gecentreerd moeten worden, dan kun je dit later makkelijker aanvullen. Een fout zit in een klein hoekje waardoor je opmaak niet correct ingesteld wordt!
Doordat we in het style element vermeld hebben dat alle <p> elementen rode tekst bevatten, hoeven we dit niet specifiek nog eens in de openingstag van de paragraaf te vermelden. Als je nu in het body element een tweede paragraaf toevoegt, dan kleurt de tekst van deze tweede paragraaf ook automatisch rood.
Alhoewel de interne style sheet de voorkeur heeft van een inline style, is het toch beter om je css code in een apart bestand te plaatsen en niet samen met je html.
Deze pagina kun je in de teksteditor bijvoorbeeld opslaan als stylesheet.css en vanuit je html bestand hier naartoe linken door middel van het <link> element:
<html>
<head>
<title>Mijn eerste blog</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<p>Deze tekst is nog steeds rood.</p>
</body>
</html>
Omdat je in het bestand stylesheet.css hebt aangegeven dat de tekst in het <p> element rood moet zijn, wordt dit in het .html bestand automatisch overgenomen. Het attribuut rel="stylesheet" geeft aan dat je naar een stylesheet wilt linken. Het attribuut href="stylesheet.css" geeft aan welk bestand hiervoor gebruikt moet worden.
Toepassing van CSS
CSS kun je op drie manieren toepassen in je website:Inline
Inline styles is de meest simpele vorm van CSS. Deze worden geplaatst in de openingstag van een element, waarbij de opmaak enkel geldt voor dat specifieke element.
Bijvoorbeeld:
<p style="color: red">Deze tekst is rood.</p>
Deze inline style zorgt ervoor dat de kleur van de tekst in deze paragraaf rood is.
Bijvoorbeeld:
<p style="color: red">Deze tekst is rood.</p>
Deze inline style zorgt ervoor dat de kleur van de tekst in deze paragraaf rood is.
Internal
Als je voor ieder element een aparte inline style moet instellen ben je erg lang bezig om de presentatie van je webpagina te creëren. Om het jezelf makkelijker te maken, kun je daarom beter kiezen voor een interne style sheet. Deze interne style sheet wordt geplaatst in het head element:
<html>
<head>
<title>Mijn eerste blog</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Deze tekst is nog steeds rood.</p>
</body>
</html>
<html>
<head>
<title>Mijn eerste blog</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Deze tekst is nog steeds rood.</p>
</body>
</html>
Doordat we in het style element vermeld hebben dat alle <p> elementen rode tekst bevatten, hoeven we dit niet specifiek nog eens in de openingstag van de paragraaf te vermelden. Als je nu in het body element een tweede paragraaf toevoegt, dan kleurt de tekst van deze tweede paragraaf ook automatisch rood.
Alhoewel de interne style sheet de voorkeur heeft van een inline style, is het toch beter om je css code in een apart bestand te plaatsen en niet samen met je html.
External
Deze methode heeft de voorkeur, vooral omdat je hiermee de style sheet voor de gehele website instelt (dus ook als deze uit meerdere pagina's bestaat).
Er wordt een apart bestand aangemaakt met daarin alleen de css code, zoals:
p {
color: red;
}
Er wordt een apart bestand aangemaakt met daarin alleen de css code, zoals:
p {
color: red;
}
Deze pagina kun je in de teksteditor bijvoorbeeld opslaan als stylesheet.css en vanuit je html bestand hier naartoe linken door middel van het <link> element:
<html>
<head>
<title>Mijn eerste blog</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<p>Deze tekst is nog steeds rood.</p>
</body>
</html>
Omdat je in het bestand stylesheet.css hebt aangegeven dat de tekst in het <p> element rood moet zijn, wordt dit in het .html bestand automatisch overgenomen. Het attribuut rel="stylesheet" geeft aan dat je naar een stylesheet wilt linken. Het attribuut href="stylesheet.css" geeft aan welk bestand hiervoor gebruikt moet worden.
Geen opmerkingen:
Een reactie posten