Hvad er CSS (Cascading Style Sheets)?

Introduktion til CSS (Cascading Style Sheets) som bruges til at bestemme udseendet på en hjemmeside

Introduktion

CSS er en forkortelse for Cascading Style Sheets.

På dansk kaldet typografiark eller direkte oversat laglagt-stil-ark.

CSS bruges til at bestemme udseendet på HTML sider.

For eksempel skrifttype, farve, baggrund, ramme, størrelse og afstand til andre elementer.

Syntax og eksempel

Her ses lidt CSS kode, som ændre baggrundsfarven på alle <a> elementer.

a kaldes for selector og er det element man ønsker koden mellem de krøllede parenteser skal gælde for.
background kaldes for property.
red kaldes for value.

En property og en value kaldes tilsammen for declaration.
Der kan være lige så mange declaration mellem de krøllede parenteser som man ønsker.

Semikolon (;) bruges til at adskille hver declaration.

Her ændres både baggrundsfarven, skriftfarven og skriftstørrelsen.

Da semikolon (;) bruges til at adskille hver declaration behøver man ikke skrive semikolon efter den sidste declaration. Men man kan gøre det alligevel så man ved at hver linje har et semikolon som gør det lettere at tilføje kode i fremtiden.

For at gøre koden let at læse kan man nøjes med at skrive én declaration per linje.

Kommentar

CSS kommentar starter med /* og slutter med */.

Desværre kan man ikke bare udkommentere en masse linjer med CSS kode hvis de indeholder kommentarer i forvejen.
Vær opmærksom på at kommentaren afsluttes ved første */.

Placering af CSS kode

Der er flere steder man kan placer sin CSS kode.

Inline CSS bruges hvis CSS koden kun skal gælde for ét element.

style element CSS bruges hvis CSS koden kun skal gælde på én side og er god hvis man ikke har specielt meget CSS kode.

Ekstern fil CSS er den foretrukne måde til det meste af sin CSS kode da man har CSS koden i en fil for sig selv og man kan referer til denne CSS fil fra alle sine HTML filer så man kun skal rette i én fil for at ændre udseende på alle HTML siderne.

Alle måderne kan kombineres som man har lyst.

Man kan for eksempel have det meste CSS kode i en ekstern fil, en smule CSS kode i et style element og nogle få inline CSS koder.

Inline CSS

Inline CSS bruger style attributten og gælder kun for det pågældende element.

Inline CSS er begrænset i det man for eksempel ikke kan bruge pseudo classen :hover.

INLINE CSS DEMO

style element CSS

Her placeres CSS koden mellem <style type="text/css"> og </style>.

Typisk placeres <style> elementet i <head> delen af HTML filen men kan også placeres i <body> delen.

STYLE ELEMENT I <HEAD> CSS DEMO

Bonus info

I HTML5 kan man nøjes med at skrive <style> uden type attributten hvis man har lyst, da CSS er standardsproget til style elementet i HTML5.

Ekstern fil CSS

Hvis man ønsker at bruge en ekstern fil til CSS koden så kan man for eksempel gemme følgende kode i en fil man kalder for stylesheet.css.

Typisk vil man oprette en ny mappe og for eksempel kalde den css hvor man så kan have alle sine CSS filer.

Filen css/stylesheet.css kan så refereres til i alle de HTML filen man ønsker CSS koden skal gælde for ved at bruge et <link> tag i <head> delen.

EKSTERN FIL CSS DEMO

Bonus info om cache

Når man bruger en ekstern fil til sin CSS kode kan brugerens browser cache filen så den ikke skal hentes hver eneste gang brugeren indlæser en HTML side.

Det spare på dataoverførelsen.

Men det kan give problemer hvis du har ændret i filen og brugerens browser ikke hente den nye fil. Så kan hjemmesiden blive vist forkert hos brugeren.

For at undgå dette problem kan man for eksempel bruge PHP funktionen filemtime() for at tilføje information om hvornår filen sidst blev ændret så i stedet for at href attributten blot er css/stylesheet.css så kan den i stedet hedde css/stylesheet.css?v=1424363628.

Hver gang du ændre filen ændres tallet automatisk og brugeres browser henter filen med de nye ændringer så hjemmesiden bliver vist korrekt.

Selector

I følgende CSS kode bruges én selector kaldet h1.
Resultater bliver at alle <h1> elementer får orangefarvet tekst.

I følgende CSS kode med kommasepareret selector-liste får alle <h1>, <h2> og <h3> elementer orangefarvet tekst.

Class og id

Man kan tilføje class og id attributter til HTML elementer hvis man ikke ønsker at CSS koden skal gælde for alle tags af den type.

class-navne kan bruges flere gange på samme HTML side.
id-navne kan kun bruges én gang per HTML side.

Så kan man i CSS koden bestemme hvilke elementer koden skal gælde for.

Ved class bruges punktum (.) efterfulgt af class-navnet.
Ved id bruges firkant (#) efterfulgt af id-navnet.

Du kan altid bruge class attributten.
Der er som sådan ikke nogen fordel ved at bruge id attributten men i en HTML validator kan man blive gjort opmærksom på hvis man har brugt samme id-navn mere end én gang.

Man kan også kombinere class og id.

I class attributten kan man bruge flere class-navne adskilt af mellemrum.

I id attributten er det kun tilladt at bruge ét id-navn.

Pseudo-class

I CSS findes pseudo-class som kan tilføjes til selectors for at angive en særlig tilstand for elementet.

Her er et eksempel hvor pseudo-class :hover bruges til at ændre baggrundsfarven på <a> elementer når markøren holdes over linket.

PSEUDO-CLASS CSS DEMO

Her er en demo hvor pseudo-classes :focus :active :disabled bruges.
PSEUDO-CLASS CSS DEMO 2

Her er en liste med nogle af de pseudo-classes der findes.

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.