Introduktion till CSS CSS1 - EXEMPEL
Denna webbsida vill vi kopiera och förbättra
Grundstruktur
<body> <div id="container"> <div id="content2"> <div id="left"></div> <div id="right"> </div> </body>
Ungefär så här
BODY body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-style: normal; font-weight: normal; text-align:center; background: #B0BFC2; color:#444 }
container #container { text-align:left; width: 816px; height: 522px; background-color: #222; background-repeat: no-repeat; background-position: center; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border: 2px solid #6699FF; }
content2 #content2{ height: 484px; width: 774px; margin-top: 19px; margin-right: 21px; margin-bottom: 19px; margin-left: 21px; background-color: #444; }
left #left { background-color: #666; height: 478px; width: 152px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; float: left; }
right #right{ background-color: #888; height: 478px; width: 560px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 32px; float: left; }
<body> <div id="container"> <div id="content2"> <div id="left"> </div> <div id="right"> <div id="head"> <div id="content"> <div id="foot"> </body>
head #head{ background-color: #259; height: 50px; width: 560px; padding: 0px; }
content #content{ background-color: #592; height: 399px; width: 560px; }
foot #foot{ background-color: #925; height: 35px; width: 560px; text-align: center; /*padding-top:5px;*/ }
Med bilder inplockade
Rubriken i head #head h1{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18pt; color: #666699; background-color: #FFFFFF; margin-top: 0px; margin-right: 0px; margin-left: 0px; /*padding-top: 10px;*/ padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }
Foot - länkar #foot p{ text-align: center; } #foot a{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #666699; text-decoration: none; font-weight: bold; margin-top:0px; margin-top: 5px;
Mer syling på länkar #foot a hoover{color: #A00;} #foot a:link, A:visited, A:active { text-decoration: none; color:#669; }
Bakgrundsfärger vitt