Wat is LessonUp
Zoeken
Kanalen
Inloggen
Registreren
Johan de Witt Scholengroep
‹
Terug naar zoeken
INF_CHR21_VWO_LES-03
CSS
1 / 13
volgende
Slide 1:
Tekstslide
Informatica
Middelbare school
vwo
Leerjaar 4
In deze les zitten
13 slides
, met
tekstslides
.
Start les
Bewaar
Deel
Printen
Onderdelen in deze les
CSS
Slide 1 - Tekstslide
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 - Tekstslide
De opbouw css code
Slide 3 - Tekstslide
Het boxmodel
Slide 4 - Tekstslide
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 - Tekstslide
het boxmodel
Slide 6 - Tekstslide
.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 - Tekstslide
maak het volgende in html
Slide 8 - Tekstslide
Slide 9 - Tekstslide
verander :
<label for="fname">First name:</label><br>
naar:
<label for="fname" style="color:red">First name:</label><br>
Slide 10 - Tekstslide
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 - Tekstslide
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 - Tekstslide
Slide 13 - Tekstslide