Introduktion till CSS CSS1 - EXEMPEL. Denna webbsida vill vi kopiera och förbättra.

En presentation över ämnet: "Introduktion till CSS CSS1 - EXEMPEL. Denna webbsida vill vi kopiera och förbättra."— Presentationens avskrift:

1 Introduktion till CSS CSS1 - EXEMPEL

2 Denna webbsida vill vi kopiera och förbättra

3 Grundstruktur

4

5 Ungefär så här

6 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 }

7 7

8 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; }

9 9

10 content2 #content2{ height: 484px; width: 774px; margin-top: 19px; margin-right: 21px; margin-bottom: 19px; margin-left: 21px; background-color: #444; }

11 11

12 left #left { background-color: #666; height: 478px; width: 152px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; float: left; }

13 13

14 right #right{ background-color: #888; height: 478px; width: 560px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 32px; float: left; }

15 15

16

17

18 head #head{ background-color: #259; height: 50px; width: 560px; padding: 0px; }

19 content #content{ background-color: #592; height: 399px; width: 560px; }

20 foot #foot{ background-color: #925; height: 35px; width: 560px; text-align: center; /*padding-top:5px;*/ }

21 Med bilder inplockade

22 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; }

23 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; text-align: center; font-weight: bold; margin-top:0px; margin-top: 5px; }

24 Mer syling på länkar #foot a hoover{color: #A00;} #foot a:link, A:visited, A:active { text-decoration: none; color:#669; }

25

26 Bakgrundsfärger vitt