Grunder i CSS

CSS är en typ av mallar som kan användas när du bygger din hemsida 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.

Leave a Reply

Your email address will not be published. Required fields are marked *