CSS styr hur din webbplats ser ut. Färger, typsnitt, avstånd, layout: allt är CSS. Lär dig vad det är, hur det fungerar och varför det är viktigt för ditt varumärke.
Har du någon gång besökt två webbplatser med nästan samma innehåll men helt olika utseende? Den ena är snygg, ren och lätt att läsa. Den andra känns rörig, gammaldags och svår att navigera. Innehållet kan vara identiskt. Det som gör att de ser så olika ut är CSS.
I förra kapitlet lärde du dig att HTML ger en webbsida dess struktur. Det talar om för webbläsaren vad allt är: en rubrik, ett stycke, en bild, en knapp. Men HTML har ingen stil i sig. Utan CSS skulle varje webbplats se ut som ett vanligt textdokument. CSS är det som förvandlar strukturen till en visuell upplevelse.
Vad är CSS?
CSS står för Cascading Style Sheets. Det är ett språk som styr hur en webbsida ser ut. Medan HTML säger "det här är en rubrik" säger CSS "den här rubriken ska vara mörkblå, 32 pixlar hög och använda just det här typsnittet". Medan HTML säger "det här är en knapp" säger CSS "den här knappen ska vara grön, ha rundade hörn och sitta 20 pixlar under texten ovanför".
Varje visuellt beslut du ser på en webbplats, som färger, typsnitt, storlekar, avstånd, layouter, hovereffekter och bakgrunder, kommer från CSS. Det är webbens designlager.
Hur fungerar CSS?
CSS fungerar genom att rikta in sig på HTML-element och tillämpa stilregler på dem. Du talar om för CSS vilket element som ska formges och beskriver sedan hur det ska se ut. Reglerna skrivs i en separat fil som webbläsaren laddar tillsammans med HTML-filen. När webbläsaren läser båda filerna tillsammans tillämpar den stilarna på de matchande elementen och visar den färdiga sidan.
Ordet "cascading" i namnet syftar på hur CSS hanterar konflikter. Om flera stilregler gäller för samma element följer CSS en bestämd prioritetsordning för att avgöra vilken regel som vinner. Mer specifika regler går före mer allmänna. Det systemet ger designers exakt kontroll över hur varje element ser ut på hela webbplatsen.
Typer av CSS
CSS kan skrivas på tre olika sätt. Alla fungerar, men de passar inte lika bra i alla situationer.
1. Inline CSS
Inline CSS skrivs direkt på ett enskilt HTML-element. Det påverkar bara det elementet och går före alla andra stilar som gäller för det. Det är användbart för snabba engångsändringar men blir ett problem i större skala. Om du vill ändra en färg som används på 50 element måste du ändra den på 50 ställen i stället för ett.
2. Internal CSS
Internal CSS skrivs i en style-tagg i själva HTML-filen, oftast högst upp på sidan. Det gäller bara den sidan. Det fungerar för enstaka sidor eller små projekt, men för en hel webbplats betyder det att samma stilar upprepas på varje sida. Ändrar du en sak måste du uppdatera varje fil för sig.
3. External CSS
External CSS finns i en separat fil som är länkad till dina HTML-sidor. Det är standardsättet för alla riktiga webbplatser. Du definierar alla dina stilar en gång i en fil, och varje sida som länkar till den ärver stilarna. Ändrar du en färg eller ett typsnitt på ett ställe uppdateras det överallt direkt. Det är renare, laddas snabbare och är mycket enklare att underhålla. Nästan alla välbyggda webbplatser använder external CSS som grund.
Vad CSS styr på din webbplats
CSS berör nästan alla visuella delar av din webbplats. Här är de viktigaste områdena.
Färger och bakgrunder
Varje färg på din webbplats, som textfärg, bakgrundsfärg, knappfärg och kantfärg, ställs in med CSS. Dina varumärkesfärger används enhetligt på hela webbplatsen genom att du definierar dem en gång i CSS och återanvänder dem överallt.
Typografi
Vilket typsnitt din webbplats använder, storleken på rubriker och brödtext, avståndet mellan raderna och om texten är fet eller kursiv: allt det är CSS. Bra typografi gör innehållet lättare att läsa och stärker din varumärkesidentitet.
Layout och avstånd
Hur kolumner ordnas, hur mycket utrymme det är mellan avsnitt, hur bred innehållsytan är och var sidofältet visas: CSS styr allt det. Layoutreglerna definierar den övergripande strukturen på varje sida utöver det HTML ger.
Responsivt beteende
CSS är också det som får responsiv design att fungera. Media queries i CSS talar om för webbläsaren att använda olika stilar beroende på skärmstorlek. På en dator kan innehållet visas i tre kolumner. På en mobil gör CSS att kolumnerna staplas under varandra så att allt får plats på den mindre skärmen.
Animationer och effekter
Hovereffekter på knappar, mjuka övergångar mellan avsnitt och toningar när innehåll dyker upp vid scrollning: allt det är CSS. De ger upplevelsen rörelse och finish utan att kräva något JavaScript.
Vad det betyder för din webbplats som varumärkesägare
Du behöver inte skriva CSS för att ha en välgjord webbplats. Webbplatsbyggares sköter det åt dig. När du väljer en mall, väljer dina varumärkesfärger och ställer in dina typsnitt översätter plattformen valen till CSS-regler bakom kulisserna. Varje ändring du gör i den visuella redigeraren ger CSS som webbläsaren läser och tillämpar.
Det som är viktigt för dig är att CSS-koden som din plattform skapar är ren och effektiv. Tung eller uppsvälld CSS gör att dina sidor laddas långsammare. Välskriven CSS håller din webbplats snabb och enhetlig på varje sida. WEMASY:s webbplatsbyggare skapar optimerad CSS automatiskt, så dina designval tillämpas rent utan att göra dina sidor onödigt tunga. För att förstå hur det hänger ihop med prestanda kan du läsa vad är webbplatsens hastighet och varför spelar den roll.
Vanliga frågor
Måste jag lära mig CSS för att bygga en webbplats?
Nej. Med en webbplatsbyggare styr du webbplatsens utseende och känsla i en visuell redigerare. Plattformen skriver CSS-koden åt dig. Det är bra att kunna grunderna i CSS om du vill förstå varför saker ser ut som de gör, men du behöver inte skriva en enda rad för att bygga en professionell webbplats med WEMASY:s webbplatsbyggare.
Vad är skillnaden mellan CSS och HTML?
HTML definierar strukturen på en webbsida, alltså vad varje del av innehållet är. CSS definierar hur det ser ut. HTML skapar en rubrik. CSS ger rubriken en viss färg, storlek och ett visst typsnitt. De arbetar tillsammans: HTML ger elementen, CSS formger dem.
Kan CSS påverka webbplatsens hastighet?
Ja. Stora, ineffektiva CSS-filer gör varje sidladdning tyngre. CSS som inte är optimerad kan också hindra webbläsaren från att visa sidan tills den har läst alla stilar, vilket fördröjer när besökarna får se ditt innehåll. Ren, minimal CSS laddas snabbare. Det är en anledning till att det spelar roll för webbplatsens hastighet att bygga på en välkodad plattform.
Vad är ett CSS-ramverk?
Ett CSS-ramverk är en färdigskriven samling CSS-regler som utvecklare använder som utgångspunkt i stället för att skriva allt från början. Det snabbar upp utvecklingen och ger enhetliga, testade stilar direkt. De flesta webbplatsbyggares använder ett CSS-ramverk internt, så mallarna de skapar redan är välstrukturerade och pålitliga.
Kan du använda CSS för att få webbplatsen att se bra ut både på dator och mobil?
Ja, och det är faktiskt en av CSS viktigaste uppgifter. Med media queries använder CSS olika stilar beroende på skärmstorlek. På en bred datorskärm kan innehållet visas i flera kolumner med stora bilder. På en mobil staplas samma kolumner under varandra, teckenstorlekarna anpassas och avstånden dras ihop för att passa den mindre skärmen. Så fungerar responsiv design, och allt görs med CSS utan att du behöver en separat mobilversion av webbplatsen.
Vad händer om CSS inte laddas på en sida?
Om CSS-filen inte laddas visas sidan fortfarande, men utan någon formgivning. Du ser vanlig text och bilder utan färger, typsnitt eller layout. Allt staplas under varandra i den ordning det står i HTML-koden. Det ser trasigt ut, men innehållet finns tekniskt sett kvar. Det här är sällsynt på välskötta plattformar, men det är en bra påminnelse om hur mycket visuellt arbete CSS tyst utför på varje sida.