Mål

• Koppla och använda en extern CSS-fil.
• Skapa ett enkelt men konsekvent visuellt uttryck.
• Använda boxmodellen och selektorer på ett kontrollerat sätt.

Uppgift

Designa om din profilsida från modul 1. Du ska inte bygga en ny sida från början, utan förbättra den sida du redan har. Målet är att göra den mer läsbar och mer genomtänkt.

Krav

• CSS ska ligga i en extern fil, till exempel styles.css.
• body ska ha en font stack, textfärg och bakgrundsfärg.
• Sidans huvudinnehåll ska ha en maxbredd och luft runt innehållet.
• Bilder ska inte kunna bli bredare än sin behållare.
• Minst två klasser ska användas på ett meningsfullt sätt.
• Länkar ska ha ett tydligt hover- och focus-läge.
• Texten ska ha rimlig line-height.
• HTML och CSS ska valideras eller kontrolleras så långt det går.

Startförslag

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    color: #f3f7f7;
    background: #0f1417;
}

main {
    max-width: 70ch;
    margin: 0 auto;
    padding: 2rem;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

Exempel på hur uppgiften kan se ut

Det här är bara ett exempel. Din profilsida kan ha andra färger, annan text och andra klasser, men den ska visa samma CSS-kontroll: läsbar text, tydliga avstånd, responsiv bild och meningsfulla klassnamn.

Kontrollera

1. Kan sidan läsas utan att texten känns trång?
2. Syns länkar tydligt?
3. Fungerar sidan på en smal skärm?
4. Är klassnamnen begripliga?
5. Kan du förklara varför du valt färger och fonter?

Exit ticket

Skriv kort: Vilken CSS-regel gjorde störst skillnad för sidans läsbarhet?