En CSS-stilmall är på många sätt enklare att skriva än HTML. CSS består av regler för hur olika HTML-element ska visas.
Alla regler man behöver skrivs efter varandra i ett textdokument, oftast spelar det inte ens någon roll i vilken ordning man skriver dem
CSS kan skrivas i egna dokument som länkas till från HTML-dokumentet den ska gälla för eller bäddas in i HTML-dokumentet. Enstaka regler kan till och med läggas till som attribut till HTML-element.
För att skriva CSS kommer du behöva lite andra tecken än när du skriver HTML. De viktigaste av dessa är:
Spetsklamrar ("måsvingar")
{ }
Kolon
:
Semikolon
;
Du kommer också att behöva en del andra tecken så småningom, som nummertecken (#), komma och punkt. Även snabel-a (@) kommer att kunna förekomma.
Regler
En regel (rule) i CSS består av en väljare (selector) och en eller flera egenskaper (properties). Varje egenskap har minst ett värde (value). Regler skrivs så här:
väljare {egenskap:värde}
men det är inget problem om man lägger till radbrytningar för att göra det mer lättläst:
väljare {
egenskap :värde
}
Det går bra att ge en väljare flera olika egenskaper med värden. Då använder du semikolon som skiljetecken mellan de olika egenskaperna:
väljare {
egenskap :värde;
egenskap :värde;
}
Det är klokt att ta för vana att alltid avsluta egenskaper (med värde) med semikolon, även om du för tillfället bara har en. Det är aldrig fel och kommer ändå att behövas om du bestämmer dig för att lägga till fler egenskaper i efterhand.
nu skulle du kunna skriva en regel som ger alla <h1>-rubriker färgen blå:
h1{color:blue}
och ge resultatet
En blå rubrik
Väljare
Som väljare i CSS kan du använda alla existerande HTML-element, inklusive <html> och <body>, fast utan < och >.
Vill du till exempel ge en bakgrundsfärg eller bakgrundsbild till din webbsida är det lämpligt att ge egenskapen background-color eller background-image till <body>. Vill du att all vanlig text i ett helt dokument ska ha ett visst typsnitt kan det vara lämpligt att ge egenskapen font-family till <html> eller <body>, så ärvs egenskapen till allt innanför den taggen.
Undantaget är elementet <head> och det som befinner sig mellan <head> och </head> i ett HTML-dokument. Det visas ju inte, och har därför inga visuella egenskaper som kan anpassas med CSS.
Väljare kan anpassas och villkoras på många olika sätt. Man kan göra egna väljare för särskilda situationer med HTML-attributen class eller id, man kan använda pseudoklasser för att en regel ska gälla till exempel när man håller musen över elementet, man kan ange en regel som gäller för taggar som befinner sig inuti andra taggar med sammansatta väljare, ange flera väljare för samma regel, låta en regel gälla bara för vissa skärmstorlekar och annat. Det är alltså ett flexibelt system som går att anpassa på många sätt.
Egenskaper
Vilka egenskaper du kan tilldela ett element är naturligtvis beroende av vad det är för element du försöker ge egenskapen till. Det är inte meningsfullt att ge egenskaper som teckenstorlek eller typsnitt till en <img>, till exempel.
Du kan tilldela en väljare hur många egenskeper som helst, kom bara ihåg skiljetecknet semikolon (;)
Värden i CSS kan anges på många alternativa sätt. Mått, färger och annat kan oftast anges på flera olika sätt, mått kan till exempel anges såväl i millimeter, pixlar, typsnittets storlek (em) eller som procent.
Vilka värden du gan ge till vilka egenskaper är beroende på vad det är för egenskap. Ett typsnitt (font-family) kan naturligtvis inte vara ett mått eller en färg, utan ett namn på ett typsnitt.
Information om vilka sorters värden som fungerar för vilka egenskaper går att läsa i beskrivningen till egenskaperna i CSS
Kommentarer i CSS
Kommentarer skrivs på ett annat sätt i CSS än i HTML. I CSS skrivs kommentarer med ett snedstreck (/) följt av en asterisk (*). Kommentaren avslutas med det omvända: en asterisk med ett snedstreck efter.