Hvaderkode

#CSS

###Web Workshop #2

CSS er meget ligesom HTML

CSS følger en struktur som vist på billedet nedenunder.
![Yes](https://www.w3schools.com/css/selector.gif)

Der er en **Selektor** som bestemmer om reglen skal gælde for:
- et element, f.eks. rammes `<p>` med `p { color: red }`,
- en klasse, f.eks. rammes `<p class="min-klasse">` med `.min-klasse { color-red }`, 
- et id,  f.eks. rammes `id="mit-id"` med `#mit-id { color-red }`,

Der er en **Deklarations blok** som indeholder en række deklarationer og kendes ved de krøllede klammer `{` og `}`
Der er et antal af **Deklarationer** som hver altid indeholder en **Egenskab** (property), et kolon `:` og en **Værdi**(value) og til sidst et semikolon `;` som afslutter Deklarationen.

##Selektorer

#### Element Selektoren
CSS:

```css
p {
  color:red;
}
```
HTML:

```html 
<p> Rød Farve </p>
```
Resultat:
<p style="color:red;"> Rød Farve </p>
Prøv andre værdier som:

```
blue
yellow
#7833FF
RGB(255, 160, 122)
```

---

#### Klasse Selektoren
CSS:

```css
.red {
  background-color:red;
}
.white-text {
  color: white;
}
```
HTML:

```html 
<div class="red white-text"> Rød Farve </div>
```
Resultat:
<div class="red white-text"> Rød Farve </div>

---

#### Id Selektoren
CSS:

```css
#knap {
  color: white;
  background-color:red;
  width: 50px;
}
```
HTML:

```html 
<div id="knap"> Min Knap </div>
```
Resultat:
<div style="color:white; background-color:red; width:50px;"> Min Knap </div>

---

##Egenskaber

#### width og height
CSS:

```css
.redbox {
  background-color: red;
  width: 100px;
  height: 50px;
}
```
HTML:

```html 
<div class="redbox"> Rød Kasse </div>
```
Resultat:
<div style="background-color:red;width:100px;height:50px;"> Rød Farve </div>
Prøv andre værdier som:

```
75px
10%
5rem
4em
8vh
```

---
#### padding
CSS:

```css
.red { background-color: red; }
.blue { background-color: blue; }

.box {
  width: 300px;
  height: 100px;
}

.indrykket {
  padding-left: 40px;
  padding-top: 10px;
}

.indrykket-over-det-hele {
  padding: 30px 30px 30px 30px;
}
```
HTML:

```html 
<div class="blue box indrykket"> Hej med dig jeg er en blå kasse og har padding i venstre og top </div>
<div class="red box indrykket-over-det-hele"> Hej med dig jeg er en rød kasse med padding på alle mine sider </div>
```
Resultat:
<div style="background-color:blue;width:300px;height:100px;padding-top:10px;padding-left:40px;"> Hej med dig jeg er en blå kasse og har padding i venstre og top</div>
<div style="background-color:red;width:300px;height:100px;padding: 30px 30px 30px 30px;"> Hej med dig jeg er en rød kasse med padding på alle mine sider </div>

---

#### borders
Borders defineres med

```css
border:  <border-width> || <border-style> || <color>
```
CSS:

```css
.box {
  width: 300px;
  height: 100px;
}

.border-a {
  border: 3px solid red;
}

.border-b {
  border: 6px dashed blue;
}
```
HTML:

```html 
<div class="box border-a"> Kasse med solid rød streg </div>
<div class="box border-b"> Kasse med stiplet blå streg </div>
```
Resultat:
<div style="border: 3px solid red;width:300px;height:100px"> Kasse med solid rød streg </div>
<div style="border: 6px dashed blue;width:300px;height:100px"> Kasse med stiplet blå streg </div>

Prøv andre værdier som:

```
2rem dotted #CD5C5C
10% ridge RGB(255, 160, 122)
```

---

##Pseudo-klasser

#### :hover
CSS:

```css
.redbox {
  background-color: red;
  width: 200px;
  height: 50px;
}
.redbox:hover {
 background-color: blue;
}
```
HTML:

```html 
<div class="redbox"> Jeg ændrer min farve når jeg rører musen </div>
```
Resultat:
<div class="redbox" style="width:200px"> Jeg ændrer min farve når jeg rører musen </div>

## Øvelse!
####Lad os lave en knap!