Mått i CSS kan anges med bland andra de här enheterna (det finns fler, det går att läsa mer i länken):
| Enhet |
Beskrivning |
| % |
Procent |
| in |
Inches, engelska tum |
| cm |
Centimeter |
| mm |
Millimeter |
| em |
1em innebär storleken på det aktuella typsnittet. Om texten är större, är em större. 2 em innebär 2 gånger den aktuella textens storlek. Alltså: om elementet har en teckenstorlek (font size) på 12pt är "2em" lika med 24 pt. Em är en av de populärare måttenheterna, tack vare sin flexibilitet, att det anpassar sig efter hur sidan visas. |
| ex |
En ex är x-höjden på det använda typsnittet. Det vill säga höjden på lilla x. Sällan använt. |
| pt |
Typografisk punkt (point) (c:a 0,35 mm ) |
| pc |
Pica, en pica motsvarar 12 pt. |
| px |
Pixel, den minsta bildenheten på en datorskärm. |
Du kan läsa mer om dessa till exempel hos W3C, på den här sidan.
Vilken måttenhet man väljer att använda beror lite på vad man ska använda den till. I min erfarenhet är de vanligaste %, px och em. Enheterna cm, mm, px och in har problemet att de förändras efter upplösningen på skärmen som visar sidan, vilket kan ge oväntade effekter.
Alltså: för visning på skärm (man kan nämligen göra CSS för utskrift också) rekommenderas i första hand em, % eller px, med ex som möjlig reserv (används nästan aldrig).
I CSS 3 införs det några nya måttenheter, rem, vw och vh. Rem står för "root em" och är ett em-mått som är det samma på hela sidan. Vh är 1/100-del av visningsfönstrets höjd och vw 1/100-del av dess bredd. Var försiktig med dessa, det är inte alls säkert att de fungerar i webbläsarna ännu.
När du anger enheter i CSS görs detta utan mellanslag: 25px, inte 25 px.
Du måste alltid ange vilken måttenhet du använder, utom om måttet är 0. Då anges aldrig enhet, eftersom 0px är lika mycket som 0% eller 0em… 0 är alltid 0.
Färger i CSS kan anges på flera olika sätt (alla angivelser nedan ger samma färg: ). Nedan kan du se några av sätten.
Vanliga sätt att ange färg i CSS
| Skrivsätt |
Beskrivning |
| cyan |
Färgnamn. Många färger har fått egna namn. |
| #00ffff |
Färgen angiven som hexadecimal trilling. Det vanligaste sättet att ange färg i CSS. Siffrorna och bokstäverna är de tre komponentfärgerna rött, grönt och blått (RGB) angivna som värden från 0 till 255 med hexadecimala siffror. Hexadecimala färgangivelser börjar alltid med #. |
| #0ff |
Förkortad hexadecimal färgangivelse. I de fall de två tecknen i hexvärdet är de samma kan man i CSS förkorta till ett tecken. |
| rgb(0, 255, 255) |
Samma siffror angivna med det vanliga decimala talsystemet. Notera bokstäverna rgb, parenteserna och kommana. Används mer sällan än de tidigare tre. |
| rgb(0%, 100%, 100%) |
Samma värde uttryckt som procent, där 255=100%. Inte heller särskilt vanligt. |
Utöver de sätt att ange färg som nämns här ovan, kommer CSS 3 med flera nya varianter på färgangivelser. Enligt CSS 3 kan du lägga till en siffra för genomskinlighet (alfakanal) till dina färgvärden. Istället för att ange färgen efter dess RGB-värden, kan du ange den enligt modellen HSV: nyans (hue), mättnad (saturation) och ljushet (lightness), ett system som utgår mer från hur en färg uppfattas än hur den skapas.
Allt om färgangivelse i CSS finns att läsa hos W3C. Detta inkluderar de nya metoderna.
För att ange en URL (sökväg) som ett CSS-värde, till exempel om du vill ange en bild att visa som bakgrundsbild skriver du ordet url följt av adressen inom citationstecken och parenteser. :
url("bakgrundsbild.jpg")
Det går bra att använda alla typer av adresser du kan läsa om på "Sökvägar och adresser" här på sajten. Att skriva en CSS-regel som lägger en bild från webben som bakgrundsbild på <body> skulle kunna se ut så här:
body {
background-image: url("http://webbsajt.se/bakgrundsbild.jpg");
}