CSS – presentation & separation
Använd CSS för färg, typografi, avstånd och layout utan att blanda presentation med HTML-strukturen. Genomgången kopplar webbstandarder och utvecklingsmetoder till konkreta webbsidor och mindre projekt.
- Nivå 1
Förstå → Se exempel → Träna
Förstå
Kärnan
CSS beskriver hur HTML-element presenteras. Separation mellan struktur och presentation gör sidan lättare att underhålla och återanvända.
Så arbetar du
Välj selektorer med tydlig räckvidd och bygg regler för typografi, spacing och layout i en konsekvent ordning.
Nyanser och begränsningar
För specifika och komplexa selektorer kan göra stilar svåra att överskrida och underhålla.
I ett webbprojekt
Koppla kunskapen till ett tydligt användarbehov, en definierad struktur och konkreta kvalitetskrav. Bygg i små steg och kontrollera både funktion, standarder, tillgänglighet och dokumentation innan projektet avslutas.
Exempel
Exempel
- En klass för kortkomponenter styr padding, bakgrund och kant medan HTML fortfarande beskriver innehållets struktur.
- Förklara därefter vilket webbtekniskt val som är viktigast för att lösningen ska bli robust, begriplig och ändamålsenlig.
Så gör du
- 1Bestäm innehållets struktur och semantik i HTML.
- 2Separera presentationen i CSS.
- 3Bygg layouten så att den kan anpassas till olika skärmar.
- 4Optimera bilder, media, typografi och teckenkodning.
- 5Kontrollera resultatet i relevanta viewport-storlekar.
Vanliga misstag
Vanligt misstag
Att använda HTML-element enbart efter hur de ser ut.
Bättre
Välj HTML efter semantisk betydelse och använd CSS för presentation.
Struktur och utseende har olika roller.
Vanligt misstag
Att använda onödigt stora mediefiler.
Bättre
Anpassa format, dimensioner och komprimering efter användningen.
Filstorlek påverkar laddningstid.
Fundera
Vilket val skulle vara viktigast att kunna motivera när du arbetar med css – presentation & separation?
Träna
Övning
Beskriv hur du skulle använda kunskapen om css – presentation & separation i ett mindre webbprojekt.
Sammanfattning
- Använd CSS för färg, typografi, avstånd och layout utan att blanda presentation med HTML-strukturen.
- Använd webbstandarder och välj teknik efter dess avsedda roll.
- Testa funktion, tillgänglighet och interoperabilitet systematiskt.
- Dokumentera viktiga tekniska, juridiska och etiska val i projektet.
Relaterade genomgångar
Fortsätt med något som hänger ihop med den här genomgången.
HTML – struktur & semantik
Använd HTML för att beskriva innehållets struktur och betydelse med lämpliga element.
Läs genomgångenResponsiv design – grunder
Anpassa webblayouten till olika skärmstorlekar och tillgängligt utrymme.
Läs genomgångenBilder & media för webben
Välj lämpliga format och dimensioner för bilder och media så att kvalitet, prestanda och användning balanseras.
Läs genomgången