INF_CHR21_VWO_LES-03

CSS
1 / 13
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolvwoLeerjaar 4

Cette leçon contient 13 diapositives, avec diapositives de texte.

Éléments de cette leçon

CSS

Slide 1 - Diapositive

WAT KAN JE MET CSS
- Layouts mee maken 
- kleuren veranderen
- html elementen positioneren in jouw layout
-  html elementen verkleinen of vergroten
enz. enz.

Slide 2 - Diapositive

De opbouw css code

Slide 3 - Diapositive

Het boxmodel

Slide 4 - Diapositive

Margin, Border, Padding
Alles in css is als een doos om de content heen
Begrijpen van deze doos helpt CSS beter te snappen en complexe layouts in css te maken

Slide 5 - Diapositive

het boxmodel

Slide 6 - Diapositive

.box {
  width:200px;
  height:30px;
  margin-top: -40px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 4em;
  padding: 100px;
}
.container{
  height:300px
}    

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

Slide 7 - Diapositive

maak het volgende in html

Slide 8 - Diapositive

Slide 9 - Diapositive

verander :
<label for="fname">First name:</label><br>
naar: 
<label for="fname" style="color:red">First name:</label><br>

Slide 10 - Diapositive

verander:
<label for="fname" style="color:red">First name:</label><br>
naar: 
<label for="fname" style="border: 5px solid red;">First name:</label><br>

Slide 11 - Diapositive

Samen CSS maken
.naam {  } // dit is een class in css
<h1 class="naam"> test</h1>

#naam{ } // dit is een id in css
<h1 id="naam"> test </h1>

h1{ } // dit is een class in css

Slide 12 - Diapositive

Slide 13 - Diapositive