CSS basis

CSS toevoegen:
3 mogelijkheden

Dit is tekst die op een groene
achtergrondkleur te lezen is.

Inline
(op elementniveau)

<head>
<style>
p { background-color:green; }
</style>
</head>
<body>
Hier staat wat tekst.
</body>
Embedded
(op paginaniveau)

<head>
<link rel="stylesheet" href="layout.css">
</head>
<body>
Hier komt wat tekst.
</body>
Externe stylesheet
(op websiteniveau)

Gebruik externe stylesheets.
Stop ze altijd op dezelfde plaats.

p { color: #ccc; }
!
Een CSS-regel
selector property value

Soorten selectors
(ze ‘selecteren’ HTML-elementen)
p { color: red; }
.inleiding { color: red; }
#zijkolom { color: red; }

Makkelijker CSS schrijven met
geavanceerde selectors (1/2)
p.inleiding { ... }
div#zijkolom { ... }
p, .belangrijk { ... }
p .belangrijk { ... }
p > em { ... }
h1 + p { ... }
...

Makkelijker CSS schrijven met
geavanceerde selectors (2/2)
p::before { ... }
p::after { ... }
li:last-child { ... }
li:first-child { ... }
li:nth-child(2) { ... }
input[type="text"] { ... }
...

Leer de selectors kennen.
Gebruik een naslagwerk.

Vele properties,
elk met hun eigen values
background-color, color,
font-weight, font-family,
text-transform, width, height,
position, float, font-style,
line-height, text-align,
padding, margin, overflow…

Leer de properties kennen.
Gebruik een naslagwerk.

Valideer de syntax van je CSS
(via de web developer toolbar)

Elk HTML-element is een
rechthoeken doos die je met
hulp van CSS kan vormgeven

Elke rechthoeken doos
bevat inhoud (content)
De tekst is de inhoud.
<img src="foto.jpg" alt="">
Nog wat tekst.

Elke rechthoek heeft
aanpasbare eigenschappen
padding
border
margin

Block-level elementen
• Staan op hun eigen regel
• CSS width geldt voor de content
• Geen CSS width? Element neemt alle beschikbare
breedte in.
• Geen CSS height? Element neemt hoogte in van
zijn content
• width:auto ≠ width:100%
• Gebruik margin om horizontaal te centreren of
rechts uit te lijnen
• Collapsing margins: als verticale margins elkaar
raken, verdwijnt de kleinste margin

Inline elementen
• Links en rechts kan inhoud van andere elementen
verschijnen. Ze verschijnen dus op dezelfde
tekstregel als andere (inline) elementen.
• Kan je breedte noch hoogte geven
• Kan je margin-top noch margin-bottom geven
• De breedte wordt bepaald door de content
• De hoogte (en margin-top of margin-bottom) wordt
bepaald door font-size, line-height en vertical-align

Maak een inline element block-level
en een block-level element inline
display:inline;
display:block;

display:inline-block
• Net als inline elementen kan er content van andere
elementen links en rechts van het inline-block
element verschijnen.
• Anders dan inline elementen: je kan width en
height geven (de volledige regel beweegt dan mee).
• Anders dan inline elementen: je kan margin-top en
margin-bottom geven.
• Net als block-level elementen: CSS width geldt voor
de content.
• Gebruik vertical-align om verticaal uit te lijnen.

Spaties in code zorgen voor spaties
tussen inline-block elementen
<ul>
<li>Appelen</li>
<li>Peren</li>
<li>Citroenen</li>
</ul>

<ul>
<li>Appelen</li><li>Peren</li><li>Citroenen</li>
</ul>
Eenvoudigste oplossing

Andere mogelijke oplossing
<ul>
<li>Appelen</li><li>Peren</li><li>Citroenen</li>
</ul>

CSS basis

More Related Content

Similar to CSS basis (13)

More from Thomas Byttebier (6)

CSS basis