Att lägga till CSS
Det finns några olika sätt på vilka vi kan lägga till CSS i 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 ”Första intrycket”).
Lägga CSS direkt i HTML-dokumentet
För att kunna lägga till stilmallar direkt i HTML-dokumentet behöver vi en ny tagg. Denna tagg heter <style>.
<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 att 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.
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. Vilket vi enkelt kan göra genom att länka till en och samma CSS-fil.
Att ha separata CSS-filer är att föredra. Låt säga att man har en riktigt stor sajt med massvis med sidor... Man kommer på att man vill göra om all text till lila, då skulle det bli jättejobbigt om man behövde gå in och redigera och ändra i varje sida! Istället samlar man allt utseenderelaterat 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. Det gör man med hjälp av attributet ”rel” (som är förkortning av ”relation”). I vårt fall vill vi ange relationen som ”stylesheet”. 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”, kommer alla förändringar i den filens CSS-reglerna att gälla i de webbsidor som 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.
style-attributet
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 vill 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 (och eventuellt dess underelement, beroende på om det är CSS-egenskaper som ärvs). Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika element. Detta görs med hjälp av selektorer. Vi har sett hur man använder element-selektorn i tidigare exempel. Vi kommer att täcka in mer avancerade selektorer i kommande avsnitt.
Det finns väldigt få anledningar att lägga till CSS direkt i element 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.