INF_CHR21_VWO_LES-03

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

CSS

WAT KAN JE MET CSS

- Layouts mee maken 

- kleuren veranderen

- html elementen positioneren in jouw layout

-  html elementen verkleinen of vergroten

enz. enz.

De opbouw css code

Het boxmodel

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

het boxmodel

.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

maak het volgende in html

verander :

<label for="fname">First name:</label><br>

naar: 

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

verander:

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

naar: 

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

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