Summary  
This chapter explains how to declare and use CSS custom properties (variables) in the :root selector and apply them with var(), enabling easy updates and targeted overrides through selector specificity.

General domain of usage  
Front-end web development

## Variabler
CSS-variabler (custom properties) giver mulighed for at gemme genanvendelige værdier, hvilket gør dine stilarter lettere at opdatere og vedligeholde.

Deklarér variabler i `:root`-vælgeren og tilføj præfikset `--`:

```css
:root {
  --blue-color: #3f42f3;
}
```

Når en variabel er deklareret, kan den anvendes på enhver CSS-egenskab ved hjælp af funktionen `var()`. For eksempel, for at tildele `color`-egenskaben på et `<h1>`-element værdien fra vores `--blue-color`-variabel, kan følgende skrives:

``` css
h1 {
  color: var(--blue-color);
}

Kombiner viden om variabeldeklaration og anvendelse i følgende eksempel:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJjYXJkIj4KICAgICAgPGgyIGNsYXNzPSJjYXJkLXRpdGxlIj5QcmVtaXVtIFVJIERlc2lnbjwvaDI+CiAgICAgIDxwIGNsYXNzPSJjYXJkLXRleHQiPgogICAgICAgIFRoaXMgY2FyZCBkZW1vbnN0cmF0ZXMgdGhlIHBvd2VyIG9mIENTUyB2YXJpYWJsZXMuCiAgICAgIDwvcD4KICAgICAgPGJ1dHRvbiBjbGFzcz0iY2FyZC1idXR0b24iPkdldCBTdGFydGVkPC9idXR0b24+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwo6cm9vdCB7CiAgLS1iYWNrZ3JvdW5kLWNvbG9yOiAjMWMxYjI5OwogIC0tdGV4dC1jb2xvcjogI2YwZjBmNTsKICAtLWNhcmQtYmc6ICMyNzI2M2I7CiAgLS1idXR0b24tYmc6ICNmZjdmNTA7CiAgLS1idXR0b24taG92ZXI6ICNmZjYzNDc7CiAgLS1ib3JkZXItY29sb3I6ICM0YTQ5Njg7Cn0KCi8qIEFwcGx5IHZhcmlhYmxlcyB0byBib2R5ICovCmJvZHkgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWJhY2tncm91bmQtY29sb3IpOwogIGNvbG9yOiB2YXIoLS10ZXh0LWNvbG9yKTsKfQoKLyogQ2FyZCBjb21wb25lbnQgKi8KLmNhcmQgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNhcmQtYmcpOwogIGJvcmRlcjogMnB4IHNvbGlkIHZhcigtLWJvcmRlci1jb2xvcik7Cn0KCi8qIFRpdGxlICovCi5jYXJkLXRpdGxlIHsKICBjb2xvcjogdmFyKC0tdGV4dC1jb2xvcik7Cn0KCi8qIFRleHQgKi8KLmNhcmQtdGV4dCB7CiAgY29sb3I6IHZhcigtLXRleHQtY29sb3IpOwp9CgovKiBCdXR0b24gKi8KLmNhcmQtYnV0dG9uIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1idXR0b24tYmcpOwp9CgovKiBCdXR0b24gaG92ZXIgZWZmZWN0ICovCi5jYXJkLWJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYnV0dG9uLWhvdmVyKTsKfQoKLyogQWRkaXRpb25hbCBzdHlsZXMgZm9yIGJldHRlciBhcHBlYXJhbmNlIChub3QgdGhlIGN1cnJlbnQgZm9jdXMpICovCmJvZHkgewogIGZvbnQtZmFtaWx5OiBBcmlhbCwgc2Fucy1zZXJpZjsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgaGVpZ2h0OiAxMDB2aDsKICBtYXJnaW46IDA7Cn0KCi5jYXJkIHsKICBwYWRkaW5nOiAyNXB4OwogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgYm94LXNoYWRvdzogNHB4IDRweCAxNXB4IHJnYmEoMCwgMCwgMCwgMC4yKTsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgd2lkdGg6IDMyMHB4Owp9CgouY2FyZC10aXRsZSB7CiAgZm9udC1zaXplOiAyMnB4OwogIG1hcmdpbi1ib3R0b206IDEycHg7Cn0KCi5jYXJkLXRleHQgewogIGZvbnQtc2l6ZTogMTZweDsKICBtYXJnaW4tYm90dG9tOiAyMHB4Owp9CgouY2FyZC1idXR0b24gewogIGNvbG9yOiB3aGl0ZTsKICBib3JkZXI6IG5vbmU7CiAgcGFkZGluZzogMTJweCAyNHB4OwogIGZvbnQtc2l6ZTogMTZweDsKICBmb250LXdlaWdodDogYm9sZDsKICBjdXJzb3I6IHBvaW50ZXI7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCB0cmFuc2Zvcm0gMC4xcyBlYXNlLWluLW91dDsKfQoKLmNhcmQtYnV0dG9uOmhvdmVyIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMDUpOwp9

I dette eksempel styrer flere variabler kortets farver. Opdatering af en enkelt variabel opdaterer stilarterne overalt, hvor den bruges.

## Overskrivning af egenskaber
For at ændre specifikke stilarter i en komponent, skal den samme egenskab defineres igen inden for en mere specifik selector.

Eksempel (trafiklys):

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJ0cmFmZmljLWxpZ2h0Ij4KICAgICAgPHAgY2xhc3M9InNpZ25hbCBzdG9wIj5TdG9wPC9wPgogICAgICA8cCBjbGFzcz0ic2lnbmFsIHNsb3ctZG93biI+U2xvdyBEb3duPC9wPgogICAgICA8cCBjbGFzcz0ic2lnbmFsIHByb2NlZWQiPlByb2NlZWQ8L3A+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwouc2lnbmFsIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlOyAvKiBEZWZhdWx0IGJhY2tncm91bmQgY29sb3IgKi8KICBjb2xvcjogd2hpdGU7IC8qIERlZmF1bHQgdGV4dCBjb2xvciAqLwp9CgovKiBPdmVycmlkZSBjb2xvcnMgZm9yIHRyYWZmaWMgbGlnaHRzICovCi5zdG9wIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7Cn0KCi5zbG93LWRvd24gewogIGJhY2tncm91bmQtY29sb3I6IHllbGxvdzsKICBjb2xvcjogYmxhY2s7IC8qIEJldHRlciBjb250cmFzdCBmb3IgeWVsbG93ICovCn0KCi5wcm9jZWVkIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBncmVlbjsKfQoKLyogQWRkaXRpb25hbCBzdHlsZXMgZm9yIGJldHRlciBhcHBlYXJhbmNlIChub3QgdGhlIGN1cnJlbnQgZm9jdXMpICovCmJvZHkgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJywgc2Fucy1zZXJpZjsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGdyYXk7CiAgbWFyZ2luOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKLnRyYWZmaWMtbGlnaHQgewogIGJhY2tncm91bmQtY29sb3I6IGJsYWNrOwogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luLXRvcDogMjBweDsKICBib3JkZXItcmFkaXVzOiAxNXB4OwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBib3gtc2hhZG93OiA0cHggNHB4IDEwcHggcmdiYSgwLCAwLCAwLCAwLjUpOwp9Cgouc2lnbmFsIHsKICBmb250LXNpemU6IDE0cHg7CiAgZm9udC13ZWlnaHQ6IDYwMDsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgd2lkdGg6IDgwcHg7CiAgaGVpZ2h0OiA4MHB4OwogIGJvcmRlci1yYWRpdXM6IDUwJTsKICBtYXJnaW46IDEwcHggYXV0bzsKICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlOwogIG1hcmdpbjogMDsKfQoKLnNpZ25hbDpub3QoOmxhc3QtY2hpbGQpIHsKICBtYXJnaW4tcmlnaHQ6IDEwcHg7Cn0=

Den grundlæggende `.signal`-klasse indeholder fælles stilarter, mens `.stop`, `.slow-down` og `.proceed` tilsidesætter individuelle farver.

CSS-variabler øger fleksibilitet og vedligeholdelse.

Tilsidesættelse muliggør finjustering af stilarter uden gentagelse af fælles regler.

Resumé

Behersk det grundlæggende i CSS (Cascading Style Sheets), sproget til at style og ændre udseendet af websider. Udforsk kernekoncepter som tekstformatering, farver, afstande, box-modellen, Flexbox og dekorative effekter. Opbyg kompetencer til at skabe visuelt tiltalende og velstrukturerede websider. Ideel for begyndere, der ønsker et solidt fundament i CSS.

Lær hvad CSS er, hvordan det forbindes med HTML, og hvordan HTML-elementer styles ved hjælp af selektorer. Udforsk grundlæggende begreber som tekstfarver, brugerhandlings-pseudoklasser og variabler i CSS.

Opdag, hvordan du kan formatere og style tekst på dine websider. Lær at anvende brugerdefinerede skrifttyper og udforsk forskellige skrifttypeegenskaber for at forbedre tekstens udseende.

Lær det grundlæggende om boksmodellen, som definerer layout og afstand for elementer på en webside. Udforsk begreber som boksstørrelse, tilføjelse af afstand til elementer, arbejde med blok- og inline-elementer samt anvendelse af strukturelle og funktionelle pseudoklasser til avanceret styling.

Opdag Flexbox, en effektiv CSS-layoutmetode til at arrangere elementer i rækker og kolonner. Lær at kontrollere retning, justering og afstand af elementer horisontalt og vertikalt samt tilpasse individuelle flex-elementer for præcise layouts.

Lær, hvordan du forbedrer det visuelle udtryk på dine websider med CSS. Udforsk teknikker til anvendelse af baggrundsfarver og -billeder, billedstyling, brug af dekorative pseudo-elementer samt tilføjelse af skygger for at skabe imponerende designs.

Optimering af Arbejdsgange for Effektiv CSS-Kodning

Variabler

Overskrivning af egenskaber

Optimering af Arbejdsgange for Effektiv CSS-Kodning

Variabler

Overskrivning af egenskaber