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.

## Hvordan legge til CSS i HTML
Det finnes tre måter å bruke CSS på i et HTML-dokument:
1. Inline-stiler;
2. Innebygde stilark;
3. Eksterne stilark.

Hver metode fungerer forskjellig og brukes i ulike situasjoner.

## Inline-stiler
Inline-stiler skrives direkte i et HTML-element ved å bruke `style`-attributtet.<br>
Eksempel:

PHAgc3R5bGU9ImNvbG9yOiBibHVldmlvbGV0OyI+CiAgTGV0J3MgdXNlIGlubGluZSBzdHlsZXMgYW5kIGNoZWNrIHRoZSByZXN1bHQKPC9wPg==

Denne stilen gjelder kun for dette spesifikke elementet.

Inline-stiler er raske å bruke, men de kan ikke gjenbrukes og er vanskelige å håndtere i større prosjekter.

## Innebygd stilark

Et innebygd stilark skrives inne i `<style>`-taggene i `<head>`-seksjonen av et HTML-dokument.<br>
Eksempel:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxzdHlsZT4KICAgICAgcCB7CiAgICAgICAgY29sb3I6IGJsdWV2aW9sZXQ7CiAgICAgICAgZm9udC1zaXplOiAzNnB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPldlIHdvcmsgd2l0aCBhbiBlbWJlZGRlZCBzdHlsZSBzaGVldCBpbiB0aGUgaGVhZCBvZiBIVE1MLjwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

Denne metoden bruker stiler på hele siden, men kun innenfor denne ene HTML-filen.

Nyttig for små eller frittstående sider.

## Eksternt stilark

Ekstern CSS lagrer stiler i en separat `.css`-fil og kobler den til HTML ved å bruke `<link>`-taggen.<br>
Eksempel:

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

cCB7CiAgY29sb3I6IGJsdWV2aW9sZXQ7CiAgZm9udC1zaXplOiAzNnB4Owp9

Denne metoden gjør det mulig å gjenbruke stiler på tvers av flere sider.

Dette er den foretrukne og mest skalerbare tilnærmingen for reelle prosjekter.

Inline-stiler: brukes direkte på elementer, men kan ikke gjenbrukes.

Innebygd stilark: plasseres i `<head>`, påvirker kun én side.

Eksternt stilark: lagres i en separat `.css`-fil, kan gjenbrukes og anbefales for de fleste prosjekter.

Oppsummering

I dette kurset vil vi hovedsakelig bruke eksterne stilark.

Hvilke måter finnes for å legge til stiler i et HTML-dokument?

Lær det grunnleggende i CSS, stilsett-språket som forvandler utseendet og følelsen på nettsider. Utforsk sentrale konsepter som tekststiler, farger, mellomrom, boksmodellen, Flexbox og dekorative effekter. Bygg ferdigheter for å lage visuelt engasjerende og velstrukturerte nettsider.

Forstå hvordan CSS kobles til HTML og hvordan stiler brukes gjennom selektorer.
Bruk av farger, tekststiler og hover-effekter for å kontrollere visuell presentasjon.

Forbedre typografi ved hjelp av linjehøyde, avstand, skriftegenskaper og egendefinerte fonter. Kontroller skrifttyper, vekt, stil og størrelse for bedre lesbarhet.

Kontroll av layoutstruktur ved bruk av margin, padding, border og bredde-egenskaper. Forståelse av boksstørrelsesatferd og elementvisningstyper som block, inline og inline-block.

Kontroller horisontale og vertikale oppsett ved hjelp av Flexbox-egenskaper. Juster retning, justering og avstand for å strukturere UI-komponenter.

Forbedre oppsett ved bruk av bakgrunnsfarger, bilder, pseudo-elementer og skygger. Style visuelle komponenter for dybde og kontrast.

Koble CSS til HTML

Hvordan legge til CSS i HTML

Inline-stiler

Innebygd stilark

Eksternt stilark