css cascading style sheets. varför css lätt att underhålla mindre filstorlekar Ökad...
Post on 21-Dec-2015
218 views
TRANSCRIPT
![Page 1: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/1.jpg)
CSS
Cascading Style Sheets
![Page 2: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/2.jpg)
Varför CSS
• Lätt att underhålla
• Mindre filstorlekar
• Ökad tillgänglighet
• Olika media
• Större typografisk kontroll
![Page 3: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/3.jpg)
INTRO TILL CSS
L2
![Page 4: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/4.jpg)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>L2</title></head>
<body><h1>Rubrik nivå 1</h1><h2>Rubrik nivå 2</h2><p> Lorem ipsum ...</p></body>
![Page 5: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/5.jpg)
![Page 6: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/6.jpg)
CSS-fil: L2.CSS
<head><meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /><title>L2</title><link href="L2.css" rel="stylesheet" type="text/css" />
</head>
h1 { text-align: center; }h2 { font-style: italic; }p { color: maroon;}
![Page 7: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/7.jpg)
Deklarationer
• h1 { text-align: center; }
• h2 { font-style: italic; }
• p { color: maroon;}
![Page 8: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/8.jpg)
Kommentar, kombinerade selektorer
@charset "utf-8";
h1, h2 { text-align: center; color:#007FFF; /*Färgerna anges som RR GG BB*/}
h2 { font-style: italic; }
p { color: maroon;}
![Page 9: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/9.jpg)
Formattera font
h2
{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 100%;
line-height: 120%;
font-family:Arial, Helvetica, sans-serif;
}
![Page 10: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/10.jpg)
Kantlinjer
h1
{
border-width: 1px;
border-style: dashed;
border-color: red;
}
![Page 11: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/11.jpg)
Padding
p { color: maroon; padding-top: 1em; padding-right: 2em; padding-bottom: 3em; padding-left: 4em; border-width: 1px; border-style: solid; border-color: blue; line-height: 130%;}
![Page 12: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/12.jpg)
Margin
p
{
color: maroon;
margin-top: 1em;
margin-bottom: 3em;
border-width: 1px;
border-style: solid;
border-color: blue;
line-height: 130%;
}
![Page 13: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/13.jpg)
STILMALLAR
3 sätt att stila på
-
L4
![Page 14: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/14.jpg)
In-line-kod <h1>Rubrik 1</h1><p style="font-family:Arial, Helvetica,
sans-serif; margin:15px; padding:1em; background-color:gray; width:10em; color:yellow"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
(4a)
![Page 15: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/15.jpg)
Rubrikformat<title>L4</title><style type="text/css" media="screen">
p{font-family:Arial, Helvetica, sans-serif;margin:15px;padding:1em;background-color:red;width:10em;color:black;}
</style></head>
![Page 16: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/16.jpg)
Extern stilmall@charset "utf-8";
p{font-family:Arial, Helvetica, sans-serif;margin:15px;padding:1em;background-color:gray;width:10em;color:white;}
h1{margin:15px;}
![Page 17: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/17.jpg)
Box-modellen
L5
![Page 18: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/18.jpg)
Box-modellen<div id="content">
<h1>Rubrik 1</h1>
<p>Lorem ... </p>
</div>
#content{margin:10px;border:5px solid gray;background-color:blue;width:200px;padding:25px;}
p{font-family:Arial, Helvetica, sans-serif;margin:15px;padding:10px;background-color:gray;margin:20px;border:10px dashed white;background-color:red;width:120px;}
h1{color:white;}
![Page 19: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/19.jpg)
Selektorer
![Page 20: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/20.jpg)
Selektor { egenskap: värde;}
@charset "utf-8";
/* CSS Document */
p {color:black;}
p em {color:green;}
div p {color:red;}
.special{background-color:#999999;
![Page 21: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/21.jpg)
<body><h1>Detta är <em>första</em> rubriken </h1><p>Och här kommer <em>brödtexten</em> </p><p>Lorem ipsum … </p><div><p>Ut wisi enim ad minim … </p></div><h1 class="special">Detta är
<em>andra</em>rubriken </h1><p class="special">Nam liber tempor </p><p>Claritas est etiam.</p></body>
![Page 22: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/22.jpg)
![Page 23: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/23.jpg)
ID-selektrorer
p {color:black;}p#vanlig{color:blue;}p#vanlig em {color:green;}div p {color:red;}.special{background-color:#999999;}#speciell{background-color:#999900;}h1#first_header {border:dotted}* {color:maroon}
![Page 24: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/24.jpg)
<body><h1 id="first_header">Detta är <em>första</em> rubriken
</h1><p id="vanlig">Och här kommer <em>brödtexten</em>
</p><p>Lorem ipsum dolor … </p><div id="speciell"><p>Ut wisi enim … </p></div><h1 class="special">Detta är <em>andra</em>rubriken
</h1><p class="special">Nam liber tempor …. </p><p>Claritas est etiam ….</p></body>
![Page 25: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/25.jpg)
![Page 26: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/26.jpg)
Pseudoelement
• p:first-letter {font-size:36px}
• p:first-line {font-size:24px}
![Page 27: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/27.jpg)
![Page 28: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/28.jpg)
Att manipulera text
@charset "utf-8";/* CSS Document */
p#vanlig{}
p#indent{text-indent: 25px;}
p#space{letter-spacing: 0.25em;}
p#height{line-height: 150%;}
p#transform{ text-transform: uppercase;}
![Page 29: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/29.jpg)
![Page 30: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/30.jpg)
Position static
p#third{
position: static;
}
![Page 31: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/31.jpg)
![Page 32: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/32.jpg)
Position relative
p{border: 1px solid #333333;}p#first{}p#second{}p#third{
position: relative;left: 20px;top: 30px;
}p#fourth{}
![Page 33: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/33.jpg)
![Page 34: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/34.jpg)
Position absolute – rel dok@charset "utf-8";/* CSS Document */p{
border: 1px solid #333333;}p#first{}p#second{}p#third{
border: 1px solid #f00;position: absolute;left: 20px;top: 30px;color:red;
}p#fourth{}
![Page 35: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/35.jpg)
![Page 36: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/36.jpg)
Position Fixed – rel browser@charset "utf-8";/* CSS Document */p{
border: 1px solid #333333;}p#first{}p#second{}p#third{
border: 1px solid #f00;position: fixed;left: 20px;top: 30px;color:red;font-weight: bolder;
}p#fourth{}
![Page 37: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/37.jpg)
![Page 38: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/38.jpg)
Float
• <img src="godis.jpg" alt="godis">• <p id="first">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
• <p id="second">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel …
![Page 39: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/39.jpg)
@charset "utf-8";/* CSS Document */p{
}img{
margin: 10px;}p#first{}p#second{}p#third{}p#fourth{}
![Page 40: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/40.jpg)
![Page 41: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/41.jpg)
Float left• @charset "utf-8";• /* CSS Document */• p{•• }• img{• margin: 10px;• float:left• }• p#first{}• p#second{}• p#third{}• p#fourth{}
![Page 42: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/42.jpg)
![Page 43: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/43.jpg)
@charset "utf-8";/* CSS Document */p{float:right}img{
margin: 10px;float:right
}p#first{}p#second{}p#third{}p#fourth{}
![Page 44: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/44.jpg)
![Page 45: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/45.jpg)
Display
<body><img src="godis2.jpg" alt="godis"><img
src="godis2.jpg" alt="godis"><img src="godis2.jpg" alt="godis"><img src="godis2.jpg" alt="godis">
</body>
img{display:inline; margin: 10px;}
![Page 46: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/46.jpg)
![Page 47: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/47.jpg)
}
img{
display:block; margin: 10px;
}
![Page 48: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/48.jpg)
![Page 49: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/49.jpg)
Bakgrundsbild
![Page 50: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/50.jpg)
<div id="content">
<h1> Rubrik 1</h1>
<p> Lorem ... </p>
</div>
![Page 51: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/51.jpg)
@charset "utf-8";#content{background-image:url(book_600.jpg);margin:50px;width:500px;padding-top:0px;padding-left:95px;padding-below:25px;}
p{font-family:Arial, Helvetica, sans-serif;margin:15px;padding:30px;padding-top:10px;margin:20px;width:120px;}
h1{font-family:Arial, Helvetica, sans-serif;margin:15px;padding:2px;padding-top:10px;padding-left:30px;margin:20px;width:120px;}
![Page 52: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/52.jpg)
![Page 53: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/53.jpg)
Upprepad bild
#content{background-image:url(book_600_1.jpg);background-repeat:repeat-y;margin:50px;width:500px;padding-top:0px;padding-left:95px;padding-below:25px;}
![Page 54: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/54.jpg)
![Page 55: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/55.jpg)
![Page 56: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/56.jpg)
<h1 id="header">Sidans rubrik</h1>
<p> Lorem ipsum ... </p>
@charset "utf-8";h1#header{color:#036;font-size:120%;font-weight:normal;text-transform:uppercase;text-align:center;letter-spacing: .5em;padding: .4em 0;border-top: 1px solid #069;border-bottom:1px solid #069;background: url(bild.jpg) repeat-x;
}
![Page 57: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/57.jpg)
![Page 58: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/58.jpg)
”Fotoalbum”
L12
![Page 59: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/59.jpg)
![Page 60: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/60.jpg)
<div class="thumbnail"><img src="Bild1-100.jpg" alt="bild 1" />
<p>Första bilden</p></div><div class="thumbnail">
<img src="Bild2-100.jpg" alt="bild 2" /> <p>Andra bilden</p></div><div class="thumbnail">
<img src="Bild3-100.jpg" alt="bild 3" /> <p>Tredje bilden</p></div><div class="thumbnail">
<img src="Bild4-100.jpg" alt="bild 4" /> <p>Fjärdebilden</p></div><div class="thumbnail">
<img src="Bild5-100.jpg" alt="bild 5" /> <p>Femte bilden</p></div>
@charset "utf-8";
div.thumbnail{width: 130px;float:left;margin: 0 10px 10px 0;background: url(Bild_bak.jpg) no-
repeat;}
![Page 61: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/61.jpg)
![Page 62: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/62.jpg)
<div class="thumbnail"><img src="Bild1-100.jpg" alt="bild 1" />
<p>Första bilden</p></div><div class="thumbnail">
<img src="Bild2-100.jpg" alt="bild 2" /> <p>Andra bilden</p></div><div class="thumbnail clear">
<img src="Bild3-100.jpg" alt="bild 3" /> <p>Tredje bilden</p></div><div class="thumbnail">
<img src="Bild4-100.jpg" alt="bild 4" /> <p>Fjärdebilden</p></div><div class="thumbnail clear">
<img src="Bild5-100.jpg" alt="bild 5" /> <p>Femte bilden</p></div>
div.thumbnail{width: 130px;float:left;margin: 0 10px 10px 0;background: url(Bild_bak.jpg) no-repeat;}
div.thumbnail img{margin:10px 0 0 10px;border:1px solid #777;}
div.thumbnail p{ margin: 0;
padding:0 20px 20px 10px;background: url(Bild_bak.jpg) no-repeat 0 100%; }
.clear{ clear:left;}
![Page 63: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/63.jpg)
![Page 64: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/64.jpg)
div.thumbnail{float:left;width: 250px;margin: 0 10px 10px 0;padding-bottom:10px;border:1px solid #777;}
div.thumbnail img{float: left;border:1px solid #777;margin:10px 10px 0 10px;}
div.thumbnail p{ margin: 0;
padding:10px; }
<div class="thumbnail"><img src="Bild1-100.jpg" alt="bild 1" />
<p>Första bilden</p></div><div class="thumbnail">
<img src="Bild2-100.jpg" alt="bild 2" /> <p>Andra bilden</p></div><div class="thumbnail">
<img src="Bild3-100.jpg" alt="bild 3" /> <p>Tredje bilden</p></div><div class="thumbnail">
<img src="Bild4-100.jpg" alt="bild 4" /> <p>Fjärdebilden</p></div><div class="thumbnail">
<img src="Bild5-100.jpg" alt="bild 5" /> <p>Femte bilden</p></div>
![Page 65: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/65.jpg)
![Page 66: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/66.jpg)
Citat
L13
![Page 67: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/67.jpg)
![Page 68: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/68.jpg)
<blockquote>
<p>Lorem ipsum ....</p>
<p class="source">
Julias Caesar
</p>
</blockquote>
</body>
</html>
![Page 69: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/69.jpg)
blockquote{ margin: 1em 0;
border: 1px solid #ddd;background: url(13.jpg) 5px 5px no-repeat;padding-top:30px;}
blockquote p{ padding:0 70px;}
blockquote p.source{ background: url(13b.jpg) no-
repeat 100% 100%;padding-bottom:30px;margin: 0 5px 5px 0;text-align: right;font-style: italic; }
<body>
<blockquote><p>Lorem ipsum ...</p>
<p class="source">Julias Caesar</p>
</blockquote>
</body>
![Page 70: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/70.jpg)
![Page 71: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/71.jpg)
@charset "utf-8";
blockquote{ margin: 1em 0;
border: 1px solid #000;background: #000 url(13c.jpg) no-repeat 0 0;padding-top:1px;color: #fff;/*width: 500px;*/}
blockquote p{ padding:0 1em 0 80px;}
blockquote p.source{ margin: 0;
border-top: 5px solid #fff;padding: .5em .5em .5em 80px;background:#336;font-style: italic;}
![Page 72: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/72.jpg)
![Page 73: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/73.jpg)
Runda hörn
L17
![Page 74: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/74.jpg)
![Page 75: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/75.jpg)
<body><div id="pullquote"><h2>Rubriken</h2><P>Lorem ipsum ...
</P><p
class="furtherinfo">
<a href="#">mer info</a>
</p>
</body>
div#pullquote{margin:2em;background:#00069c url(Bild_17a.jpg) no-repeat;}
div#pullquote h2{margin: 0;padding:20px 20px 0 20px;background: url(Bild_17b.jpg) no-repeat 100% 0;color:#2ABFFF;}
div#pullquote p{padding:0 20px ;color:#2ABFFF;}
div#pullquote p.furtherinfo{padding: 0 0 0 20px;background: url(Bild_17d.jpg) no-repeat 0 100%;}
div#pullquote p.furtherinfo a{display:block;padding: 0 20px 20px 0;text-align:right;background: url(Bild_17c.jpg) no-repeat 100% 100%;color:#2ABFFF;}
![Page 76: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/76.jpg)
![Page 77: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/77.jpg)
div#pullquote{background:#00069c url(Bild_17y.jpg) no-
repeat 0 100%;width:400px;color:#2ABFFF;}
div#pullquote p{padding:0 20px ;color:#2ABFFF;}
div#pullquote h2{margin: 0;padding:20px 20px 0 20px;background: url(Bild_17x.jpg) no-repeat 100% 0;color:#2ABFFF;}
div#pullquote p.furtherinfo{text-align:right;}
div#pullquote p.furtherinfo a{color:#2ABFFF;}
<body><div id="pullquote"><h2>Rubriken</h2><P>Lorem ipsum ... </P><p class="furtherinfo"><a href="#">mer info</a></p>
</body></html>
![Page 78: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/78.jpg)
![Page 79: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/79.jpg)
Länkar
L10
![Page 80: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/80.jpg)
![Page 81: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/81.jpg)
Länkar – 5 tillstånd
• Normal a:link
• Visited a:visited
• Focus a:focus
• Hover a:hover
• Active a:active
![Page 82: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/82.jpg)
<p> Lorem ipsum dolor sit amet, <a href="L8.html">consectetur </a>adipisicing elit, sed do eiusmod tempor incididunt ut labore <a href="L8.html">et dolore magna</a> aliqua. Ut enim ad <a href="http://www.tfe.umu.se">minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
a{color:blue;}
a:link{color: red;}
a:visited{color: green;}
a:hover{color:black;font-weight:bold;text-decoration:none;border-bottom:1px solid blue;padding: .4em 0;position: relative;z-index: 1;background: yellow;}
![Page 83: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/83.jpg)
![Page 84: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/84.jpg)
Tabeller
L14
![Page 85: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/85.jpg)
![Page 86: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/86.jpg)
<table> <caption> Prislista för maskinskruv, trådspik, bultar och fjäderbrickor </caption> <tr> <td>Detalj</td> <td>Maskinskruv</td> <td>Trådspik</td> <td>Bultar</td> <td>Fjäderbrickor</td> </tr> <tr> <td>1 kg</td> <td>2.50</td> <td>3.50</td> <td>4.50</td> <td>2.50</td> </tr> <tr> <td>2 kg</td> <td>3.00</td>
![Page 87: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/87.jpg)
<table summary="Tabell med skruv, spik, bult och bricksor för 1 till 4 kilo"> <caption> Prislista för maskinskruv, trådspik, bultar och fjäderbrickor </caption> <thead> <th>Detalj</th> <th abbr="skruv">Maskinskruv</th> <th abbr="spik">Trådspik</th> <th abbr="bultv">Bultar</th> <th abbr="brickor">Fjäderbrickor</th> </thead> <tbody> <tr> <td>1 kg</td> <td>2.50</td> <td>3.50</td> <td>4.50</td> <td>2.50</td> </tr> <tr> <td>2 kg</td> <td>3.00</td>
![Page 88: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/88.jpg)
@charset "utf-8";
caption{text-align:left;margin:0 0 .5em 0;font-weight:bold;}
table{border-collapse:collapse;}
th, td{border-right: 1px solid #fff;border-bottom: 1px solid #fff;padding: .5em; }
tr{background:#B0C4D7;}
![Page 89: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/89.jpg)
<table summary="Tabell med skruv, spik, bult och bricksor för 1 till 4 kilo">
<caption> Prislista för maskinskruv, trådspik, bultar och
fjäderbrickor </caption> <thead> <th>Detalj</th> <th abbr="skruv">Maskinskruv</th> <th abbr="spik">Trådspik</th> <th abbr="bultv">Bultar</th> <th abbr="brickor">Fjäderbrickor</th> </thead> <tbody> <tr> <th>1 kg</th> <td>2.50</td> <td>3.50</td> <td>4.50</td> <td>2.50</td> </tr> <tr> <th>2 kg</th> <td>3.00</td> <td>4.00</td> <td>5.00</td> <td>3.00</td> </tr> <tr> <th>3 kg</th> <td>3.50</td>
caption{text-align:left;margin:0 0 .5em 0;font-weight:bold;}
Table {border-collapse:collapse;}
th, td{border-right: 1px solid #fff;border-bottom: 1px solid #fff;padding: .5em;}
Tr {background:#B0C4D7;}
thead th{ background: #036;
color: #fff; }
tbody th{ font-weight: normal;
background:#658CB1;}
![Page 90: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/90.jpg)
![Page 91: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/91.jpg)
<tr class="alternate">
<th>2 kg</th>
<td>3.00</td>
<td>4.00</td>
<td>5.00</td>
<td>3.00</td>
</tr>
tr.alternate
{
background: #D7E0EA;
}
tr.alternate th
{
background:#8AA9C7;
}
![Page 92: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/92.jpg)
![Page 93: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/93.jpg)
Att disponera sidan
![Page 94: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/94.jpg)
Tvåspaltig sidlayout – inte ännu
![Page 95: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/95.jpg)
<body><div id="nav"> <ul> <li><a href="#">Länk 1 </a></li> <li><a href="#">Länk 2 </a></li> <li><a href="#">Länk 3 </a></li></div><div id="content"><h1>Tvåspaltig design</h1><p>Lorem ipsum dolor sit amet, </p>
</body>
![Page 96: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/96.jpg)
body{margin: 0px;padding: 0px;
}
div#nav{position:absolute;width: 150px;border-top-width: 0px;border-right-width: 2px;border-bottom-width: 0px;border-left-width: 0px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-right-color: #CC0000;
}
div#content{margin-left:150px;}
![Page 97: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/97.jpg)
![Page 98: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/98.jpg)
body{ margin: 0px;padding: 0px;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1em;}
div#nav{ position:absolute;width: 150px;left: 0px;top: 0px;margin-top: 22px;margin-left: 15px;padding-top: .5em;border-top-width: 2px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: #069;border-bottom-color: #069;}
![Page 99: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/99.jpg)
div#nav ul{margin-top: 0px;margin-bottom: .8em;
}
div#nav li{font-size: .75em;font-weight: bold;
}div#content{
margin-left:165px;margin-top: 20px;padding-right: 1em;padding-bottom: 0px;padding-left: 1em;
}
![Page 100: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/100.jpg)
![Page 101: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/101.jpg)
Trespaltig med float och div
![Page 102: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/102.jpg)
<body><div id="header"><h1>Detta är rubriken</h1></div><div id="content"><div id="spalt1"><p>Claritas est … </p></div><div id="spalt2"><p>Claritas est etiam … </p></div><div id="spalt3"><p>Nam liber tempor cum … </p></div><div class="bryt"></div></div>
<div id="foot">Sidfot med exempelvis författarnamn</div>
</body>
![Page 103: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/103.jpg)
body{ margin: 0px;padding: 0px;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1em;}
#content{width:450px;border:solid;}
div.bryt{clear:both} #header{ color: #CC0000;
width:450px;}
#spalt1{ color: #CC9900;width:150px;width:150px;float:left;}
![Page 104: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/104.jpg)
Vertikal meny
L15
![Page 105: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/105.jpg)
ul#navigation{margin-left: 0;padding-left: 0;list-style-type:none;}
ul#navigation a{display:block;text-decoration:none;background:#036;color:#fff;padding:.2em .5em;border-bottom:1px solid #fff;width: 7em;}
ul#navigation a:hover{background:#69C;color:#000;}
![Page 106: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/106.jpg)
<ul id="navigation"> <li><a href="#">Hem</a></li> <li><a href="#">Om</a></li> <li><a href="#">Tjänster</a></li> <li><a href="#">Personal</a></li> <li><a href="#">Portfölj</a></li> <li><a href="#">Kontakt</a></li> <li><a
href="#">Webbkartan</a></li></ul>
ul#navigation{margin-left: 0;padding-left: 0;list-style-type:none;}
ul#navigation a{display:block;text-decoration:none;background:#036;color:#fff;padding:.2em .5em;border-bottom:1px solid #fff;width: 7em;}
![Page 107: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/107.jpg)
![Page 108: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/108.jpg)
ul#navigation{margin-left: 0;padding-left: 0;list-style-type:none;}
ul#navigation a{display:block;text-decoration:none;background:#036;color:#fff;padding:.2em .5em;border-bottom:1px solid #fff;width: 7em;}
ul#navigation a:hover{background:#69C;color:#000;}
![Page 109: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/109.jpg)
Horisontell meny
L16
![Page 110: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/110.jpg)
body{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1em;}
* {margin:0;padding:0;}div#vertmenu{
width: 100%;font-size: .8em;background-color: #CCF;margin-top: 20px;border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: #069;border-bottom-color: #069;}
div#vertmenu ul{ margin-left: 30px;}div#vertmenu li{ background-color: #FFA;
float: left;}
![Page 111: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/111.jpg)
![Page 112: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/112.jpg)
• <ul id="navigation">• <li><a href="#">Hem</a></li>• <li><a href="#">Om</a></li>• <li><a href="#">Tjänster</a></li>• <li><a href="#">Personal</a></li>• <li><a href="#">Portfölj</a></li>• <li><a href="#">Kontakt</a></li>• <li><a href="#">Webbkartan</a></li>• </ul>
![Page 113: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/113.jpg)
ul#navigation{margin-left: 0;padding-left: 0;list-style-type:none;background: #036;float:left;width:100%;}
ul#navigation li{display:inline;}
ul#navigation a{display:block;float:left;padding:.2em 1em;color:#fff;text-decoration:none;background:#036;border-right:1px solid #fff;}
ul#navigation a:hover{background:#69C;color:#000;}
![Page 114: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/114.jpg)
En fin rubrik
L18
![Page 115: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/115.jpg)
![Page 116: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/116.jpg)
<div id="container"> <h1> <a href="/"><img src="fyrfolket.jpg" alt="Platsnamn" a /></a> </h1><ul id="topnav"> <li><a href="#">Direkt till innehållet</a></li> <li><a href="#">Hem</a></li> <li><a href="#">Om</a></li> <li><a href="#">Tjänster</a></li> <li><a href="#">Medarbetare</a></li> <li><a href="#">Portfölj</a></li> <li><a href="#">Kontakt</a></li></ul></div>
![Page 117: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/117.jpg)
@charset "utf-8";body{margin:0;padding:0;text-align:center;background: #B0BFC2;color:#444}
#container{text-align:left;margin: 0 auto;width: 700px;background:#fff;}
h1{margin:0;padding:0;border-bottom:1px solid #fff;}
h1 img{display:block;border:0;}
ul#topnav{margin:0;padding:5px 10px;list-style-type:none;background:#387a9b;}
ul#topnav li{display:inline;background:url(header-bullet.jpg) no-
repeat 0 50%;padding:0 5px 0 20px;}
ul#topnav li a:link, ul#topnav li a:visited{text-decoration:none;color:#fff;}
ul#topnav li a:hover, ul#topnav li a:active{text-decoration:none;color:#387a9b;background:#fff;}
![Page 118: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/118.jpg)
![Page 119: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/119.jpg)
Två spaler rubrik och footer
L19
![Page 120: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/120.jpg)
![Page 121: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/121.jpg)
<div id="container"><h1>Fyrfolket</h1>
<div id="nav"><ul><li><a href="#">Direkt </a></li><li><a href="#">Hem</a></li><li><a href="#">Om</a></li><li><a href="#">Tjänster</a></li><li><a
href="#">Medarbetare</a></li><li><a href="#">Portfölj</a></li><li><a href="#">Kontakta
oss</a></li></ul></div><div id="content"><h2>Om Stora Fjäderäggs
fyrplats</h2>
<p>Lorem ipsum dolor sit amet, in torquent nunc pretium pharetra ....</p>
<p>Dui nunc dui ultrices nulla. ....</p>
</div><div id="footer">Copyright © webbplatsen
2006</div>
</div>
![Page 122: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/122.jpg)
body{text-align:center;background: #B0BFC2;color:#444}
#container{text-align:left;margin: 0 auto;width: 700px;background:#fff url(header-base.jpg) repeat-y;}
h1{background:#D36832;color:#fff;margin:0;padding:20px;border-bottom:5px solid #387a9b;}
#nav{float:left;width:130px;display:inline;margin-left:20px;padding:0;}
#nav ul{margin:0;padding:25px 0;list-style-type:none;text-align:right;}
#nav li{background:url(header-bullet.jpg) no-repeat 95% .4em;padding:0 20px 5px 0;}
#content{float:left;width:475px;margin-left:45px;padding:15px 0;}
#footer{clear:both;background:#387A9B;color:#fff;padding:5px 10px;text-align: right;font-size: 80%}
h2{margin-top:0;color:B23B00;font-weight:normal;}
a:link{color:#175B7D;text-decoration:none;}
a:visited{color:#600;text-decoration:none;}
a:hover, a:active{color:#fff;background:#175b7d;}
![Page 123: CSS Cascading Style Sheets. Varför CSS Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll](https://reader031.vdocuments.pub/reader031/viewer/2022032521/56649d5d5503460f94a3c75c/html5/thumbnails/123.jpg)