CSS skola
CSS introduktion

CSS introduktion

CSS står för Cascading Style Sheets och är ett enkelt sätt att kontrollera hur en webbsida ska visas av webbläsaren. (CSS översätts ibland till stilmallar på svenska.)

 

HTML beskriver innehållet på en webbsida och CSS bestämmer hur den ska se ut.

CSS gör webbdesign snyggare

CSS gör det möjligt att kontrollera alla delar av en webbsidas utseende. CSS kan bestämma allt från typsnitt, textfärg och textstorlek till färger och bakgrundsbilder. CSS kan även styra hur sidans layout ska vara med höjd, bredd och placering av textstycken, bilder och menyer. HTML beskriver innehållet på en webbsida och CSS bestämmer hur den ska se ut.

Detta är ett exempel på hur CSS kan skrivas.

CSS:

p { color: red }

I ovanstående exempel bestämms att alla paragrafer <p> på hela webbsidan ska visas med röd textfärg. ( color:red ). Först skrivs alltså namnet på ett eller flera HTML element och sedan kommer instruktioner om hur elementet ska visas.

Läs mer om CSS regler

CSS gör webbdesign snabbare

Ett effektivt sätt att använda CSS är att skapa externa .css filer som sedan länkas in på varje webbsida. Detta gör det möjligt att snabbt ändra utseendet och layout på en hel webbplats genom att bara göra ändringar i en enda CSS-fil.

Extrerna CSS-filer länkas in på detta sätt:

HTML:

<style type="text/css" media="screen">
@import url(stilmall.css);
</style>

CSS kan anges inuti sidhuvudet på en webbsida. Många bloggtjänster, exempelvis blogg.se och blogspot.com använder sig av denna metod.

HTML:

<head>
	<style type="text/css">
	p { color:red }
	</style>
</head>

Det tredje sättet att använda CSS är att ange CSS-reglerna direkt i HTML-taggen med hjälp av attributet "style". Detta kallas "inline style".

HTML:

<p style="color:red">En paragraf med röd text</p>

Läs mer om hur du kan infoga CSS

CSS gör webbdesign enklare

En av grundtankarna i CSS är att CSS egenskaper kan ärvas mellan olika element. Exempelvis kan man först ange en textfärg för all text på hela webbsidan och sedan ange några enstaka element som ska ha en annan textfärg. Detta förenklar designarbetet eftersom man slipper upprepa alla regler för alla olika element på samma webbsida.

CSS:

body { color:red }
h1 { color:blue }

I ovanstående exempel kommer all text på hela sidan att ärva textfärgen röd. Även rubriken <h1> ärver färgen röd samtidigt som den har en egen regel som säger att den ska visas med blå färg. I dessa lägen finns en detaljerad rangordning som bestämmer i vilken ordning olika CSS regler ska gälla. Denna rangordning andvänds till att utforma "kaskader" (cascades) av CSS mallar.

Läs mer om arv och kaskader

CSS löser ett problem – en kort bakgrund

I tidiga versioner av HTML bestämdes en webbsidas utseende helt av webbläsaren.

HTML utvecklades ursprungligen för att förtydliga innehåll i vetenskapliga rapporter och andra dokument och därför var utseendet inte viktigt. HTML-element användes bara för att ange vad som var rubriker, tabeller eller paragrafer och en webbsidas utseende helt av webbläsaren. .

Med tiden ville man kunna få bättre kontroll över hur webbsidorna skulle visas och därför uppfann de två stora webbläsarna, Netscape och Internet Explorer, nya HTML-element och attribut (som exempelvis <font>-taggen med attributet "color") för att göra det möjligt att skapa snyggare webbsidor.

Problemet var att alla webbläsare inte stödde alla element och detta gjorde att vissa webbsidor inte kunde visas på alla webbläsare. Detta gjorde även att webbsidorna blev svåra att förändra eftersom innehållet på sidan blandades upp med all kod som bestämde webbsidans utseende. Dessutom tog det ofta lång tid att att genomföra förändringen eftersom man var tvungen att skriva om kod på varje webbsida.

CSS gör det äntligen möjligt att på ett snabbt och enkelt sätt skapa snygga webbsidor!

För att lösa detta problem lade World Wide Web Consortium (W3C), som är en organisation som arbetar med att standiardisera HTML, till stöd för stilmallar i HTML version 4.0. CSS är det vanligaste språket för att skriva stilmallar och den senaste versionen 2.1 stöds av alla vanliga webbläsare. CSS gör det äntligen möjligt att på ett snabbt och enkelt sätt skapa snygga webbsidor!

| Mer