What is LessonUp
Search
Channels
Log in
Register
Johan de Witt Scholengroep
‹
Return to search
INF_CHR21_VWO_LES-03
CSS
1 / 13
next
Slide 1:
Slide
Informatica
Middelbare school
vwo
Leerjaar 4
This lesson contains
13 slides
, with
text slides
.
Start lesson
Save
Share
Print lesson
Items in this lesson
CSS
Slide 1 - Slide
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 - Slide
De opbouw css code
Slide 3 - Slide
Het boxmodel
Slide 4 - Slide
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 - Slide
het boxmodel
Slide 6 - Slide
.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 - Slide
maak het volgende in html
Slide 8 - Slide
Slide 9 - Slide
verander :
<label for="fname">First name:</label><br>
naar:
<label for="fname" style="color:red">First name:</label><br>
Slide 10 - Slide
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 - Slide
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 - Slide
Slide 13 - Slide