Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Introduktion till CSS för att Styla Webbsidor | Webbplatsanatomi
Learn
Kurser
Learning Tracks
Popular Topics
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
Webbutveckling med ChatGPT

bookIntroduktion till CSS för att Styla Webbsidor

CSS (Cascading Style Sheets) ger dina webbsidor deras visuella utseende. Medan HTML tillhandahåller strukturen, styr CSS färger, typsnitt, avstånd och layout—på samma sätt som inredning och design definierar utseendet på ett hus.

Lägga till CSS för att styla HTML

CSS kan tillämpas på tre huvudsakliga sätt.

Inline-stilar

Använd attributet style för att snabbt styla ett enskilt element.

index.html

index.html

copy

Interna stilar

Lägg till ett <style>-block i <head> för att styla element på samma sida.

index.html

index.html

copy

Externa stilmallar

För större projekt, placera din CSS i en separat fil och länka den till din HTML.

Granska filerna index.html och index.css i exemplet.

index.html

index.html

index.css

index.css

copy

CSS-väljare

Väljare anger vilka element som ska få specifika stilar.

Elementväljare

Riktar in sig på alla element av en specifik typ.

p {
  /* styles */
}

Klassväljare

Riktar in sig på element med ett specifikt klassattribut.

.highlight {
  /* styles */
}

ID-väljare

Riktar in sig på ett specifikt element med ett unikt ID-attribut.

#header {
  /* styles */
}

CSS-egenskaper

CSS-egenskaper definierar hur de valda elementen ska stylas. Här är några vanliga CSS-egenskaper:

  • color anger textfärgen;
  • background-color anger bakgrundsfärgen för ett element;
  • font-size anger textstorleken;
  • margin lägger till avstånd runt ett element.

Vi kan anpassa webbsidans utseende genom att tillämpa CSS-stilar på HTML-elementen för att skapa visuellt tilltalande och användarvänliga upplevelser.

Exempel:

index.html

index.html

index.css

index.css

copy

Videohandledning

question mark

Vilka av följande är giltiga sätt att tillämpa CSS-stilar på en HTML-sida?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 3

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

bookIntroduktion till CSS för att Styla Webbsidor

Svep för att visa menyn

CSS (Cascading Style Sheets) ger dina webbsidor deras visuella utseende. Medan HTML tillhandahåller strukturen, styr CSS färger, typsnitt, avstånd och layout—på samma sätt som inredning och design definierar utseendet på ett hus.

Lägga till CSS för att styla HTML

CSS kan tillämpas på tre huvudsakliga sätt.

Inline-stilar

Använd attributet style för att snabbt styla ett enskilt element.

index.html

index.html

copy

Interna stilar

Lägg till ett <style>-block i <head> för att styla element på samma sida.

index.html

index.html

copy

Externa stilmallar

För större projekt, placera din CSS i en separat fil och länka den till din HTML.

Granska filerna index.html och index.css i exemplet.

index.html

index.html

index.css

index.css

copy

CSS-väljare

Väljare anger vilka element som ska få specifika stilar.

Elementväljare

Riktar in sig på alla element av en specifik typ.

p {
  /* styles */
}

Klassväljare

Riktar in sig på element med ett specifikt klassattribut.

.highlight {
  /* styles */
}

ID-väljare

Riktar in sig på ett specifikt element med ett unikt ID-attribut.

#header {
  /* styles */
}

CSS-egenskaper

CSS-egenskaper definierar hur de valda elementen ska stylas. Här är några vanliga CSS-egenskaper:

  • color anger textfärgen;
  • background-color anger bakgrundsfärgen för ett element;
  • font-size anger textstorleken;
  • margin lägger till avstånd runt ett element.

Vi kan anpassa webbsidans utseende genom att tillämpa CSS-stilar på HTML-elementen för att skapa visuellt tilltalande och användarvänliga upplevelser.

Exempel:

index.html

index.html

index.css

index.css

copy

Videohandledning

question mark

Vilka av följande är giltiga sätt att tillämpa CSS-stilar på en HTML-sida?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 3
some-alt