Hvad er CSS?

CSS bruges til at styre design og layout på en hjemmeside. Hvor HTML beskriver indholdet, bestemmer CSS hvordan indholdet ser ud.

Med CSS kan du blandt andet styre:

HTML = struktur · CSS = design · JavaScript = funktionalitet

Hvad betyder CSS?

CSS står for Cascading Style Sheets.

Browseren læser CSS-reglerne fra toppen og ned og afgør, hvilke regler der gælder for hvert element.

HTML definerer strukturen på siden, mens CSS bruges til at style strukturen.

HTML:

<h1>Velkommen</h1>
<p>Dette er min hjemmeside.</p>

CSS:

h1 {
  color: #4caf50;
  font-size: 32px;
}

p {
  color: #cccccc;
}

CSS ændrer udseendet – ikke strukturen.

En CSS-selektor bestemmer, hvilke HTML-elementer en regel skal gælde for.

Eksempel:

p {
  color: red;
}

Reglen ovenfor betyder: Alle <p>-elementer skal have rød tekst.

Man kan også vælge elementer via klasser og id'er:

.box {
  background: #222;
}

#header {
  height: 80px;
}

CSS gemmes typisk i en fil der slutter med .css.

styles.css

Filen kobles på HTML-dokumentet via <link> i <head>:

<link rel="stylesheet" href="styles.css">

Én CSS-fil kan styre designet på hele hjemmesiden.