CSS regler

Varje CSS-regel består av en väljare (eller selector på engelska), som avgör vilken eller vilka HTML element som regeln ska gälla, samt en förklaring (declaration) som skrivs inom måsvingar och anger hur de valda elementen ska formateras.

Förklaringen består av en egenskap (property) och ett värde (value) som egenskapen kan anta och dessa skiljs åt av ett kolon.

CSS:

väljare {egenskap:värde}

Nedanstående HTML används i alla exempel på sidan!

HTML:

<h1 id="bar">En rubrik</h1>
<p class="foo">En paragraf med lite text</p>

Egenskaper som innehåller två ord skrivs med bindestreck och värden som innehåller flera ord skrivs med citattecken runt.

CSS:

h1 {font-family: "Lucida Console" }
p { font-family:"Times New Roman" }

I exemplet ovan visas alla rubriker med typsnittet &quotLucida Console" och all paragrafer med typsnittet "Times New Roman".

Flera väljare

En regel kan ha flera väljare. Varje väljare skiljs åt med ett kommatecken.

CSS:

h1,h2,h3,h4,h5,h6,p,a
{
color:blue
}

I ovanstående exempel så anges att alla rubriker ska ha textfärgen blå.

Flera förklaringar

En regel kan också innehålla flera förklaringar och dessa skiljs åt med semikolon.

CSS:

p { font-size:12px; font-weight:bold; }

Mellanslag räknas inte!

För att göra texten lättare att läsa kan man lägga in mellanslag eller skriva varje förklaring på en ny rad.

CSS:

p {
    color: black   ;
    font-size: 10px ;
   }

Observeta att det INTE får vara ett mellanslag mellan siffror och måttenheten i ett värde.
10 px fungerar alltså inte!

Olika typer av väljare

1. Välja efter HTML element

En CSS regel kan gälla en viss typ av HTML element.

CSS:

h1 {color:red }
p { color:blue }

I exemplet ovan anges att alla paragrafer ska få textfärgen blå.

2. Attributen "id"

En CSS regel kan även vara en unik identitet på ett HTML element. Elementet får sin identitet med attributet "id" och väljaren skrivs genom att sätta ett #-tecken direkt framför id-namnet.

HTML:

<h1 id="bar">En rubrik</h1>
<p class="foo">En paragraf med lite text</p>

CSS:

#bar {color:green}

Observera att en viss identitet enbart får förekomma på ett element på samma webbsida!

3. Attributen "class"

En CSS regel kan även gälla en speciell klass. Elementet får sin identitet genom attributet "class" och hos väljaren sätts en punkt "." direkt framför namnet.

HTML:

<h1 id="bar">En rubrik</h1>
<p class="foo">En paragraf med lite text</p>

CSS:

.foo {color:yellow}

Ett HTML element kan också ha flera klasser och dessa skiljs åt med mellanslag.

HTML:

<p class="dark big">Lite text</p>

Observera att identitetsnamnet och klassnamnet inte får börja på en siffra! Då fungerar det inte i Mozilla/Firefox.

Läs mer om HTML attributen id och class

4. Speciella attribut

En CSS-regel kan enbart gälla HTML element med vissa attribut.

CSS:

input[type="text"] {color:red}

I exemplet ovan anges att alla element av typen input som har attributet "type" med värdet "text" ska få textfärgen röd.

CSS kommentarer

Kommentarer används för att förklara vad CSS-regler används till. Innehållet i en kommentar påverkar inte hur sidan visas utan ignoreras av webbläsare.

Det finns två sätt att skriva kommentarer i CSS:

• En kommentarer påbörjas med tecknen /* och avslutas med tecknen */
• En kommentarer påbörjas med tecknen // och avslutas automatiskt vid radens slut

CSS:

p {
/*Detta är en kommentar*/
color: black;
font-size: 10px; //Detta är också en kommentar
// font-size:20px; Denna regel är kommenterad bort
text-decoration:underline;
}

När man testar olika designer på en sida kan det vara bra att kommentera bort gamla CSS-regler istället för att radera dem. Detta gör det enklare att ta tillbaka ändringar som man sedan ångrar.