CSS, selektorer och färg

Var pekar din penna?

HTML ger oss skelettet. Utan CSS ser webben ut som ett trist text-dokument. CSS (Cascading Style Sheets) är färgen, layouten och rörelsen. En viktig tanke bakom CSS är att det separerar vad innehållet är från hur det ser ut, vilket gör det möjligt att ändra hela sidans design utan att röra HTML-koden.

Varför separera?

Att blanda HTML och CSS i samma fil är som att måla husväggarna innan betongstommen är gjuten. Det fungerar tillfälligt, men det går inte att ändra färgen senare utan att riva och bygga om.

Vi använder istället externa CSS-filer. Du skapar en fil som heter style.css och kopplar ihop den med din HTML via en <link>-tagg i <head>:

<link rel="stylesheet" href="style.css" />

rel="stylesheet" talar om att det är ett stilark. href anger sökvägen till filen. Om style.css ligger i samma mapp som din HTML-fil räcker det med filnamnet. Nu kan du ändra bakgrundsfärgen i CSS-filen och alla sidor som använder den uppdateras.

Selektorer

CSS använder selektorer för att veta vad den ska stila. Tänk på det som ett kommandospråk till webbläsaren.

Selektor	Syntax	Användning
Element	`body { }`	Matchar alla `<body>`-taggar.
Klass	`.min-klass { }`	Matchar element med `class="min-klass"`. Återanvändbar.
ID	`#min-id { }`	Matchar ett unikt element med `id="min-id"`. Endast ett per sida.

Tre regler är värda att memorera: klasser börjar alltid med punkt, id:n med hash, och element skrivs bara som sitt namn, p, h1, och body utan prefix. CSS är dessutom case-sensitive: .Header är inte samma sak som .header. Vill du träna selektorer på ett lekfullt sätt tar CSS Diner dig igenom dem en efter en.

Färger på body: en annan känsla

Låt oss testa grundläggande css genom att byta färg på <body>. Eftersom body är bakgrunden till scenen så påverkar den hela sidan.

body {
    background-color: #f4f4f9;
    color: #333333;
}

Här händer det saker. Texten byter färg. Bakgrunden tonas ner. Hela sidans känsla förändras utan att en enda rad HTML ändras.

color styr alltid textfärgen, background-color styr bakgrundsfärgen.

Du kan ange färger på flera sätt:

Namn: red, darkblue, silver. Begränsat stöd. Undvik i professionell kod.
Hex: #ff0000. Standarden i branschen.
RGB/RGBA: rgb(255, 0, 0) eller rgba(255, 0, 0, 0.5). Bra för transparens.
Det finns även ett flertal nya färgformat som HSL, HSLA och CSS-variabler. Vi återkommer till dem senare.

Vanliga fallgropar och varningar

Glömt punkt eller hash? Skriver du .min-klass utan punkt, letar webbläsaren efter en HTML-tag som heter min-klass. Den finns inte. Regeln ignoreras tyst. CSS ger inga felmeddelanden när selektorer missar.
Inline-styling: <p style="color: blue"> fungerar men undviks i nästan alla fall. Det separerar inte struktur från utseende och är svårt att styra globalt. Undantag finns, men de lär du dig om i ett senare moment.
Kontrastkoll: Ljus text på vit bakgrund ser “modernt” och minimalistiskt ut till en början. Men det är ofta svårläst. Testa alltid att texten är läsbar och att det finns tillräcklig kontrast.
Copy paste? Selektorer måste matcha exakt. Mellanrum, bindestreck och versaler spelar roll. Om du har kämpigt med stavning och att skriva, kopiera in selektorerna från HTML-koden. Då minskar du risken för att skriva fel.

Uppgift: Externa filer och klasser

Öppna din övningssida (index.html). Skapa en ny fil som du döper till style.css i samma mapp.

Koppla ihop dem med <link rel="stylesheet" href="style.css"> i <head>.
Skriv en regel för body. Sätt background-color till en ljusgrå nyans och color till en mörkgrå.
Skapa en ny CSS-klass som heter .highlight. Ge den en stark bakgrundsfärg och vit textfärg.
Gå till din HTML och lägg till class=“highlight” på en paragraf eller en lista.
Öppna sidan i webbläsaren. Bekräfta att bara det märkta elementet fick nya färger, medan body-regeln gäller resten.

Vad händer om…

Ta bort punkten framför highlight i CSS-filen så att det står highlight { } utan .. Ladda om sidan. Ser du någon skillnad? Öppna DevTools, högerklicka på elementet och välj Inspektera. Leta upp din regel i Styles-panelen. CSS ger inga felmeddelanden i konsolen för felaktiga selektorer. Det är tyst tills du vet var du ska leta. Lägg tillbaka punkten.

Debug-guide om det inte fungerar

Kontrollera att <link>-taggen har rel="stylesheet" och rätt href-sökväg. Om det verkar stämma, har du sparat din css fil på rätt plats? Är det samma mapp som HTML-filen?
Sökvägar är case-sensitive. Kontrollera att filnamnet matchar exakt (style.css vs Style.css).
Dubbelkolla att du har prick (.) framför klassnamnet i CSS.
Öppna DevTools. Klicka på elementet. Är din CSS-regel överstruken eller grå? Då överskrivs den av en annan regel.

Motivera & reflektera

CSS misslyckas tyst, du får aldrig ett felmeddelande när en selektor missar. Skriv din egen felsökningsrutin i readme.md: nästa gång en CSS-regel inte syns på sidan, vilka tre saker kontrollerar du, i vilken ordning, och varför just den ordningen? Den här listan kommer du att använda på riktigt, skriv den så att du förstår den om en månad.