Element
Det första elementet kallas för header och koden för det elementet är #header. Header:n används som sidans rubrik, ungefär. Där kan man ha en bild på sig själv och berätta vad bloggen handlar om, vad man skriver om, om man till exempel har en blogg. Det är den första man tittar på när man går in på en sida så den är mycket viktig. Jag har skrivit "Guide Till Web Design" för det är just en guide jag arbetar med, inget annat.
Det andra elementet kallas för content och har #content som kodnamn. I content skriver man inläggen, innehållet -det sidan är.
Det tredje synliga elementet kallas för side och har naturligtvis #side som kodnamn. Den ligger i sidan och kallas därför för "side". I den står det arkiverat vilka inlägg man har skrivit, från vilken månad och om man har kategorisat inläggen. Det är som ett slags arkiv helt enkelt. Vissa brukar ha en porträttbild på side och något kortfattat om sig som t.ex. ålder, kön, yrke o.s.v. Det beror helt på vad det är för hemsida.
Det finns andra element som inte syns särskilt bra och det är till exempel body. Body är också ett element, men har oftast ingen fyrkant framför sig. Body brukar skrivas först av alla element och är sidans tapet, sidans grund. Hur stor du vill ha hela sidan, bakgrundsbild, -färg, -position o.s.v. redigeras i "body".
Efter varje element skriver man { och när man är klar med att ändra elementet skriver man samma tecken fast baklänges. Exempel:
#side {
background-color: #FFF;
}
Side-koden för denna sidan är:
#side {
border:7px double #000;
float:right;
width: 220px;
padding: 24px 12px 0px 12px;
background-image:url();
background-color: #FFF;
}
Margin
body {
margin: 50px 50px 0px 0px;
background-image:url();
background-color: #FFF;
background-position:top-left;
background-attachment:fixed;
background-repeat:repeat;
}
Marginalen har ingen färg och är transparent. Den övre, högra, nedre och vänstra sidan kan man själv bestämma om man ändrar på de fyra talen som är skrivna i fet stil. Det första talet "50px" står för den övre sidan av marginalen. Px står för pixlar. Nästa tal, som också är 50px står för den högra sidan av marginalen, därefter kommer den nedre och den vänstra.
Alternativt kan marginalen ha ett till fyra värden.
* marginal: 25px 50px 75px 100px;
o övre marginalen är 25px
o högermarginalen är 50px
o botten marginalen är 75 px
o vänster marginal är 100px
* marginal: 25px 50px 75px;
o övre marginalen är 25px
o höger och vänster marginalerna är 50px
o botten marginalen är 75 px
* marginal: 25px 50px;
o övre och nedre marginalerna är 25px
o höger och vänster marginalerna är 50px
* marginal: 25px;
o alla fyra marginalerna är 25px
Eftersom marginalerna inte syns brukar folk missa dem, men de är mycket viktigare än vad man tror. Det första exemplet (50px 50px 0px 0px) är marginalen för denna sidan.
Källa: http://www.w3schools.com/css/css_margin.asp
Semikolon
Tecknet semikolon ";" använder man när man har gjort en förändring av något slag och visar att det är just en förändring och inga fler. Varje förändring skall alltså ha ett semikolon. Exempel:
Body {
background-color:#FFFFFF;
background-position:top-left;
background-attachment:fixed;
}
Här har man indikerat att bakgrundsfärgen skall var vit (background-color:#FFFFFF;), bakgrundspositionen ska vara längst upp till vänster (background-position:top-left;) och bakgrundsfästet ska vara fixerat (background-attachment:fixed;). Och efter dessa tre förändringar skall semikolonet vara på plats som visas ovan. Utan semikolon är det som att du inte har "avslutat" din redigering, att den fortsätter, vilket det inte ska göra.
Left & Right Curly Brace
Små tecken, inom webb design, som man ofta lägger märke till men inte vet vilket syfte de uppfyller finns det mycket utav. Exempelvis detta tecken "{"
Det tecknet använder man när man börjar med en ny lager eller element på sidan som man designar. Till exempel rutan för själva blogginlägget är en element för sig och kallas för "content", medan rutan vid sidan om där arkivet är kallas för "side". Ännu en element är "body" som är ungefär som sidans "tapet". Den ligger underst och är samma sak som bakgrund. Exempelvis:
Body {
background-color:#FFFFFF;
}
"}" används som stor bokstav och punkt. Man börjar med den när man har skrivit vilken del av sidan man tänker redigera som exemplet visar ovan. Därefter skriver man vad man vill ändra på. I exemplet står det "background-color:" som anger vilken färg du vill ha på bakgrunden, tapeten på din sida. Sedan kommer en kod "#FFFFFF;" som indikerar att det är vit färg vi vill ha som bakgrundsfärg. Varje färg har en kod för sig och skrivs ALLTID med fyrkant framför.
Anledningen till att det är en hel rad mellan "{" är för att man ska kunna se dem tydligare. De måste dock inte ligga så. Det räcker med ett mellanrum, men det är snyggare som exemplet ovan visar.
Body { background-color:#FFFFFF; }
Repetition av bild
Som det står ovan beskrivs det hur man kan ha en bild repeterad. Allt som behövs göras är att skriva background-repeat:repeat;. Vill man inte ha den repeterad skriver man no- innan repeat: background-repeat:no-repeat;.
Repetition:
Utan repetition:
Detta gäller inte endast för body-elementet utan för alla element där bilder används över huvud taget.
Källa: http://www.w3schools.com/css/css_background.asp
