CSS

Web Workshop # 2

CSS er meget ligesom HTML

CSS følger en struktur som vist på billedet nedenunder.
Yes

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:

p {
  color:red;
}

HTML:

<p> Rød Farve </p>

Resultat:

Rød Farve


Prøv andre værdier som:

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

Klasse Selektoren

CSS:

.red {
  background-color:red;
}
.white-text {
  color: white;
}

HTML:

<div class="red white-text"> Rød Farve </div>

Resultat:

Rød Farve


Id Selektoren

CSS:

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

HTML:

<div id="knap"> Min Knap </div>

Resultat:

Min Knap


Egenskaber

width og height

CSS:

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

HTML:

<div class="redbox"> Rød Kasse </div>

Resultat:

Rød Farve

Prøv andre værdier som:

75px
10%
5rem
4em
8vh

padding

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:

<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:

Hej med dig jeg er en blå kasse og har padding i venstre og top

Hej med dig jeg er en rød kasse med padding på alle mine sider


borders

Borders defineres med

border:  <border-width> || <border-style> || <color>

CSS:

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

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

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

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:

Kasse med solid rød streg

Kasse med stiplet blå streg

Prøv andre værdier som:

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

Pseudo-klasser

:hover

CSS:

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

HTML:

<div class="redbox"> Jeg ændrer min farve når jeg rører musen </div>

Resultat:

Jeg ændrer min farve når jeg rører musen

Øvelse!

Lad os lave en knap!

insert_drive_file