CSS-reglerna, en i taget

Element, klass och id

Tre sätt att peka ut element: på taggnamn, på class eller på id.

p träffar alla stycken. .ingress träffar bara element med class="ingress". #faglar träffar det enda elementet med id="faglar".

Att veta: punkt betyder klass, brädgård betyder id. Ett element kan ha flera klasser, class="kort viktig", men bara ett id.

p { color: #2f6f5e; }

.ingress {
  color: #2f6f5e;
  font-weight: 700;
}

Vanligt misstag: att formge med #id. Den är så specifik att den blir svår att skriva över, och den är förbjuden för formgivning i Projekt 2. Använd klasser.

Mer i guiden: avsnitt 2.

Mellanslag och >

Två sätt att kombinera selektorer: någonstans inuti och direkt barn.

.artikel p träffar varje p som ligger inuti .artikel, hur djupt som helst. .artikel > p träffar bara de p som ligger direkt i .artikel, inte de som ligger i ett element längre in.

Att veta: komma är något helt annat. h1, h2 betyder "både h1 och h2" – två selektorer som delar samma regel.

.artikel p { color: #2f6f5e; }

.artikel > p { color: #2f6f5e; }

Mer i guiden: avsnitt 2, Kombinationer.

Attributselektorn [attribut="värde"]

Väljer element utifrån ett attribut de redan har i HTML:en.

a[aria-current="page"] träffar länken till sidan man står på. Ingen extra klass behövs – attributet säger redan "du är här", och formen kan följa innebörden.

/* ingen regel för aria-current */

.meny a[aria-current="page"] {
  color: #8a4f12;
  font-weight: 700;
  text-decoration: none;
}

Vanligt misstag: att glömma citattecknen eller skriva mellanslag före hakparentesen. a [aria-current] betyder "något med attributet inuti en länk" – inte samma sak.

:hover och :focus-visible

Pseudoklasser som väljer på tillstånd: muspekaren är över, respektive elementet har fått fokus med tangentbordet.

För musen över länkarna nedan. Klicka sedan i rutan och tryck Tab tills du når länken i den högra rutan.

Att veta: en pseudoklass skrivs med ett kolon direkt efter selektorn, utan mellanslag. Den räknas som en klass i specificiteten.

.lank { background: #e7f0ec; }

.lank:hover {
  background: #2f6f5e;
  color: #ffffff;
}
.lank:focus-visible {
  outline: 3px solid #8a4f12;
}

Vanligt misstag: .lank :hover med mellanslag. Då betyder den "något inuti länken som muspekaren är över".

:nth-child(even)

Väljer element efter deras plats bland syskonen.

even är jämna – andra, fjärde, sjätte. odd är udda. Det används mest för att tona varannan rad i en tabell eller lista, utan att märka en enda rad i HTML:en.

/* ingen regel */

li:nth-child(even) {
  background: #e7f0ec;
}

Fler i samma familj: :first-child, :last-child, :nth-child(3) för just det tredje.

Specificitet: vilken regel vinner?

När två regler säger olika saker om samma element vinner den mest specifika – oavsett vilken som står sist.

Specificitet räknas som tre siffror: id – klass – element. Jämför från vänster. En klass slår hur många element som helst.

I rutan till höger står klassregeln först och elementregeln sist. Klassen vinner ändå.

p { color: #8a4f12; }

.ingress { color: #2f6f5e; }  /* 0-1-0 */
p { color: #8a4f12; }         /* 0-0-1 */

Vanligt misstag: att lösa krocken med !important. Den hoppar över hela räkningen, och det enda som slår den är en till. Sänk den andra selektorns specificitet i stället.

Mer i guiden: avsnitt 3.

Lika specificitet: den sista vinner

Är selektorerna lika specifika avgör ordningen i filen.

Samma två regler i båda rutorna, i omvänd ordning. Det är därför man skriver stilmallen från allmänt till särskilt: det som står längre ned ska få bestämma.

.ingress { color: #8a4f12; }
.ingress { color: #2f6f5e; }

.ingress { color: #2f6f5e; }
.ingress { color: #8a4f12; }

De tre frågorna, i ordning: träffar regeln alls? Vilken är mest specifik? Vilken står sist?

Arv

Vissa egenskaper följer med ned till elementen inuti, andra gör det inte.

Tumregeln: det som handlar om text ärvs, det som handlar om lådan gör det inte. I rutan till höger får det inre stycket färgen men inte ramen.

/* ingen regel */

.ruta {
  color: #2f6f5e;
  border: 2px solid #2f6f5e;
}

Vanligt misstag: att tro att formulärfält ärver typsnittet. Det gör de inte – därför font: inherit på input, select och textarea.

box-sizing: border-box

Bestämmer vad width mäter.

Webbläsarens förval är content-box: bredden gäller bara innehållet, och padding och border läggs utanpå. Med border-box räknas de inåt, så att 12rem blir 12rem. Den bruna linjen i båda rutorna är 12rem lång.

Följer med: ingenting – men utan den regeln gäller content-box för alla element. Skriv den överst i varje stilmall.

.ruta {
  width: 12rem;
  padding: 1.5rem;
  border: 4px solid #2f6f5e;
}

*, *::before, *::after {
  box-sizing: border-box;
}

Räkna själv: utan border-box blir rutan 12 + 1,5 + 1,5 rem plus två ramar på 4px – alltså 15rem och 8px.

Mer i guiden: avsnitt 5.

padding

Luft innanför kanten.

Padding har elementets egen bakgrundsfärg – den gör lådan större, inte avståndet till grannen.

.ruta { background: #e7f0ec; }

.ruta {
  background: #e7f0ec;
  padding: 1rem;
}

Padding eller margin? Ska luften ha bakgrundsfärgen är det padding. Ska den skilja elementet från grannen är det margin.

margin

Luft utanför kanten.

Margin är alltid genomskinlig. Den skjuter grannarna ifrån sig.

.ruta { background: #e7f0ec; }

.ruta {
  background: #e7f0ec;
  margin-bottom: 1rem;
}

Kortformen gäller både margin och padding:

border

Kanten runt lådan.

Kortformen tar tre värden: tjocklek, stil och färg. Ordningen spelar ingen roll, men stilen måste finnas med.

Följer med: utan stil blir stilen none – och då syns ingen kant alls, hur tjock du än gör den.

.ruta { border: 3px #2f6f5e; }

.ruta { border: 3px solid #2f6f5e; }

Vanliga stilar: solid, dashed, dotted. En sida i taget: border-bottom, border-left.

Marginalkollaps

Två lodräta marginaler som möts slås ihop till en.

Den första rutan har margin-bottom: 2rem, den andra margin-top: 1rem. I vanligt flöde blir avståndet 2rem – den största vinner, de adderas inte. Inuti en flex- eller grid-behållare kollapsar marginaler inte, och då blir det 3rem.

.forsta { margin-bottom: 2rem; }
.andra  { margin-top: 1rem; }

.kolumn {
  display: flex;
  flex-direction: column;
}

Att veta: det gäller bara lodrätt. Sidledes marginaler kollapsar aldrig.

max-width

Den största bredd elementet får ha.

Elementet får vara smalare, men aldrig bredare. Två vanliga användningar: läsmått på brödtext, så att raderna inte blir för långa, och max-width: 100% på bilder, så att de inte spränger sin spalt. Den bruna stapeln står för en bild som är 60rem bred.

/* ingen regel */

p { max-width: 20rem; }
.bild { max-width: 100%; }

Vanligt misstag: width i stället för max-width. Med width: 20rem blir stycket 20rem även i en telefon som bara har 18rem att ge.

color

Textfärgen.

color ärvs. Sätter du den på en behållare får all text inuti samma färg, om inget längre in säger något annat.

/* ingen regel */

.ruta { color: #2f6f5e; }

Vanligt misstag: grå text på vit bakgrund som ser stilren ut men har för låg kontrast. Riktvärdet är 4,5:1 för brödtext. DevTools visar värdet när du inspekterar färgen.

background

Bakgrunden bakom innehållet och paddingen.

background ärvs inte. Att stycket inuti ändå ser tonat ut beror på att det är genomskinligt som förval – rutans bakgrund syns igenom.

.ruta { padding: 0.6rem; }

.ruta {
  padding: 0.6rem;
  background: #e7f0ec;
}

background är en kortform. background-color sätter bara färgen och gör samma sak här.

Färgvärden: hex, rgb och hsl

Fyra sätt att skriva samma sak: namn, hex, rgb och hsl.

hsl(164 40% 31%)
hsl(164 40% 45%)
hsl(164 40% 60%)
rgb(47 111 94 / 30%)

Att veta: hsl är den enda som går att räkna i huvudet. Byt bara ljusheten, så får du en skala som hänger ihop.

font-family

Vilket typsnitt texten ska ha.

Värdet är en stack: en lista i fallande ordning. Webbläsaren tar det första som finns på datorn. Sist står alltid en generisk familj – sans-serif, serif eller monospace – så att det finns något att falla tillbaka på.

Följer med: utan regel använder de flesta webbläsare ett serift typsnitt, oftast Times. font-family ärvs, så det räcker att sätta den på body.

/* ingen regel */

body {
  font-family: "Segoe UI",
    system-ui, -apple-system,
    sans-serif;
}

Vanligt misstag: att glömma citattecknen runt namn med mellanslag, eller att inte avsluta med en generisk familj.

font-size med rem och em

Textstorleken.

rem betyder gånger sidans grundstorlek, normalt 16 pixlar. em betyder gånger förälderns storlek – och därför växer den ihop när element ligger i varandra. Båda rutorna har tre nivåer inuti varandra med klassen steg.

.steg { font-size: 1.2em; }

.steg { font-size: 1.2rem; }

Varför rem och inte px? Har användaren ställt in större text i webbläsaren följer rem med. px står still.

Räkna: 1.5rem är 24px, 0.875rem är 14px – om grundstorleken är 16px.

line-height

Radavståndet.

Skriv den utan enhet. Då betyder 1.6 "1,6 gånger elementets egen textstorlek", och rubriker och brödtext får var sitt rimliga avstånd. Riktvärde för brödtext: 1,5–1,7.

Följer med: förvalet normal är ungefär 1,2 – tätt för brödtext. line-height ärvs.

/* ingen regel */

p { line-height: 1.6; }

Vanligt misstag: line-height: 24px. Den ärvs som ett fast värde, och en rubrik på 40px får då 24px radavstånd – raderna krockar.

clamp()

Ett värde som växer med fönstret, mellan ett minsta och ett största.

Tre värden: minsta, önskade, största. Det mittersta innehåller oftast vw – en hundradel av fönstrets bredd – och det är det som får värdet att växa. Dra i webbläsarfönstret och se rubriken nedan ändra storlek, men aldrig under 1,2rem eller över 2,2rem.

.rubrik {
  font-size: clamp(1.2rem, 0.8rem + 2vw, 2.2rem);
}

Att veta: det är ett sätt att få något att skala utan en enda media query.

display: flex

Gör elementet till en flexbehållare. Barnen blir flex-barn.

Barnen slutar ligga under varandra och ställer sig på en rad. De blir bara så breda som sitt innehåll.

Följer med automatiskt: flex-direction: row (en rad), flex-wrap: nowrap (ingen radbrytning), justify-content: flex-start (samlade till vänster) och align-items: stretch (lika höga). Inget av det behöver du skriva – bara det du vill ändra.

.rad { }

.rad {
  display: flex;
  gap: 0.4rem;
}

Vanligt misstag: att sätta display: flex på barnen. Det ska stå på föräldern – den som ska ordna sina barn.

Mer i guiden: avsnitt 8.

flex-direction

Åt vilket håll barnen ställer sig.

row är förvalet: vågrätt. column lägger dem lodrätt – men fortfarande som flex-barn, så gap och de andra egenskaperna fungerar.

Att veta: justify-content och align-items byter håll med column. De följer riktningen, inte skärmen.

.rad { display: flex; }

.rad {
  display: flex;
  flex-direction: column;
}

justify-content

Hur barnen fördelas längs riktningen.

Det märks bara när det finns utrymme över. space-between lägger det första barnet längst till vänster, det sista längst till höger och fördelar luften mellan dem.

.rad { display: flex; }

justify-content: center;

justify-content: space-between;

Vanligt misstag: att använda justify-content för att centrera lodrätt i en rad. Lodrätt i en rad är tvärs riktningen – det är align-items.

align-items

Hur barnen placeras tvärs riktningen.

Det mittersta barnet är högre än de andra. Förvalet stretch drar ut alla till samma höjd. center låter dem behålla sin höjd och lägger dem i mitten.

.rad { display: flex; }

.rad {
  display: flex;
  align-items: center;
}

Minnesregel: justify längs, align tvärs. Med flex-direction: column är längs lodrätt och tvärs vågrätt.

flex-wrap

Om barnen får radbryta när de inte får plats.

Förvalet nowrap pressar ihop barnen på en rad tills de inte går att krympa mer – sedan sticker de ut ur behållaren. Med wrap flyttar de ned på en ny rad. Det är så en meny klarar en smal telefonskärm utan media queries.

.rad {
  display: flex;
  gap: 0.4rem;
}

.rad {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

Vanligt misstag: att lägga en media query för att få menyn att radbryta. flex-wrap: wrap gör det av sig själv.

gap

Avstånd mellan barnen.

Bara mellan – inte före det första eller efter det sista. Två värden ger olika avstånd mellan rader och kolumner: gap: 0.5rem 1.5rem.

Att veta: gap fungerar bara i flex- och grid-behållare. På ett vanligt element gör den ingenting.

.rad { display: flex; }

.rad {
  display: flex;
  gap: 1rem;
}

Vanligt misstag: margin på varje barn i stället. Då får det sista barnet en marginal det inte ska ha, och den måste tas bort med en egen regel.

flex: 1

Skrivs på ett barn: ta det utrymme som blir över.

Sätter du den på ett barn av tre växer just det och de andra behåller sin storlek. Sätter du den på alla delar de lika.

Följer med: utan den växer inga barn – förvalet är att de får krympa men inte växa.

.sokrad { display: flex; }

.sokrad { display: flex; }
.sokrad input { flex: 1; }

display: grid

Gör elementet till en grid-behållare.

Ensam gör den nästan ingenting synligt – rutorna nedan ser likadana ut. Det är grid-template-columns som gör jobbet. Men nu fungerar gap, och barnen är grid-barn som kan placeras.

Följer med automatiskt: en enda kolumn, så många rader som behövs, och barn som fyller sin cell på bredden.

.ruta { }

.ruta { display: grid; }

Mer i guiden: avsnitt 9.

grid-template-columns och fr

Hur många kolumner, och hur breda.

Ett värde per kolumn. fr betyder en andel av det som blir över. 1fr 1fr 1fr är tre lika breda, 2fr 1fr är två där den första är dubbelt så bred. Barnen fyller cellerna i tur och ordning, rad för rad.

.ruta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
}

.ruta {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.4rem;
}

Blanda gärna: 200px 1fr ger en fast kolumn och en som tar resten.

Vanligt misstag: att tro att 1fr är en bredd. Det är en andel av det som blir över när de fasta kolumnerna fått sitt.

repeat(auto-fit, minmax(…, 1fr))

Ett rutnät som väljer antal kolumner själv.

Läs den inifrån och ut. minmax(6rem, 1fr): varje kolumn är minst 6rem och högst sin andel av resten. repeat(auto-fit, …): lägg in så många sådana kolumner som får plats.

Dra i det lilla hörnet nere till höger i varje ruta för att göra den smalare. Med fasta kolumner trycks korten ihop. Med auto-fit blir det färre kolumner.

.ruta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.ruta {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(6rem, 1fr));
}

Att veta: i ditt projekt är det här ofta minmax(16rem, 1fr) – tre kolumner på en laptop, en i en telefon, utan en enda media query. Hörnet att dra i finns inte på alla telefoner; prova på en dator.

grid-column: 1 / -1

Skrivs på ett barn: sträck dig över alla kolumner.

Siffrorna är linjer, inte kolumner. 1 är linjen längst till vänster, -1 är den längst till höger. Rubriken nedan är ett barn till rutnätet precis som korten.

.ruta {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ruta > .rubrik {
  grid-column: 1 / -1;
}

Vanligt misstag: att linda in korten i en extra div för att få rubriken på egen rad. Det behövs inte.

grid-template-areas

Layouten ritad i text.

Varje sträng är en rad, varje ord en cell. Samma namn i flera celler bredvid varandra blir ett område som sträcker sig över dem. Barnen hamnar på plats med grid-area. Områdets namn och barnets klass är två olika saker – de behöver inte heta likadant.

/* ingen layout */

.sida {
  display: grid;
  grid-template-columns: 5rem 1fr;
  grid-template-areas:
    "topp  topp"
    "meny  innehall"
    "fot   fot";
}
.sidhuvud { grid-area: topp; }
.meny     { grid-area: meny; }
.huvuddel { grid-area: innehall; }
.sidfot   { grid-area: fot; }

Vanligt misstag: olika många ord i raderna, eller ett område som inte blir en rektangel. Då struntar webbläsaren i hela regeln.

minmax(0, 1fr) och overflow-x: auto

Fällan när något brett ligger i ett rutnät – och vägen ut.

Ett grid-barn blir som förval aldrig smalare än sitt innehåll. Ligger en bred tabell i en 1fr-kolumn växer kolumnen i stället för att hålla emot, och hela sidan börjar scrolla i sidled. minmax(0, 1fr) låter kolumnen bli hur smal som helst, och overflow-x: auto låter innehållet scrolla i sin egen ruta.

.ruta {
  display: grid;
  grid-template-columns: 1fr;
}

.ruta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.svep { overflow-x: auto; }

--namn och var(--namn)

Definiera ett värde med två bindestreck, hämta det med var().

Båda rutorna har exakt samma regler för rubriken och knapparna. Det enda som skiljer är ett värde i :root – och allt som använder variabeln byter färg på en gång.

Att veta: variabler ärvs nedåt precis som color. Därför läggs de på :root, dokumentets rot, och gäller då på hela sidan.

:root { --accent: #2f6f5e; }

.titel { color: var(--accent); }
.knapp { background: var(--accent); }

:root { --accent: #6b3fa0; }

.titel { color: var(--accent); }
.knapp { background: var(--accent); }

Vanligt misstag: att döpa efter värdet, --gron. Byter du färgen ljuger namnet. Döp efter rollen: --accent, --text, --bakgrund.

Mer i guiden: avsnitt 10.

Felstavad variabel och reservvärde

Vad som händer när var() inte hittar variabeln.

Variabeln heter --accent, men regeln frågar efter --accnet. Webbläsaren säger inget – texten får bara den färg den skulle ha haft utan regeln. Ett reservvärde efter kommatecknet används när variabeln saknas.

:root { --accent: #2f6f5e; }
p { color: var(--accnet); }

:root { --accent: #2f6f5e; }
p { color: var(--accnet, #b23a2f); }

Att veta: namnen är skiftlägeskänsliga. --Accent och --accent är två olika variabler.

@media (prefers-color-scheme: dark)

Regler som bara gäller när användaren valt mörkt läge.

Ligger färgerna i variabler räcker det att byta värdena. Ingen regel längre ned i filen behöver skrivas om – de hämtar redan sin färg från variablerna.

:root {
  --bakgrund: #fbfaf6;
  --text: #1f2420;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bakgrund: #141815;
    --text: #e8ede9;
  }
}

body {
  background: var(--bakgrund);
  color: var(--text);
}

Prova: byt till mörkt läge i datorns inställningar. Den här sidan är byggd på precis det sättet – men rutorna med exemplen behåller sin ljusa bakgrund med flit, så att färgerna i koden stämmer.