CSS är en typ av mallar som kan användas när du bygger din hemsida, spel eller annat online och har många fördelar. Cascading Style Sheets betyder förkortningen och en översättning till svenska skulle kunna vara stilmallar. Med CSS kan du ha information om hur text, länkar och menyer ska se ut och fungera i en separat fil och sedan åkalla dessa filer från den sida du jobbar med. Detta betyder att du inte behöver skriva samma kod många gånger, utan kan återanvända samma formatmall bara genom att specificera på den sub-page du jobbar med vilken formatmall du vill använda specifikt för denna sida, eller en sektion på denna sida. Följden blir att det går snabbare att ladda sidan och om du vill göra en ändring i formatet på många sidor behöver du bara ändra på ett ställe – i CSS-mallen.

Ett exempel gör det lättare att förstå. En CSS-mall kan vara mycket enkel. Säg att du vill att alla rubriker med taggen h1 (en given tagg i HTML-språket) på en sida ska vara 20 pixlar. I CSS-mallen skriver du då

h1 { font-size: 20px; }

Sedan sparar du denna enkla rad i ett dokument med fil-ändelsen *.css som till exempel “rubrik.css”. På den sida där du vill att denna formatmall ska gälla skriver du sedan till exempel under head-taggen på sidan, inom vinkelparenteser istället för hakparenteser:

[link href=”rubrik.css” rel=”stylesheet” type=”text/css”]

Nu kommer css-filen “rubrik.css” anropas i dokumentet och när det finns rubrik i HTML-koden med en h1-tagg kommer denna rubrik ha storleken 20 pixlar. Pixlar är ett mått som är relativt till skärmupplösningen på datorn, på ett fönster eller en enhet. Om ett fönster har upplösningen 200×100 kommer en pixel se mycket större ut än om fönstret har skärmupplösningen 400×200, vilket är en sak som kan komma väl till pass när du sedan programmerar för olika enheter och webbläsare.

Bakgrundsbilder och CSS

CSS är mycket väl lämpat för att arbeta med bakgrundsbilder och du kan på ett mycket snabbt sätt ändra egenskaperna och bilderna för flera av undersidorna på hemsidan på en och samma gång. Du kan genom klasser jobba med flera olika varianter inom samma stilmall, eller ha en grundmall och specificera undantag på respektive undersida – med CSS kan du frambringa samma formatering på en mängd olika sätt beroende på vad du föredrar. Vad du föredrar beror ofta på vad du brukar göra och tycker är enklast att göra men kan också vara relaterat till vad som är mest effektivt och går snabbast att ladda.

När det gäller bakgrundsbilder finns det en del alternativ som du kan använda. Standard är att bakgrundsbilden upprepas flera gånger, vilket gör att en liten bild kan fylla sidan med ett fint mönster utan att ta knappt någon plats alls. Om du vill ha en större bild, till exempel ett fotografi, vill du säkert inte upprepa bilden utan endast ha den en gång. I sådant fall skriver du följande kod i css-mallen:

body {

background-image: url(fotoavminfinahund.jpg);

background-repeat: no-repeat;

}

där “fotoavminfinahund.jpg” är den bild som du vill ha som bakgrund. Om du vill att bilden ska repeteras flera gånger om skriver du helt sonika

body {

background-image: url(fotoavminfinahund.jpg);

}

utan att specificera upprepning eller inte.

Du kan med css specificera närmare hur du vill ha bakgrunden, till exempel att du vill att bilden ska repeteras endast åt höger, men inte nedåt, i x-led men inte i y-led. I sådant fall skulle koden bli:

body {

background-image: url(fotoavminfinahund.jpg);

background-repeat: repeat-x;

}

På samma sätt, om du vill att bilden ska repeteras nedåt, men inte till höger, ändrar du bara till “repeat-y”:

body {

background-image: url(fotoavminfinahund.jpg);

background-repeat: repeat-y;

}

En annan praktisk funktion är att centrera bakgrundsbilden. Då använder du dig av “background-position”. I det fall du vill ha bilden centrerad i båda led blir koden:

body {

background-image: url(fotoavminfinahund.jpg);

background-position: center center;

}

Utforma punktlista i CSS