Mål

• Förstå vad CSS används till.
• Kunna koppla en extern CSS-fil till HTML.
• Förstå grunderna i selektor, deklaration, egenskap och värde.
• Känna till att CSS styrs av kaskad, arv och prioritet.

HTML utan CSS

Om du skriver HTML utan CSS visar webbläsaren sidan med sina standardregler. De kallas ofta user-agent stylesheet. Därför blir en h1 stor och fet, medan ett p-element får marginaler före och efter.

CSS låter dig skriva dina egna regler ovanpå webbläsarens standard.

CSS-regelns delar

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

• h1 är selektorn. Den väljer vilka element som påverkas.
• color och font-size är egenskaper.
• green och 2rem är värden.
• En egenskap och ett värde bildar en deklaration.

Tre sätt att lägga till CSS

Extern CSS-fil

Det vanligaste och bästa arbetssättet i kursen är att lägga CSS i en egen fil.

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

CSS i head

Vid små tester kan CSS ligga i ett style-element i head.

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

Inline-CSS

Inline-CSS skrivs direkt i ett HTML-element. Det bör undvikas i vanliga projekt eftersom kod och utseende blandas.

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

Kaskad och arv

CSS läses med regler för vilken deklaration som vinner. En regel som kommer senare kan vinna över en tidigare regel om de har samma styrka. Vissa egenskaper, till exempel textfärg och font, kan ärvas från föräldraelement till barn.

Prova själv

1. Skapa styles.css i samma mapp som index.html.
2. Koppla filen med link i head.
3. Skriv en regel som ändrar färgen på h1.
4. Testa att lägga samma regel längre ned med en annan färg. Vilken vinner?