custom...• Hvad er CSS? • Internettets lille byggesten • Fra volapyk til lækker grafik • Brug 'Inspicér element' og 'Opdag' • Sider du skal bookmarkeFra ...

custom.cssLav det helt eget design med css.

• Hvad er CSS?

• Internettets lille byggesten <div>

• Fra volapyk til lækker grafik

• Brug 'Inspicér element' og 'Opdag'

• Sider du skal bookmarke

• Vi kigger på det live…

Lav dit helt eget design med css

Cascading Style Sheet

Hvad er CSS?

Serieforbundet Stil Ark

Hvad er CSS?

template.css

Hvad er CSS?

Hjem Kontakt Om os

template.css

Hvad er CSS?

Hjem Kontakt Om os

Internettets lille byggesten <div><div>

</div>

Internettets lille byggesten <div><div> <div>

</div> </div>

<div> <div> <div>

</div> </div> </div>

Internettets lille byggesten <div>

<div> <div> <div>

</div> </div> </div>

Internettets lille byggesten <div>

Internettets lille byggesten <div><div>

</div>

<div>

</div>

<div>

</div>

Internettets lille byggesten <div><div class=“yder-boksen“>

<div class=“inder-boksen”>

</div>

</div>

Internettets lille byggesten <div>/* Indholdet i template.css */

.yder-boksen { width: 1000px; height: 500px; border: 4px solid #c1c1c1; }

.inder-boksen { width: 100px; height: 100px; background-color: #c1c1c1; margin: 50px; }

Internettets lille byggesten <div>

Internettets lille byggesten <div>1000 px

500 px

4 px ramme i grå

100 px

100 px

baggrundsfarve i grå

margin 50 px

html tags kan også styles

<h1>Overskrift</h1> h1 { font-family: Arial; font-size: 72px; color: #c1c1c1; }

Fra volapy til lækker grafik.elementet { width: 100%; height: 500px; border: 2px solid #000000; background-color: #22b8f0; box-shadow: 10px 10px 30px #c1c1c1; border-radius: 5px; }

Fra volapy til lækker grafik

Brug Inspicér element eller opdag

Brug Inspicér element eller opdag

Sider du skal bookmarke

w3schools.com html • css • bootstrap

css3gen.com css generator

css-tricks.com masser af css stumper + andet godt

custom.cssVi kigger på det live her…