CSS-grunder
Det börjar bli dags att få till lite roligare utseende på våra sidor! För att styra utseendet på webbsidor använder man sig av CSS. Detta är en förkortning för ”Cascading Style Sheet”. Som slutdelen av den termen anger så handlar det om stilmallar. Lite förenklat kan man säga att ”cascading”-delen handlar om hur webbläsaren hanterar situationen när olika stilmallar försöker ändra på samma saker. Just nu är det inte så jätteviktigt hur detta fungerar. Vi återkommer till det.
Ännu ett dataspråk
CSS är liksom HTML ett slags dataspråk. Man brukar säga att man skapar CSS-regler. CSS-regler består av två delar. Dessa delar anger dels vilka element som ska påverkas, dels vilka egenskaper som man vill förändra.
Vi har först en selektor, som är en sats som gör ett urval bland HTML-elementen i sidan. Selektorn väljer ut specifika element och bestämmer därmed vilka element som ska påverkas av CSS-regeln ifråga.
CSS-selektorerna är många och i vissa fall är de rätt så krångliga att förstå. Men vi ska försöka arbeta oss fram till en uppsättning selektorer som kan hjälpa oss i de flesta situationer.
Efter selektorn följer en lista med de egenskaper som ska förändras för de utvalda elementen. Egenskapsförändringarna samlas i ett block som påbörjas med ett "{"-tecken och som avslutas med ett "}"-tecken.
En CSS-regel
Den enklaste selektorn är den då man helt enkelt anger elementnamnet på det element man vill komma åt. När man anger ett elementnamn så kommer alla element av den typen i dokumentet att påverkas. För att skapa en enkel CSS-regel som gör att alla våra h1-element får röd textfärg, skulle man kunna göra så här:
Ovanstående är bland de enklaste CSS-regler man kan skapa.
Först har vi selektorn, i detta fall ”h1”. Selektorn anger vilka element som ska påverkas. I exemplet kommer alla h1-element i dokument att väljas ut. Det spelar ingen roll var i dokumentet de används, eller om de ligger inuti andra element.
Därefter följer ett block som inleds med ett ”{”-tecken och som avslutas med ett ”}”-tecken. Allt inom detta block är egenskapsnamn och värden som egenskaperna ska tilldelas. I vårt fall säger vi att egenskapen ”color”, vilket är förgrundsfärgen, ska sättas till röd. Detta kommer att göra att texten blir rödfärgad (om du vill lära dig mer om hur man kan ange olika färger, kan du hoppa till aktiviteten färger).
Massvis med CSS-egenskaper
Som du kommer att se, finns det en uppsjö av olika egenskaper man kan sätta. Vissa egenskaper kanske enbart är giltiga/vettiga att använda med vissa typer av HTML-element. Du behöver ju knappast ändra på list-relaterade egenskaper i ett p-element till exempel. Vi kommer att gå igenom en del egenskaper här, men titta även på Webblings lista över tillgängliga CSS-egenskaper. Lek runt lite med de olika egenskaperna och se vad som händer!
Håll det enkelt
Det är bra att försöka hålla sina regler så enkla som möjligt, då blir din sida snabbare. Det är även bra att försöka ha så få regler som möjligt, även detta påverkar prestandan på din webbplats. Generellt sett behöver man inte bry sig om detta, det är bara när man har extremt komplicerade regler som det börjar spela någon större roll. Prestandaförluster orsakade av CSS-regler kanske inte kommer att vara speciellt märkbart på en vanlig desktop-PC, men på en mobilenhet, som inte är lika kraftfull, finns det en viss chans att hastighetsskillnaden kommer att märkas. Speciellt gäller detta om man har selektorer som är komplicerade eller som matchar alltför mycket (t.ex. "*"-selektorn).