CSS – cheat sheet

Selectors, boksmodellen, layout med flexbox og grid, og responsivt design

Hvert kodeeksempel står alene. CSS lægger du normalt i en ekstern fil, fx styles.css, og knytter til HTML'en med <link rel="stylesheet" href="styles.css"> i <head>.

1. Sådan virker CSS

/* selector { property: value; } */
h1 {
  color: navy;        /* tekstfarve */
  font-size: 24px;    /* skriftstørrelse */
}

En regel består af en selector (hvem rammer vi?) og deklarationer (hvad gør vi?). Alle elementer, der matcher selectoren, får stylingen. Kommentarer skrives /* sådan her */.

2. Selectors

p              /* alle <p>-elementer */
.kort          /* alle med class="kort" */
#top           /* elementet med id="top" */
ul li          /* <li> inde i en <ul> */
.kort h2       /* <h2> inde i class="kort" */
a:hover        /* links når musen er over */
input:focus    /* feltet der har fokus */

class (punktum) kan genbruges på mange elementer; id (havelåge) må kun bruges én gang pr. side. Mellemrum betyder "inde i". Samme selectors bruges i JavaScripts querySelector.

3. Prioritet: hvilken regel vinder?

p { color: black; }
.kort { color: blue; }
#top { color: red; }

/* <p class="kort" id="top"> bliver rød */

Mere specifik selector slår mindre specifik: id > class > element. Ved samme specificitet vinder den regel, der står sidst i filen. Undgå !important – det bryder hele systemet.

4. Farver, tekst og enheder

color: #1a2733;            /* hex-farve */
background-color: white;
color: rgb(26, 39, 51);    /* samme som hex */

font-family: Arial, sans-serif;
font-size: 1rem;   /* relativ til roden (16px) */
font-weight: bold;
text-align: center;
line-height: 1.5;

width: 50%;        /* halvdelen af forælderen */
max-width: 600px;  /* men aldrig bredere */
margin: 2rem;      /* afstand udenom */

Brug rem til tekst og afstande (skalerer med brugerens skriftstørrelse) og px til små detaljer som ramme. % er relativt til forældreelementet.

5. Boksmodellen

.kort {
  padding: 1rem;          /* luft INDEN i kassen */
  border: 1px solid #ccc; /* streg rundt om */
  margin: 1rem;           /* afstand til naboer */
}

/* Anbefales altid øverst i filen: */
* { box-sizing: border-box; }
Vigtigt: med box-sizing: border-box tæller padding og border ind i width, så en kasse med width: 300px faktisk er 300px bred. Uden den bliver kassen bredere end angivet.

6. Flexbox – række eller kolonne

.raekke {
  display: flex;
  gap: 1rem;              /* mellemrum mellem børn */
  justify-content: space-between; /* fordel vandret */
  align-items: center;    /* centrér lodret */
  flex-wrap: wrap;        /* fold til næste linje */
}

.barn { flex: 1; }        /* alle børn lige brede */

Du sætter display: flex på forælderen; børnene lægger sig på række. Perfekt til menuer, kort-rækker og centrering.

7. Grid – layout i to dimensioner

.kort-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 lige kolonner */
  gap: 1rem;
}

/* Auto-tilpasning uden media query: */
.grid-auto {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

fr er en andel af den ledige plads. auto-fit + minmax giver et grid, der selv skifter antal kolonner efter bredden – praktisk til kort-layouts.

8. Responsiv: media queries

/* Mobil først: start med det smalle layout */

@media (min-width: 700px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  .grid { grid-template-columns: 1fr 1fr 1fr; }
}

min-width: 700px betyder "gælder når skærmen er mindst 700px bred". Byg mobil-layoutet først og tilføj regler for større skærme bagefter. Siden skal også have <meta name="viewport" content="width=device-width, initial-scale=1.0"> i <head>, ellers lyver telefonen om sin bredde.

9. Sæt tekst og billeder pænt

img {
  max-width: 100%;  /* aldrig bredere end beholderen */
  height: auto;     /* behold proportioner */
  display: block;   /* fjern lille mellemrum under */
}

article {
  max-width: 70ch;    /* læselig linjelængde */
  margin: 0 auto;     /* centrér på siden */
}

h1, h2 { text-wrap: balance; }

10. Skjul, placér og positionér

.skjult { display: none; }     /* fjernet helt */

.fasta {
  position: sticky;            /* bliver hængende */
  top: 0;
}

.badge {
  position: absolute;          /* placér i hjørnet */
  top: 0; right: 0;
}
.forælder { position: relative; } /* badges målestok */

absolute placérer i forhold til nærmeste forælder med position: relative. sticky scroller med, indtil elementet når top-grænsen, og hænger så fast (fx en menu).

11. Variabler og hover-effekter

:root {
  --blaa: #1a5fb4;   /* egen variabel */
  --radius: 8px;
}

.knap {
  background: var(--blaa);
  border-radius: var(--radius);
  transition: background 0.2s;
}
.knap:hover { background: #154b8f; }

CSS-variabler samler farver og mål ét sted – skift tema ved kun at ændre :root. transition gør hover-skift blødt.

12. Hurtig oversigt

display: flex / gridlayout-system på forælderen gap: 1remmellemrum mellem flex/grid-børn margin: 0 autocentrér en boks vandret text-align: centercentrér tekst border-radius: 8pxrunder hjørner box-shadow: 0 2px 6px #0003blød skygge overflow: autoscrollbar ved for stort indhold cursor: pointerhånd-ikon over klikbare ting

13. Typiske faldgruber