Transcript Slide 1
CSS
Cascading Style Sheets
Varför CSS
•
•
•
•
•
Lätt att underhålla
Mindre filstorlekar
Ökad tillgänglighet
Olika media
Större typografisk kontroll
INTRO TILL CSS
L2
<!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>
CSS-fil: L2.CSS
h1 { text-align: center; }
h2 { font-style: italic; }
p { color: maroon;}
<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>
Deklarationer
• h1 { text-align: center; }
• h2 { font-style: italic; }
• p { color: maroon;}
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;
}
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;
}
Kantlinjer
h1
{
border-width: 1px;
border-style: dashed;
border-color: red;
}
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%;
}
Margin
p
{
color: maroon;
margin-top: 1em;
margin-bottom: 3em;
border-width: 1px;
border-style: solid;
border-color: blue;
line-height: 130%;
}
STILMALLAR
3 sätt att stila på
L4
In-line-kod
<h1>Rubrik 1</h1>
<p style="font-family:Arial, Helvetica,
sans-serif; margin:15px;
padding:1em; backgroundcolor: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)
Rubrikformat
<title>L4</title>
<style type="text/css" media="screen">
p
{
font-family:Arial, Helvetica, sansserif;
margin:15px;
padding:1em;
background-color:red;
width:10em;
color:black;
}
</style>
</head>
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;
}
Box-modellen
L5
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;}
Selektorer
Selektor { egenskap: värde;}
@charset "utf-8";
/* CSS Document */
p {color:black;}
p em {color:green;}
div p {color:red;}
.special{background-color:#999999;
<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>
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}
<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>
Pseudoelement
• p:first-letter {font-size:36px}
• p:first-line {font-size:24px}
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;}
Position static
p#third{
position: static;
}
Position relative
p{border: 1px solid #333333;}
p#first{}
p#second{}
p#third{
position: relative;
left: 20px;
top: 30px;
}
p#fourth{}
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{}
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{}
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 …
@charset "utf-8";
/* CSS Document */
p{
}
img{
margin: 10px;
}
p#first{}
p#second{}
p#third{}
p#fourth{}
Float left
•
•
•
•
•
•
•
•
•
•
•
•
•
@charset "utf-8";
/* CSS Document */
p{
}
img{
margin: 10px;
float:left
}
p#first{}
p#second{}
p#third{}
p#fourth{}
@charset "utf-8";
/* CSS Document */
p{
float:right
}
img{
margin: 10px;
float:right
}
p#first{}
p#second{}
p#third{}
p#fourth{}
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;
}
img{
display:block;
}
margin: 10px;
Bakgrundsbild
<div id="content">
<h1> Rubrik 1</h1>
<p> Lorem ... </p>
</div>
@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;
}
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;}
<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;
}
”Fotoalbum”
L12
<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) norepeat;
}
<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;}
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>
Citat
L13
<blockquote>
<p>Lorem ipsum ....</p>
<p class="source">
Julias Caesar
</p>
</blockquote>
</body>
</html>
blockquote
{ margin: 1em 0;
border: 1px solid #ddd;
background: url(13.jpg) 5px
5px no-repeat;
padding-top:30px;}
blockquote p
{ padding:0 70px;}
<body>
<blockquote>
<p>Lorem ipsum ...</p>
<p class="source">
Julias Caesar
</p>
</blockquote>
blockquote p.source
{ background: url(13b.jpg) norepeat 100% 100%;
padding-bottom:30px;
margin: 0 5px 5px 0;
text-align: right;
font-style: italic;
}
</body>
@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;}
Runda hörn
L17
<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;}
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>
Länkar
L10
Länkar – 5 tillstånd
•
•
•
•
•
Normal a:link
Visited a:visited
Focus a:focus
Hover a:hover
Active a:active
<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">mini
m 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;}
Tabeller
L14
<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>
<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>
@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;}
<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;}
<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;
}
Att disponera sidan
Tvåspaltig sidlayout – inte ännu
<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>
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;}
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;}
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;
}
Trespaltig med float och div
<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>
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;}
Vertikal meny
L15
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;}
<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;}
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;}
Horisontell meny
L16
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;}
• <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;
background: #036;
float:left;
width:100%;}
ul#navigation a
{display:block;
float:left;
padding:.2em 1em;
color:#fff;
text-decoration:none;
background:#036;
border-right:1px solid #fff;}
ul#navigation li
{display:inline;}
ul#navigation a:hover
{background:#69C;
color:#000;}
En fin rubrik
L18
<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>
@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) norepeat 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;}
Två spaler rubrik och footer
L19
<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>
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;}