Färger, typografi och boxmodellen
Använd hex-, rgb- och hsl-värden för färg, välj teckensnitt, ange storlekar och radhöjder samt använd marginal, kantlinje och utfyllnad för att skapa avstånd mellan element.
Färger, typografi och boxmodellen är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
CSS-färgvärden
CSS stöder flera färgformat. Använd det format som är tydligast i sammanhanget: hexadecimala koder för profilfärger, hsl() för enkla färgjusteringar, rgb() för programmässiga värden och namngivna färger för snabb prototypning.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */Bakgrundsfärger och bilder
Ange elementets bakgrund med background-color. Använd background-image med gradienter eller URL:er. Den kortare skrivningen background kombinerar färg, bild, position, storlek och upprepning i en deklaration.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;Teckensnittsegenskaper
Styr typografin med: font-family (typsnitt), font-size (em, rem, px), font-weight (100–900), font-style (kursiv), line-height (läsbarhetsförhållande) och letter-spacing (teckenmellanrum).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}Textegenskaper
Ytterligare textformatering: text-align (left, center, right, justify), text-decoration (underline, line-through, none), text-transform (uppercase, capitalize) och text-overflow: ellipsis för trunkering.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem jämfört med em och px
px är absolut. em är relativt till elementets egen teckenstorlek (och följer kaskaden). rem är relativt till rotens teckenstorlek (förutsägbart). Använd rem för de flesta storlekar så att användarens inställningar för teckenstorlek respekteras.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */Boxmodellen
Varje HTML-element är en rektangulär ruta med fyra lager: innehåll (elementets faktiska mått), padding (utrymme innanför kanten), border och margin (utrymme utanför kanten).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
Som standard (content-box) läggs padding och border till den angivna bredden. Med box-sizing: border-box inkluderas padding och border i den angivna bredden – vilket nästan alltid är det du vill.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}Marginalkollaps
Vertikala marginaler mellan angränsande blockelement kollapsar – endast den större marginalen används. Marginalerna för en förälder och dess första eller sista underordnade element kollapsar också. Marginaler för barn i Flexbox och Grid kollapsar inte.
Kortsyntax för padding
Kortsyntaxen padding: top right bottom left anger alla sidor. Två värden anger vertikala och horisontella sidor. Tre anger topp, horisontella sidor och botten.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */Bordegegenskaper
Ange kanter med kortsyntaxen border: width style color. Enskilda sidor anges med exempelvis border-top. Använd border-radius för rundade hörn. outline liknar border men påverkar inte layouten.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}Överflöde
overflow: hidden klipper innehåll som överskrider elementets storlek. overflow: scroll lägger till rullningslister. overflow: auto lägger endast till rullningslister när det behövs. Använd overflow-x och overflow-y för att styra axlarna oberoende av varandra.
Snabbtest
Med box-sizing: border-box och width: 300px; padding: 20px; border: 2px solid, vilken blir elementets totala renderade bredd?
Sammanfattning: färger, typografi och boxmodellen
Ange färger med hex, rgb eller hsl. Tillämpa teckensnitt med font-family, storlek, vikt och line-height. Varje element är en ruta: innehåll + padding + border + margin. Aktivera box-sizing: border-box globalt för förutsägbara storlekar.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Färger, typografi och boxmodellen” gratis?
Ja – hela texten till ”Färger, typografi och boxmodellen” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Färger, typografi och boxmodellen”?
Använd hex-, rgb- och hsl-värden för färg, välj teckensnitt, ange storlekar och radhöjder samt använd marginal, kantlinje och utfyllnad för att skapa avstånd mellan element. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Färger, typografi och boxmodellen”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Selektorer och kaskaden
- Färger, typografi och boxmodellen
- Display: grunderna i block, inline, flex och grid
- Positionering: relative, absolute, fixed och sticky