CSS – egenskaper & värden

CSS styr hur HTML-element ser ut. Varje regel består av egenskap: värde;
Exempel inne i en regel:

p {
  color: #222;
  font-size: 16px;
}

Tips om enheter:
px = pixlar (fast storlek)
% = procent av förälderns storlek
em = relativt till elementets font-size
rem = relativt till sidans rot-font-size
vw/vh = procent av viewportens bredd/höjd

1) Storlek: width, height (min/max)

• width / height – sätter bredd/höjd.
• min-width / min-height – lägsta tillåtna storlek.
• max-width / max-height – högsta tillåtna storlek (vanligt för responsiva bilder/textrader).

Exempel

img { max-width: 100%; height: auto; } /* bild skalar med behållaren */
main { max-width: 1000px; }            /* begränsa radlängd/layouter */
.box { width: 50%; min-height: 200px; }

2) Färg: color, background

• color – textfärg.
• background-color – bakgrundsfärg.
• Färgformat:
  • hex: #1a73e8
  • rgb: rgb(26, 115, 232)
  • Använd Visual Studios inbyggda färgpallet för att enkelt välja färg.

Exempel

h1 { color: #222; }
section { background-color: rgb(210 175 63); }

3) Typsnitt & text

• font-family – lista av typsnitt (fallbacks).
• font-size – textstorlek (t.ex. 16px, 1rem).
• font-weight – vikt: 400 (normal), 700 (bold).
• line-height – radavstånd (t.ex. 1.6 – utan enhet).
• text-align – left, center, right, justify.
• letter-spacing – avstånd mellan tecken.

Exempel

body { 
  font-family: system-ui, Arial, sans-serif; 
  font-size: 16px;
  line-height: 1.6;
}
h1 { font-size: 2rem; font-weight: 700; }
p { text-align: left; }

4) Avstånd: margin, padding, gap

• margin – yttre avstånd utanför elementet.
• padding – inre avstånd (luft i elementet).
• Kortnotation: top right bottom left
• gap – mellanrum mellan barn i flex/grid-containers.

Exempel

.card { 
  margin: 16px 0;      /* top/bottom 16px, left/right 0 */
  padding: 1rem;       /* inre luft */
}
.list { display: flex; gap: 12px; } /* mellanrum mellan barn */

5) Ram & hörn: border, border-radius

• border – linje runt element: bredd stil färg.
• border-radius – rundade hörn (px eller %).

Exempel

.box { 
  border: 1px solid #ddd;
  border-radius: 8px;
}

6) Skugga & genomskinlighet: box-shadow, opacity

• box-shadow: offsetX offsetY blur spread color;
• opacity – 0 (genomskinlig) → 1 (opak).

För box-shadow kan ni gärna använda en generator för att skapa CSS. Det blir betydligt enklare att se vilken skugga ni får. Exempel på en generator: https://cssgenerator.org/box-shadow-css-generator.html

Exempel

.panel { 
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  opacity: 0.98;
}

7) Visa-beteende: display (snabb översikt)

• display: block – tar hela raden (radbrytning före/efter).
• display: inline – ligger i textflödet (ingen egen bredd/höjd).
• display: inline-block – som inline men kan få width/height.
• display: flex – rad/kolumn-layout (centrering, gap).
• display: grid – rutnät (rader/kolumner).

Exempel

nav a { display: inline-block; padding: .5rem .75rem; }
.toolbar { display: flex; gap: .5rem; align-items: center; }

8) Position (grund)

• position: static – standard (följer dokumentflödet).
• relative – referens för barn med absolute.
• absolute – positioneras relativt närmaste relative förälder.
• fixed – låst mot fönstret (t.ex. sticky header).
• sticky – beter sig som relative, men ”fastnar” vid ett läge.

Exempel

.header { position: sticky; top: 0; background: #fff; }
.parent { position: relative; }
.child  { position: absolute; right: 0; bottom: 0; }

9) Bakgrundsbild (snabbt)

• background-image: url("...")
• background-size: cover | contain
• background-position: center | top | left ...
• background-repeat: no-repeat

Exempel

.hero {
  background-image: url("images/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 40vh;
}

10) Bilder i <img> (visning)

• max-width: 100% gör bilder responsiva.
• height: auto behåller proportioner.
• object-fit: cover/contain för beskärning i givna ramar.

Exempel

img { max-width: 100%; height: auto; display: block; }
.thumb { width: 200px; height: 200px; object-fit: cover; } /* beskär till kvadrat */

11) Överflöd & rull: overflow

• overflow: visible | hidden | scroll | auto
• Döljer eller rullar innehåll som sticker ut.

Exempel

.clip { 
  max-height: 120px; 
  overflow: hidden; 
}

12) Snabbtabell – vanliga värden

13) Rekommenderade startvärden (för läsbarhet)

html { font-size: 16px; }
body {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.6;
  color: #222;
}
img { max-width: 100%; height: auto; display: block; }