Wat is CSS?
CSS staat voor C ascading S tyle S heets
CSS beschrijft hoe HTML- elementen moeten worden weergegeven
CSS-voorbeeld
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Klik op de knop "Probeer het zelf" om te zien hoe het werkt.
CSS-syntaxis
Een CSS-regel bestaat uit een selector en een declaratieblok :
De selector wijst naar het HTML-element naar style (h1).
Het declaratieblok (tussen accolades) bevat een of meer declaraties gescheiden door puntkomma's.
Elke declaratie bevat een CSS-eigenschapsnaam en een waarde, gescheiden door een dubbele punt.
In het volgende voorbeeld zijn alle <p>-elementen gecentreerd, rood en hebben ze een lettergrootte van 32 pixels:
Voorbeeld
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
Hetzelfde voorbeeld kan ook als volgt worden geschreven:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Extern stijlblad
Een CSS-stylesheet kan worden opgeslagen in een extern bestand:
mijnstijl.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Externe stylesheets zijn gekoppeld aan HTML-pagina's met <link> tags:
Voorbeeld
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Inline-stijl
Voorbeeld
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Trapsgewijze volgorde
Als er verschillende stijlen zijn opgegeven voor HTML-elementen, zullen de stijlen worden omgezet in nieuwe stijlen met de volgende prioriteit:
- Prioriteit 1: Inline-stijlen
- Prioriteit 2: Externe en interne stylesheets
- Prioriteit 3: Browser standaard
- Als verschillende stijlen op hetzelfde prioriteitsniveau zijn gedefinieerd, heeft de laatste de hoogste prioriteit.
Voorbeeld
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS-demo - Eén HTML-pagina - Meerdere stijlen!
Hier laten we één HTML-pagina zien met 4 verschillende stylesheets.
Klik op de Stylesheet-knoppen (1-4) om de pagina met verschillende stijlen te zien.
Volledige CSS-zelfstudie
Dit was een korte beschrijving van CSS.
Ga voor een volledige CSS-tutorial naar W3Schools CSS-tutorial .
Ga voor een volledige CSS-referentie naar W3Schools CSS Reference .