På denna sida beskrivs hur man anger värden på egenskaper (eng. properties) för stilmallar samt vilka måttenheter som finns och hur man anger storlekar/längder. Många av egenskaperna i CSS finns beskrivna, med exempel, på sidorna Typsnitt (och stilar), Text (justering, radavstånd, m.m.), Färger (och bakgrundsbilder), Boxar (marginaler, kantlinjer och utfyllnad) och Positionering. För en komplett lista på egenskaper - se Referenser längst ner på denna sida (eller under Länkar).
Observera att webbsidor med exempel på dessa webbsidor (som nås via knapparna) kan bli ganska komplexa! Det är inte tänkt att dess HTML- och CSS-kod ska studeras i detalj - kunskap som behövs beskrivs på dessa webbsidor (Egenskaper), inte i exempelsidorna! Exempelsidorna används för att visa effekten av de olika egenskaperna i stilmallar.
För att ändra en egenskap i en stilmall så skriver man namnet på egenskapen följt av ett kolon och värdet för egenskapen.
{ egenskap: värde }{ font-family: Verdana }
Om värdet består av fler än ett ord (t.ex. typsnittet Times New Roman) så måste värdet inneslutas i citationstecken (t.ex. "Times New Roman"). Detta är enda gången som citationstecken ska användas i CSS!
{ font-family: "Times New Roman" }
För en del egenskaper kan man ange en värdelista, där ibland typsnitt. Värdena separeras då med komma.
{ egenskap: värde1, värde2, ... }
Principen för värdelistor är att webbläsare först försöker hitta första (mest vänstra) värdet i listan (t.ex. typsnittet Verdana i exempel ovan). Om besökares webbläsare inte har, eller stödjer, detta alternativ (t.ex. saknar typsnittet Verdana) så går webbläsaren vidare och försöka med nästa värde i listan (typsnittet Arial i exempel ovan). Detta görs tills inga fler värden finns i listan (webbläsare väljer då sitt standardtypsnitt).
{ font-family: Verdana, Arial, Helvetica, sans-serif }
Om något värde i en värdelista innehåller mellanslag så måste det värdet inneslutas inom citationstecken, som i exempel nedan.
{ font-family: Georgia, "Times New Roman", Times, serif }
Om flera egenskaper ska ändras i en stilmall så separeras egenskaperna med semikolon.
{ egenskap1: värde1; egenskap2: värde2; }
Semikolon är inte obligatoriskt efter sista värdet, men det kan vara en bra idé att använda det så att man inte glömmer det om man skulle lägga till fler egenskaper.
Precis som med HTML-kod så påverkar inte mellanslag och radbrytningar (s.k. white spaces) stilmallar. Stilmallar kan m.a.o. skrivs på ett så lättläst sätt som möjligt. För läsbarhet kan vi t.ex. skriva varje egenskap på en egen rad.
{
egenskap1: värde1;
egenskap2: värde2;
}I vissa fall kan två eller flera egenskaper kombineras och då separeras de olika värdena med mellanslag (inte komma som med värdelista - värdelistor används för att ange mest önskade till minst önskade värde). Om vi t.ex. vill ändra nedanstående tre egenskaper för typsnitt (storlek, vikt och typsnitt) så kan de skrivas om som en egenskap m.h.a. en s.k. "genväg", d.v.s. de två stilmallarna nedan är utbytbara (behandlas mer under sidan Typsnitt).
{
font-size: 13px;
font-weight: bold;
font-family: Verdana, Arial,
Helvetica, sans-serif;
}{ font: 13px bold Verdana, Arial,
Helvetica, sans-serif; }Vill man förklara hur man tänkt, eller göra det lättare
att hitta i en fil med många stilmallar, så kan (och bör)
man använda kommentarer. Kommentarer fungerar precis som flerradiga
kommentarer i C++/Java/JavaScript, d.v.s. börjar med /*
och avslutas med */).
/* En kommentar */
{
/* Ytterligare kommentar */
egenskap1: värde1;
}Till början på sida
Nedan visas ett "komplett" exempel på två stilmallar. Den första gäller för alla stycken och ändrar till ett typsnitt utan serifer (mer om dessa på sidan Typsnitt). Andra stilmallen ändrar till kursivstil för alla stycken av klass "ingress".
p { /* Alla stycken */
font-family: Verdana, Arial,
Helvetica, sans-serif;
}
p.ingress { /* Stycken av klassen ingress */
font-style: italic;
}Till början på sida
Egenskaper kan antingen anges med nyckelord (eng. keywords, t.ex. kursiv, fet, mindre eller röd, fast på engelska :-)) eller som storlek/längd och måttenhet (t.ex. 120% eller 14px). Det finns följande typer av måttenheter, vilka kan användas får de flesta egenskaper som gäller storlek/längder:
Observera att värden anges med "amerikansk" standard, d.v.s. eventuella decimaltal ska använda punkt (och inte komma), t.ex. 1.2 och 3.14. Eventuella måttenheter ska anges utan mellanslag mellan storlek/längd och måttenhet, t.ex. 12px, 1.2em och 100%. (I vissa fall anges nämligen flera värden - inte värdelistor - med mellanslag mellan, vilket innebär att felaktigt skriven storlek/längd skulle kunna tolkas som två olika (och ogiltiga) värden istället får ett med måttenhet.)
Exempel för de relativa och absoluta måttenheter ges när relevanta egenskaper behandlas, d.v.s. egenskaper som använder dessa måttenheter.
En relativ storlek är som namnet anger, relativt till något, oftast övergripande/omslutande element. Nedan visas några av de relativa måttenheterna vi kan använda samt exempel på hur de skrivs.
Måttenheterna em och ex kräver lite förståelse för typografi och pixlar för datorer (eller snarare skärmar :-)). Men, även om em och ex låter som storlekar för typsnitt, så kan de användas för alla typer av storlekar/längder - de är endast relaterade till storlek på typsnitt för element (även om elementet inte har någon text, d.v.s. alla element har, eller ärver, en textstorlek).
Måttenheten pixlar är mycket beroende av besökarens upplösning på skärmen, d.v.s. det kan vara en väsentlig skillnad om besökaren har en upplösning på 640*480 eller 1024*768 på sin skärm.
De absoluta måttenheterna används för att ange "exakta" storlekar/avstånd, men de gör sig bäst för andra media än datorskärmar (t.ex. papper/utskrift). De absoluta måttenhterna visas nedan med exempel på hur de skrivs.
Då besökare kan ha olika upplösningar, m.m. på sina skärmar så är det svårt att exakt avgöra hur några av de absoluta måttenheterna kommer fungera, d.v.s. om 1mm verkligen är 1 millimeter på en skärm. Undvik därför de absoluta måttenheterna.
Till början på sida
Nedan finns länkar till webbplatser med mer information.