CSS skola
CSS grunder

CSS grunder

Det finns tre sätt att lägga till CSS till ett HTML dokument.

  1. Externa stilmallar
  2. Interna stilmallar
  3. Inline style med attributet "style"

Externa stilmallar

En extern stilmall är en vanlig textfil med filtillägget .css I textfilen skrivs alla css-regler som ska gälla för en webbsida. Varje webbsida måste sedan innehålla en hänvisning till stilmallen i webbsidans sidhuvud (mellan <head>-taggarna).

HTML:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
<head/>

I exemplet ovan så läser webbläsaren in stilmallen "style.css" och formaterar sidan efter de css-regler som finns där.

En extern stilmall gör det möjligt att ändra utseendet på en hel webbplats genom att enbart göra ändringar i en enda fil. Därför är externa stilmallar att föredra såfort en viss stil ska gälla fler än en webbsida.

Intern stilmall

CSS-regler går också att skriva i ett HTML-dokument. Reglerna skrivs mellan <style>-taggar i webbsidans sidhuvud..

HTML:

<head>
<style type="text/css">
   a { color:red }
   p { color:blue }
</style>
<head/>

Många bloggtjänster, däribland blogspot.com och blogg.se använder sig av interna stilmallar för att bestämma utseendet på bloggen.

Inline style

CSS-regler går även att ange direkt i ett HTML element med hjälp av attributet "style". Detta kallas "inline style".

HTML:

<p style="color:red; font-size:24px;">Röd stor text</p>

Använd enbart detta sätt att formatera utseendet på webbsidor om ett HTML element ska ha en unik stil. Så fort en regel ska användas mer än en gång är det bättre att skriva css-reglerna i ett externs css-dokument.

Läs mer om hur man kan använda HTML style

| Mer