Presentaties
Sessie 1 : HTML basis
Sessie 2 : HTML met stijl

Sessie 2 : CSS stijlregels

☛ De stijl is de manier waarop een HTML element in de browser wordt getoond.

Voorstelling van de stijl (syntax)

De stijl wordt gezet met stijlregels. Een stijlregel bestaat uit een selector en een declaratie blok.

selector {eigenschap1 : waarde1; eigenschap2 : waarde2;}

Voorbeeld: p {color : red; font-size : 12px;}

De selector duidt op het element waarvoor de stijl geldig is.
De declaraties staan tussen { } en elke declaratie eindigt met een ; .
Een declaratie bestaat uit de naam van een eigenschap en een waarde.

Mogelijkheden om stijl toe te voegen aan HTML

Indien geen stijlen zijn gedefinieerd, wordt de standaard stijl van de browser genomen.

Stijl geldt voorStijl toevoegen inVoorbeeld
één instantie van het element
in één HTML document
stijl-attribuut van element
=> Inline style
<body>
<p style="color:red">
Deze tekst is rood</p>
</body>
alle instanties van het element
in één HTML document
stijl-element in <head>
=> Internal style
<head>
<style>

p {color:red;}
</style>
</head>
<body>
<p>
Deze tekst is rood</p>
</body>

enkele instanties van het element
in één HTML document
stijl-element in <head>
en klasselector
=> Internal style
<head>
<style>

p.rood {color:red;}
</style>
</head>
<body>
<p class="rood">
Deze tekst is rood</p>
</body>

enkele instanties van
meerdere elementen
in één HTML document
stijl-element in <head>
en enkel klasselector
=> Internal style
<head>
<style>

.rood {color:red;}
</style>
</head>
<body>
<p class="rood">
Deze tekst is rood</p>
</body>

meerdere HTML-documentenapart stijl-document
of CSS document
=> External style
Inhoud web.css : p.rood {color:red;}
Inhoud HTML :
<head>
<link rel="STYLESHEET" type="text/css" href="web.css">
</head>
<body>
<p class="rood">
Deze tekst is rood</p>
</body>

Bij een website met meerdere webpagina's is het belangrijk dat de stijl overal dezelfde is. Daarom wordt de stijl altijd in een CSS document bewaard. Zo is de inhoud gescheiden van de stijl en kan je met 1 enkele aanpassing de stijl van je volledige website aanpassen.

CSS staat voor Cascaded Style Sheet, wat betekent dat de stijlen in een welbepaalde volgorde worden genomen. Indien voor een element op meerdere plaatsen een stijl is gedeclareerd, wordt de stijl als volgt bepaald:
↪ indien aanwezig, wordt de stijl van het stijl-attribuut genomen;
↪ indien aanwezig, wordt de stijl van het stijl-element of uit het stijl-document genomen, afhankelijk van welke van beide als laatste in <head> voorkomt;
↪ indien geen stijlen aanwezig, wordt de standaard stijl van de browser genomen.

Lijst met basis stijlregels

⚠ Niet alle eigenschappen zijn mogelijk op alle HTML elementen! Een volledig overzicht vind je op W3C CSS.

Naam eigenschapMogelijke waardeVoorbeeld stijlregel (CSS code)Uitzicht in browser
color
background-color
kleurnaam of -codediv {color:red;
background-color:orange}
Deze tekst kleurt rood.
background-image
background-repeat
background-position
URL van afbeelding
repeat(-x)(-y) | no-repeat
left | right | center | top | bottom | % | px
div {background-image:url("images/huis.png");
background-repeat:no-repeat;
background-position:center;}
Deze achtergrond heeft een afbeelding.
border
border-color
border-style
border-width
 
kleurnaam of -code
solid | dotted | dashed
medium | thin | thick | px
div {border-color: green;
border-style: solid;
border-width: 2px;}

of div {border: green solid 2px;}
Deze tekst staat groen omrand.
border-top
border-bottom
border-left
border-right
 div {border-bottom-color: green;
border-bottom-style: dashed;
border-bottom-width: 2px;}

of div {border-bottom:green dashed 2px;}
Deze tekst staat op een groene rand.
box-shadow
text-shadow
px (hor) px (vert) px (blur) kleurdiv {box-shadow:5px 5px 2px #000000;
text-shadow:2px 2px #ff0000;}
Hierrond staat een schaduw.
float
clear
left | right
left | right | both
img {float: right;}
font
font-family
font-size
font-weight
 
naam lettertype
small | large | % | px
normal | bold
div {font-family:Verdana;
font-size: 14px;
font-weight: bold;}

of div {font: Verdana 14px bold;}
Dit is lettertype Verdana.
height
width
% | pxdiv {height: 50px;
width: 150px;
background-color:orange;}
Een box van 50 hoog en 150 breed.
list-style
list-style-image
list-style-position
list-style-type
 
URL van afbeelding
inside | outside
none | circle | square | decimal | lower-alpha
ul {list-style:circle;}
  • Item 1
  • Item 2
marginpx | % (marge buitenkant)div {margin: 20px;
background-color:orange;}
Deze box heeft een marge van 20 rondom buitenkant.
margin-top
margin-bottom
margin-left
margin-right
px | % div {margin-left: 20px;
background-color:orange;}
Deze box heeft links een marge van 20.
paddingpx | % (afstand tussen rand en inhoud)div {padding: 20px;
background-color:orange;}
Deze box heeft een padding van 20 rondom inhoud.
padding-top
padding-bottom
padding-left
padding-right
px | % div {padding-left: 20px;
background-color:orange;}
Deze box heeft links een padding van 20.
position
top
left
absolute | relative
px | % (afstand boven)
px | % (afstand links)
img {position: relative;
left: 100px;
top: 20px;}
text-align
text-decoration
text-indent
left | right | center | justify
none | underline
px | %
div {text-align: left;
text-decoration: underline;
text-indent: 10px;
background-color:orange;}
De tekst springt 10 in en start links.

Vrije Basisschool Terbank-Egenhoven | Workshop HTML © 2016 | Created by Els Quartier