CSS tutorial 2 – CSS syntaxen

I dette afsnit af min CSS tutorial vil jeg vise hvordan CSS koder bygges op. 
Uanset hvordan du henviser til CSS kode, så er de generelt opbygget sådan at de præsenteres som CSS-egenskab, herefter “:”, herefter værdi og til slut et “;”.

css-egenskab:værdi;

Hvis nogle bestemte CSS koder skal gælde for bestemte HTML tags, angives dette foran med “tag {” hvorefter CSS koderne kommer og afsluttes med “}”. Et eksempel er:

p {
    color: red;
    text-align: center;
}

“p” henviser til <p> html tagget og dette kaldes for en selektor. “color” og “text-align” kaldes for en egenskab og “red” og “center” kaldes for værdier. “color:red;” kaldes for en deklaration. Bemærk at en deklaration skal altid afsluttes med semikolon og en blok af deklarationer skal altid sluttes ind i tuborg-klammer.
Bemærk at ovenstående kode påfører denne CSS kode til ALLE p-tags i html dokumenter der henviser til dette stylesheet.

Henvis til id

Du kan også på det enkelte HTML tag angive et id, som for eksempel:

<p id="test">

Hvis du har gjort det, kan du angive CSS kode kun for de tags der har dette id med følgende:

#test {
    text-align: center;
    color: red;
}

Du kan angive id’er på alle html-tags. Det er bare vigtigt at et id ikke starter med et tal, så du kan ikke kalde dem 1, 2, 3 osv.

Henvis til klasse

Du kan også henvise til en klasse. Dette gør du ved at sætte . foran klassenavnet. Hvis du f.eks. har angivet class=”center” på nogle html tags, vil du herved kunne angive en css kode for dem.

<p class="center">

Og her CSS koden:

.center {
    text-align: center;
    color: red;
}

Du kan også angive at CSS koden kun skal gælde for en bestemt klasse på et bestemt html tag.

p.center {
    text-align: center;
    color: red;
}

I dette eksempel vil koden altså kun gælde for p-tags der har angivet class=”center”. Bemærk at du også kan angive flere klasser på et html tag, blot du adskiller dem med et mellemrum.

<p class="center large">

Hvis samme CSS kode skal gælde for flere HTML tags, kan du gruppere dem:

h1, h2, p {
    text-align: center;
    color: red;
}

Pseudoklasser

Der er faktisk også noget der hedder pseudoklasser i CSS. Pseudoklasser er ikke rigtige klasser hvor du jo angiver at de enkelte html tags tilhører den klasse. Det er derimod forskellige situationer for et bestemt tag. Det klassiske eksempel er en CSS kode der indstiller hvordan et link skal se ud.

a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: red;
text-decoration:none;
}
a:active {
color: red;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}

Her er det der angives efter : altså pseudoklassen. Pseudoklassen link angiver hvordan links skal se ud når de endnu ikke er besøgte. Visited angiver hvordan de skal se ud når de har været besøgte. Active er den tilstand hvor brugeren klikker på linket og indtil musen slipper linket igen. Hover er mens brugeren peger på linket.
Det var lidt om CSS syntaxen i dette afsnit. Nu kan du jo begynde at lære om nogle af de forskellige CSS koder der findes, og hvad de gør. Det kigger vi på i næste afsnit, hvor vi starter med at kigge på farver og baggrund i CSS.