Att lägga till CSS
Det finns lite olika sätt på vilka vi kan lägga till CSS för våra HTML-dokument. Till att börja med ska vi titta på hur man kan lägga till CSS:en direkt i HTML-dokumentet. Detta är inte den bästa lösningen, men det är ett kompakt sätt på vilket man kan visa upp exempel (det finns även anledningar till varför man ibland vill ha denna typ av CSS, se ”Above the Fold”).
<style>
För att kunna lägga till stilmallar direkt i HTML-dokumentet behöver vi en ny tagg. Denna tagg heter <style>. Allt som finns i ett style-element kommer att tolkas som CSS, snarare än som ren text eller som HTML-kod. När webbläsaren tolkar en HTML-sida, byter den alltså tolkningssätt ifrån det den påträffar en <style>-tagg, tills den stöter på en </style>. Allt som återfinns i det elementet kommer att tolkas med CSS-tolken istället.
Här följer ett kort exempel på hur man skulle kunna använda vår h1-regel i ett HTML-dokument.
<!DOCTYPE html>
<html>
<head>
<title>Demosida</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Detta är en röd rubrik</h1>
</body>
</html>
Ovanstående skulle på ett enkelt sätt tillämpa det vi lärt oss hitintills om CSS. Lägg märke till att style-taggen sitter inom head. Detta beror på att det är information om dokumentet, dvs hur det ska se ut, snarare än innehåll som ska visas.
Att länka till en extern CSS-fil
Det finns många anledningar till varför man egentligen inte vill blanda HTML och CSS i samma dokument. Den främsta anledningen är att om vi har externa CSS-filer, så kan vi återanvända samma CSS-regler i flera HTML-dokument bara genom att länka dem till samma CSS-fil. Låt säga att man har en riktigt stor sajt med massvis med sidor, så kommer man på att man vill gör om all text till lila, då skulle det bli jättejobbigt om man behövde redigera och ändra i varje sida! Istället samlar man allt i en extern CSS-fil, ändrar i den och vips slår ändringen igenom på alla sidor som länkar till den CSS-filen.
<link>
För att länka till en extern CSS-fil behöver vi ytterligare en ny tagg. I det här fallet heter taggen <link>. Den används för att skapa en länk till en extern fil. Vi behöver även tala om vad det är för typ av relation som gäller mellan de två filerna. I vårt fall vill vi ange det till ”stylesheet” och det gör man med hjälp av attributet ”rel” (som är förkortning av ”relation”). Låt oss nu säga att vi vill länka till en extern CSS-fil som heter ”style.css”, då skulle vi lägga till följande i head på vår HTML-sida:
<link rel=”stylesheet” href=”style.css”>
Link är en av de taggar som inte behöver en sluttagg. Liksom i fallet med img kan man stänga den om man vill, men man gör oftast inte det.
I och med att man länkat till ”style.css” så kommer alla förändringar i CSS-reglerna i den filen att slå igenom på webbsidan länkar till filen. Detta är den vanligaste metoden man använder för att lägga till CSS till HTML-sidor. Det är även den mest rekommenderbara metoden att använda sig av. Det är flexibelt och lätthanterligt, samt att det blir lättare att underhålla koden när man separerar CSS i en fil och HTML i en annan.
CSS direkt i HTML-taggarna
Det finns en sista metod som kan användas för att lägga till CSS. Denna metod ska i de flesta fall undvikas, då det skapar kod som är svår att uppdatera och underhålla. Koden blir även mer svårbegriplig.
För att använda denna metod lägger man till CSS direkt i taggarna med hjälp av det globala attributet ”style”. Om vi ville använda denna metod för att sätta röd text på ett h1-element, skulle vi göra så här:
<h1 style=”color=red;”>En röd rubrik</h1>
Denna typ av stilar påverkar enbart det element i vilket attributet sätts. Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika html-element med hjälp av CSS-selektorer. Vi kommer till dessa i nästa sektion. Det finns väldigt få anledningar att använda CSS på detta vis och man bör undvika det så mycket som möjligt. Håll dig helst till externa stilmallar som du länkar till. Det är den bästa och mest flexibla lösningen.