Styla med CSS – färger, typografi och layout
Lär dig CSS – språket som ger din webbsida färg, typografi och layout. Vi bygger vidare på HTML-sidan från förra steget.
Vad är CSS?
CSS (Cascading Style Sheets) är språket som bestämmer hur HTML-element ser ut. Om HTML är skelettet, är CSS huden, kläderna och frisyren.
Med CSS styr du:
- Färger och bakgrunder
- Typsnitt och textstorlekar
- Marginaler och avstånd
- Layout – hur element placeras på sidan
Tre sätt att lägga till CSS
1. Inline (direkt i taggen)
<p style="color: blue; font-size: 18px;">Blå text</p>Fungerar men rekommenderas inte – svårt att underhålla.
2. Internt (i head-taggen)
<head>
<style>
p { color: blue; }
</style>
</head>3. Externt (i en separat fil) ✓ Rekommenderat
<head>
<link rel="stylesheet" href="style.css">
</head>Skapa en fil style.css i samma mapp som din index.html.
Selektorer – välja vad som ska stylas
En CSS-regel har tre delar: selektor, egenskap och värde.
h1 {
color: darkblue;
font-size: 32px;
}Vanliga selektorer
| Selektor | Väljer | Exempel |
|---|---|---|
h1 | Alla h1-taggar | h1 { color: red; } |
.klass | Element med class="klass" | .intro { font-size: 20px; } |
#id | Element med id="id" | #header { background: black; } |
* | Alla element | * { margin: 0; } |
Färger
CSS stödjer flera sätt att ange färger:
/* Namngivna färger */
color: tomato;/* Hexadecimalt */
color: #ff6347;/* RGB */
color: rgb(255, 99, 71);/* HSL (nyansering, mättnad, ljushet) */
color: hsl(9, 100%, 64%);Tips: Använd ett verktyg som Coolors för att skapa en färgpalett till din sajt.
Box Model – hur element tar plats
Varje HTML-element är en rektangulär "låda" med fyra lager:
┌─────────── margin ───────────┐
│ ┌──────── border ──────────┐ │
│ │ ┌────── padding ───────┐ │ │
│ │ │ │ │ │
│ │ │ content │ │ │
│ │ │ │ │ │
│ │ └──────────────────────┘ │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘- Content – själva innehållet (text, bild)
- Padding – avstånd mellan innehåll och kant
- Border – synlig kantlinje
- Margin – avstånd utanför kanten (till andra element)
.kort {
padding: 20px;
margin: 16px;
border: 1px solid #ddd;
border-radius: 8px;
}Typografi
body {
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}h1 {
font-size: 2em;
font-weight: 700;
margin-bottom: 0.5em;
}Använd relativa enheter (em, rem) istället för pixlar för bättre tillgänglighet.
Flexbox – modern layout
Flexbox är det enklaste sättet att placera element bredvid varandra.
.container {
display: flex;
gap: 20px;
justify-content: space-between;
align-items: center;
}.container > div {
flex: 1;
padding: 20px;
background: #f5f5f5;
}I din HTML:
<div class="container">
<div>Kolumn 1</div>
<div>Kolumn 2</div>
<div>Kolumn 3</div>
</div>Viktiga flexbox-egenskaper
| Egenskap | Gör |
|---|---|
display: flex | Aktiverar flexbox |
flex-direction | row (horisontellt) eller column (vertikalt) |
justify-content | Placering längs huvudaxeln |
align-items | Placering längs tväraxeln |
gap | Avstånd mellan elementen |
flex-wrap | Tillåter radbrytning |
Prova: Styla din HTML-sida
Skapa style.css och klistra in:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: 'Segoe UI', sans-serif;
line-height: 1.6;
max-width: 700px;
margin: 40px auto;
padding: 0 20px;
color: #2d2d2d;
background: #fafafa;
}h1 {
color: #1a1a2e;
margin-bottom: 16px;
border-bottom: 3px solid #e94560;
padding-bottom: 8px;
}p {
margin-bottom: 12px;
}a {
color: #e94560;
text-decoration: none;
}a:hover {
text-decoration: underline;
}Länka den i din index.html med <link rel="stylesheet" href="style.css"> i <head> och ladda om.
Nästa steg
Du kan nu strukturera innehåll med HTML och styla det med CSS. I nästa artikel kombinerar vi allt och bygger en komplett portfolio-sida som du kan använda som ditt eget projekt.
Nästa steg
Nu kan du både HTML och CSS! Dags att kombinera allt i ett riktigt projekt:
👉 Bygg en komplett portfolio-sida – vi sätter ihop allt du lärt dig till en snygg, responsiv sida.
Om du behöver friska upp minnet om HTML-grunder, se Din första HTML-sida.
Vill du jämföra verktyg?
Jämför de bästa vibe coding-plattformarna →