CSS

Tre sätt att lägga till CSS

Du kan arbeta på tre olika sätt med stilmallar på din sida. Dessa tre kallas för lokala (inbäddade, embedded), individuella (Inline), och globala eller externa (external) stilmallar.

Lokala och individuella stilmallar ligger inbäddade i själva HTML-dokumentet. Externa, eller globala stilmallar är egna dokument, med filändelsen .css, som länkas till HTML-dokumentet. Ett sådant dokument skulle alltså kunna heta till exempel ”stilmall.css”.

Global (extern) stilmall

Det vanligaste sättet att lägga till CSS är genom en extern stilmall. Det innebär att du skriver alla dina regler i ett textdokument som får filändelsen .css och länkar till detta i dina HTML-sidor, på detta sätt kan samma regler gälla för ett stort antal sidor. Vill du ändra på sajtens utseende behöver du bara göra detta på ett ställe.

Först gör du ditt CSS-dokument, som innehåller alla dina regler. Du döper detta dokument till till exempel ”stilmall.css” (eller något annat, bara det slutar på ".css").

I HTML-dokumentet som stilmallen ska gälla för länkar du till din nya stilmall genom HTML-elementet <link>, som läggs till i HTML-dokumentets <head>.

<head>
   <link rel=”stylesheet” href=”stilmall.css” type=”text/css”>
</head>

rel talar om vilken relation CSS:en har till HTML-dokumentet, href är som vanligt URL:en till detta, och type talar om vad det är för typ av dokument du länkar till.

det går dessutom bra att ha flera <link>-taggar, som länkar till olika stilmallar om man skulle behöva det. Se bara till att reglerna i de olika CSS-dokumenten inte krockar med varandra.

Lokal stilmall

I stället för att göra ett separat dokument kan du skriva in dina regler i <head>-delen av ett HTML-dokument. Denna stilmall kommer då bara gälla för detta specifika dokument. Det här är inte speciellt flexibelt eller lättarbetat, men det kan finnas tillfällen då det är ett vettigt sätt att arbeta (men oftast inte).

I ditt HTML-dokument lägger du till en stilmall i <head> med hjälp av elementet <style>.

<head>
   <style type=”text/css”>
      body {
      background-color:blue
      }
      h1 {
      font-family:helvetica, arial, sans-serif;
      color:blue
      }
…och alla andra regler du vill ha med…
   </style>
</head>

Stilmallsdelen är på detta sätt någorlunda urskiljt från resten av koden i HTML-dokumentet, men du måste fortfarande gå in i detta för att ändra stilmallen.

Individuell stilmall (inline CSS)

Individuella, eller inline CSS-regler är CSS-regler som skrivs in direkt som ett attribut till det specifika HTML-element det gäller. Du använder dig då av HTML-attributet style, med reglerna du vill ha som värde

<h1 style=”font-family:helvetica, arial, sans-serif; color:blue”>

Koden ovan kommer att göra just denna individuella <h1> blå i ditt valda typsnitt.

Det finns tillfällen när detta sätt är det enda rimliga för att lösa något problem, men det är någonting man gärna vill undvika, då det gör koden rörigare och mer svårarbetad. Om man har möjlighet är det oftast bättre att ge egenskaper med hjälp av HTML-attributet class när man vill göra någonting som avviker från sajtens vanliga utseende.