Modul 3 · Kapitel 3.1

Vad CSS gör

CSS styr färg, storlek, avstånd, layout och andra visuella egenskaper.

Mål

Efter kapitlet ska du kunna...

förklara vad CSS används till
koppla en extern CSS-fil till HTML
identifiera selektor, egenskap, värde och deklaration
beskriva grunderna i kaskad och arv

HTML utan CSS

Webbläsaren har standardregler

En vanlig rubrik

Ett vanligt textstycke i webbläsarens standardstil.

Reglerna kallas ofta user-agent stylesheet.

CSS låter dig skriva egna regler ovanpå standarden.

Ansvar

HTML och CSS har olika uppgifter

HTML	CSS
Innehåll och struktur	Presentation och utseende
`h1`, `p`, `nav`	Färg, storlek, avstånd och layout

CSS-regel

Regelns grundstruktur

h1 {
  color: green;
  font-size: 2rem;
}

Regeln väljer alla h1-element och ändrar två egenskaper.

Selektor

Vilka element påverkas?

h1 {
  color: green;
}

h1 är selektorn.

Den väljer sidans alla h1-element.

Deklaration

Egenskap och värde

color
egenskapgreen
värde

color: green;

Egenskapen och värdet bildar tillsammans en deklaration.

Kolon skiljer dem åt och semikolon avslutar deklarationen.

Interaktiv CSS

Ändra regeln och se resultatet

color font-size

Rubrik

h1 { color: green; font-size: 2rem; }

Extern CSS

Kursens huvudmetod

<link rel="stylesheet" href="styles.css">

Raden placeras i HTML-dokumentets head.

HTML innehåller strukturen och styles.css innehåller utseendet.

Projektfiler

Filerna ligger i samma mapp

min-webbplats/
  index.html
  styles.css

Därför räcker den relativa sökvägen href="styles.css".

CSS i head

style passar små tester

<head>
  <style>
    h1 { color: green; }
  </style>
</head>

Regeln påverkar bara HTML-sidan där style-elementet finns.

Inline-CSS

Stil direkt på elementet

<h1 style="color: green">Rubrik</h1>

Inline-CSS blandar HTML-struktur och utseende.

Undvik det i vanliga projekt eftersom koden blir svårare att underhålla.

Tre metoder

Vilken ska du välja?

Metod	Användning
Extern fil	Vanliga projekt och flera sidor.
`style` i head	Små tester på en sida.
Inline-CSS	Bör normalt undvikas.

Kaskaden

En senare regel kan vinna

h1 { color: green; }

h1 { color: blue; }

Reglerna har samma selektor och samma styrka.

Den senare deklarationen gör därför rubriken blå.

Testa kaskaden

Byt ordning på reglerna

h1 { color: green; }
h1 { color: blue; }

Rubriken blir blå.

Arv

Barn kan ärva från en förälder

body {
  color: purple;
  font-family: Verdana, sans-serif;
}

Texten i stycket ärver färg och font från body.

Alla CSS-egenskaper ärvs inte, men textfärg och font är vanliga exempel.

Kontrollfråga

Vilken färg vinner?

p { color: orange; }
p { color: navy; }

Tänk efter innan du går vidare.

Svar: navy, eftersom den regeln står senare och reglerna har samma styrka.

Prova själv

Skapa din första stilmall

Skapa styles.css bredvid index.html.
Koppla filen med link i head.
Ändra färgen på h1.
Lägg samma regel längre ned med en annan färg.
Spara och kontrollera vilken regel som vinner.

Sammanfattning

Kom ihåg

CSS styr sidans presentation och utseende.
Selektorn väljer element; deklarationen innehåller egenskap och värde.
Extern CSS är huvudmetoden i kursen.
Kaskaden avgör vilken regel som vinner.
Vissa egenskaper kan ärvas från förälder till barn.