Summary  
This chapter explains three approaches for applying CSS to HTML—inline styles, embedded style sheets, and external style sheets—detailing how each method scopes and organizes style rules.

General domain of usage  
Web development

Watch this video to see how to connect CSS to HTML using three methods: inline styles, embedded style sheets, and external style sheets. You will follow step-by-step examples to understand where to place your CSS code and how each approach affects your web page. projects. Use simple examples. Do not show the full html document stucture. Focus only on the CSS.

## Hur CSS läggs till i HTML
Det finns tre sätt att applicera CSS på ett HTML-dokument:
1. Inline-stilar;
2. Inbäddade stilmallar;
3. Externa stilmallar.

Varje metod fungerar på olika sätt och används i olika situationer.

## Inline-stilar
Inline-stilar skrivs direkt i ett HTML-element med attributet `style`.<br>
Exempel:

PHAgc3R5bGU9ImNvbG9yOiBibHVldmlvbGV0OyI+CiAgTGV0J3MgdXNlIGlubGluZSBzdHlsZXMgYW5kIGNoZWNrIHRoZSByZXN1bHQKPC9wPg==

Denna stil gäller endast för det specifika elementet.

Inline-stilar är snabba att använda, men de kan inte återanvändas och är svåra att hantera i större projekt.

## Inbäddat stilmall

En inbäddad stilmall skrivs inom `<style>`-taggar i `<head>`-sektionen av ett HTML-dokument.<br>
Exempel:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxzdHlsZT4KICAgICAgcCB7CiAgICAgICAgY29sb3I6IGJsdWV2aW9sZXQ7CiAgICAgICAgZm9udC1zaXplOiAzNnB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPldlIHdvcmsgd2l0aCBhbiBlbWJlZGRlZCBzdHlsZSBzaGVldCBpbiB0aGUgaGVhZCBvZiBIVE1MLjwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

Denna metod tillämpar stilar på hela sidan, men endast inom denna enskilda HTML-fil.

Användbar för små eller fristående sidor.

## Extern stilmall

Extern CSS lagrar stilar i en separat `.css`-fil och kopplar den till HTML med `<link>`-taggen.<br>
Exempel:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDwhLS0gV2UgY2FuIGFkZCBtdWx0aXBsZSBsaW5rcyB0byBDU1Mgc3R5bGUgc2hlZXRzIGlmIG5lZWRlZC4gLS0+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9InN0eWxlcy5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+V2Ugd29yayB3aXRoIGFuIGV4dGVybmFsIHN0eWxlIHNoZWV0IGNvbm5lY3RlZCBpbiB0aGUgaGVhZC48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

cCB7CiAgY29sb3I6IGJsdWV2aW9sZXQ7CiAgZm9udC1zaXplOiAzNnB4Owp9

Denna metod möjliggör återanvändning av stilar över flera sidor.

Det är det föredragna och mest skalbara tillvägagångssättet för verkliga projekt.

Inline-stilar: tillämpas direkt på element, men är inte återanvändbara.

Inbäddat stilmall: tillämpas i `<head>`, påverkar endast en sida.

Extern stilmall: lagras i en separat `.css`-fil, återanvändbar och rekommenderas för de flesta projekt.

Sammanfattning

I denna kurs kommer vi främst att använda externa stilmallar.

Vilka sätt finns det att lägga till stilar i ett HTML-dokument?

Behärska grunderna i CSS, det stiliseringsspråk som förändrar utseendet och känslan på webbsidor. Utforska centrala koncept såsom textstilar, färger, avstånd, boxmodellen, Flexbox och dekorativa effekter. Bygg upp färdigheter för att skapa visuellt tilltalande och välstrukturerade webbsidor.

Förstå hur CSS kopplas till HTML och hur stilar tillämpas genom selektorer.
Tillämpning av färger, textformatering och hovringseffekter för att styra visuell presentation.

Förbättra typografi med hjälp av radavstånd, mellanrum, typsnittsegenskaper och anpassade typsnitt. Kontrollera typsnittsfamiljer, vikt, stil och storlek för ökad läsbarhet.

Styr layoutstruktur med hjälp av marginaler, utfyllnad, ramar och bredd-egenskaper. Förstå boxmodellens storlekshantering och elementens visningstyper såsom block, inline och inline-block.

Styr horisontella och vertikala layouter med Flexbox-egenskaper. Justera riktning, justering och avstånd för att strukturera UI-komponenter.

Förbättra layouter med bakgrundsfärger, bilder, pseudo-element och skuggor. Styla visuella komponenter för djup och kontrast.

Ansluta CSS till HTML

Hur CSS läggs till i HTML

Inline-stilar

Inbäddat stilmall

Extern stilmall