Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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…