

web/03
CSS Introductie
wat, hoe linken, selectoren
Pilaren van het web
CSS is voor presentatie
Voor wanneer je visueel de HTML anders wilt weergeven:
- Breedte aanpassen van iets
- font-grootte
- (Achtergrond) kleur
- Alignering
- En zo veel meer...
De pilaren van het web

Wat is CSS
CSS
- Cascading Style Sheet
- Cascade (nl: vallen)
-
De meest prachtige taal dat je in dit graduaat gaat zien 😇
CSS-regelset
body {
background: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>tekst</pp>
</body>
</html>
CSS-regelset
body {
background: pink;
}
Selector
Declaration
CSS-regelset
body {
background: pink;
}
Property (eigenschap)
Value (waarde)
CSS-regelset
/* Dit is commentaar */
body {
background: pink;
}
Je kan ook commentaar schrijven in CSS
CSS toevoegen
CSS toevoegen
Verschillende manieren:
- Inline (bad practice)
- Embedded (op pagina niveau)
- Externe Stylesheet (op websiteniveau)
Inline CSS
👎 Bad practice 😒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background: pink;">
<p>tekst</pp>
</body>
</html>
1
👎 Bijna altijd een bad practice voor performance, behalve in individuele cases 😒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body {
background-color: pink;
}
</style>
</head>
<body>
<p>tekst</pp>
</body>
</html>
Embeded CSS
2
body {
background: pink;
}
index.html
css/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>...</body>
</html>
style.css
Extern stylesheet
3
Selectoren
Type-selector
Selecteer op basis van het HTML-element
h1, h2, p {
background: red;
}
<h1>Mijn titel</h1>
<h2>Mijn titel</h2>
<h3>Mijn titel</h3>
<h4>Mijn titel</h4>
<h5>Mijn titel</h5>
<h6>Mijn titel</h6>
<p>Een paragraaf</p>
Class-selector
Selecteer op basis van een class attribuut: "."-selector.
.bg-red,
.my-class {
background: red;
}
<h1 class="bg-blue">Mijn titel</h1>
<h2 class="bg-blue">Mijn titel</h2>
<h3 class="bg-red">Mijn titel</h3>
<h4 class="bg-red">Mijn titel</h4>
<h5 class="bg-blue">Mijn titel</h5>
<h6 class="bg-blue">Mijn titel</h6>
<p class="my-class">Een paragraaf</p>
ID-selector
Selecteer op basis van een id attribuut: "#"-selector.
👎 Bad practice
#my-unique-id-3,
p {
background: red;
}
<h1 id="my-unique-id-3">Mijn titel</h1>
<h2>Mijn titel</h2>
<h3>Mijn titel</h3>
<h4>Mijn titel</h4>
<h5>Mijn titel</h5>
<h6>Mijn titel</h6>
<p>Een paragraaf</p>
Combinatie selectors
Combineer elke selector dat je maar wilt.
ul a {
background: green;
}
<h1 id="my-unique-id-3">Mijn titel</h1>
<p>Een paragraaf met <a href="http://fb.com">een link</a></p>
<ul>
<li>Een beetje tekst</li>
<li>Een beetje tekst met <a href="http://fb.com">een link</a></li>
<li>Een beetje tekst</li>
<li>Een beetje tekst</li>
</ul>
Attribute selector
Selecteer op basis van een attribuut.
a[target="_blank"] {
background: green;
}
<a href="http://fb.com" >een link</a>
<a href="http://fb.com" target="_blank">een link</a>
<a href="http://fb.com">een link</a>
<ul>
<li>Een beetje tekst</li>
<li><a href="http://fb.com">een link</a></li>
<li><a href="http://fb.com" target="_blank">een link</a></li>
</ul>
Attribute selector
Selecteer op basis van een attribuut.
p[class],
a[class]{
background: green;
}
<p class="feest">een link</a>
<a id="yes" href="http://fb.com" target="_blank">een link</a>
<a class="amai" href="http://fb.com">een link</a>
Pseudo class selector
Selecteer op basis van een attribuut.
a:hover {
color: green;
}
<p class="feest">een link</a>
<a id="yes" href="http://fb.com" target="_blank">een link</a>
<a class="amai" href="http://fb.com">een link</a>
Let's play!
Oefening @Campus
De browser inspector
Uitdaging
Carni vs Veggi
(Enkel voor studenten met voorkennis)
Meerdere declaraties
Meerdere declarations
Het is mogelijk om binnen 1 selector meerdere declarations mee te geven!
Experimenteer al eens met deze properties!
body {
background: green;
color: blue;
text-align: center;
}
DigExp - WEB/03 - CSS Intro
By Lecturer GDM
DigExp - WEB/03 - CSS Intro
Wat is CSS? CSS toevoegen, Selectoren, meerdere declarations.
- 221