CSS, eller Cascading Style Sheets, är en så kallad stilmall som används som ett komplement till HTML. Ända sedan 1980-talet och Standard Generalized Markup Language (SGML) födelse, har det visserligen funnits olika typer av stilmallar att tillgå, men CSS kan ändå benämnas som banbrytande för utvecklingen av webbsidor. CSS såg dagens ljus år 1994, då Håkon Wium Lee skapade den nya tekniken, men då tekniken initialt kantades av flera buggar och andra problem, tog det ända fram till mars 2000 innan det kom en webbläsare (Internet Explorer för Mac 5.0) som kunde erbjuda ett bra stöd för CSS.

  • CSS styr utseendet och formatteringen i HTML-dokument
  • CSS betyder Cascading Style Sheets och är en så kallad stilmall

CSS och HTML

CSS beskriver presentationsstilen för ett dokument såsom exempelvis typsnitt, textstorlek och färg. Ibland finns CSS-koden direkt i HTML-dokumentet, men vanligare är att man använder ett separat CSS-dokument som i sin tur kopplas till HTML-dokumentet via en kodsträng. Ett CSS-dokument samlar en hemsidas alla instruktioner för utseende, vilket innebär att HTML-dokumentet bara behöver innefatta själva hemsidans innehåll. Detta underlättar betydligt både vid skapande och revidering av en webbsidas kod, då det skapar en bättre kodstruktur. Det är dessutom bra ur ett SEO-perspektiv, eftersom en sökmotor inte behöver scanna igenom onödig ”utseende-kod” som den ändå inte har någon nytta av.

Mer konkret kan man säga att CSS ger ett strukturerat dokument en stil genom att sätta upp ett antal stilregler för hur dokumentet ska se ut. En webbsida kan exempelvis se ut på ett visst sätt och ha en viss typ av innehåll. Ändrar man stilreglerna kan webbsidan plötsligt se väldigt annorlunda ut, men innehållet kommer fortfarande att vara detsamma. Förutom enklare saker som typsnitt, storlek och färger kan man ändra mer komplicerade saker, såsom layout och hur responsiv webbsidan är när det kommer till visningar i exempelvis mobiltelefoner eller surfplattor. CSS har helt enkelt tagit HTML ett steg längre och möjliggjort effekter som inte fanns med bara HTML.

Extern CSS och embedded CSS

Det smidigaste sättet att lägga till CSS på en webbsida är att länka till en extern .css-fil. På så sätt reflekteras alla förändringar gjorda i den externa filen direkt till den globala webbsidan. Fördelarna är bland annat att HTML-sidorna blir mindre omfattande och att de får en renare struktur som är lättare att följa, att det går fortare att ladda en sida och att samma .css-fil kan användas på flera sidor. Referensen till den externa CSS-filen sätts i det stycke som styr hela webbsidan. En baksida med extern CSS är att det fram till CSS-filen är laddad finns en risk att webbsidan inte visas korrekt.

Embedded CSS å andra sidan sätts i stycket för varje enskild sida, vilket gör att filen bara är aktiv på just de sidor man länkat den till. Detta innebär att bara en sida påverkas av stilmallen och att HTML och CSS kan finnas i samma fil, vilket kan vara en fördel. Nackdelar med att ha CSS uppsatt på ett sådant sätt är att filen laddas ner varje gång en sida laddas, vilket kan påverka webbsidans hastighet negativt. En annan nackdel kan vara att CSS-filen bara påverkar en sida, vilket skapar merarbete i de fall man vill använda samma CSS för flera sidor.

Kritik mot CSS-tekniken

CSS kritiseras ibland för att försvåra arbetet för webbutvecklare eftersom webbläsares stöd för CSS varierar kraftigt. Därtill anses vissa designdelar vara onödigt komplicerade – såsom exempelvis horisontell och vertikal centrering. CSS ger heller inget eget stöd för variabler, vilket ofta leder till att exempelvis färger upprepade gånger måste definieras i ett CSS-dokument. Utifrån dessa utmaningar har en rad tillägg utvecklats, vilka bland annat erbjuder stöd för variabler och så kallade nestlade regler. Exempel på sådana tillägg är SASS och LESS, vilka fyller samma funktion, men med olika syntax. CSS-koden skrivs i enlighet med respektive tilläggs syntax för att sedan kompileras till ren CSS-kod, vilken webbläsaren sedan kan tolka.