Devenia Lär dig / Ordlista

Förstå styling med CSS

CSS styr hur HTML-innehåll ser ut: typografi, färger, avstånd, layout och responsivt beteende. Använd den här guiden för att förstå vad styling kan ändra och vad det inte kan lösa.

Fråga om CSS

Börja med ett mejl. Skicka sidan eller din fråga, så svarar vi tydligt.

Responsiv webbsida med vägledning för typografi, avstånd, rutnät, färg och mobildesign

Använd CSS som presentationslager.

På en kafémeny identifierar HTML rubriken, rätterna och priserna. CSS bestämmer typsnitt, avstånd och justering. På en bred skärm kan CSS placera två menyspalter bredvid varandra och stapla dem på en telefon, medan rätterna och priserna är desamma.

Samma sidinnehåll i en enkel och en stylad layout, med ett separat genomskinligt stylinglager.

Det här kan styling ändra

Ge rubriker en tydlig storlek och vikt
Ange varumärkesfärger för knappar och länkar
Skapa spalter, rutnät, avstånd och justering
Gör layouter responsiva på telefoner och surfplattor
Förbättra läsbarheten med radhöjd, avstånd och kontrast

En större rubrik kan inte ersätta en öppettid som saknas eller förklara ett otydligt erbjudande. Formulera orden först och använd sedan styling för att göra dem lätta att hitta. Se MDN:s introduktion till CSS.

Varför en stil skriver över en annan

Flera regler kan gälla för samma element. Kaskaden avgör vilket värde webbläsaren använder när reglerna krockar. Till exempel kan både en länkfärg för hela webbplatsen och en separat färg för navigeringslänkar gälla för en menylänk.

Om en färgändring inte syns, inspektera elementet i webbläsarens utvecklarverktyg. På panelen Styles visas matchande regler och överstrukna deklarationer. Kontrollera vilken regel som vinner innan du lägger till ännu en överskrivning.

Kontrollera att besökare kan använda sidan

Testa sidan med verkligt innehåll efter en stylingändring. Långa rubriker, menyer och priser kan visa problem som kort platshållartext döljer.

Läs den längsta rubriken på en telefon. Den ska radbrytas utan att dölja text eller tvinga fram sidscrollning.
Zooma sidan och kontrollera att texten fortfarande är läsbar och att knappar inte täcker den.
Använd tangentbordet för att gå igenom länkar och knappar. Det fokuserade elementet ska vara synligt.

Bra styling hjälper besökare att läsa och agera. Den garanterar inte bättre sökplaceringar. Googles vägledning om sidupplevelse visar att en bra upplevelse i sig inte garanterar en topplacering.

CSS: vanliga frågor

Tillbaka till ordlistan.

Vad står CSS för?

CSS står för Cascading Style Sheets. Det styr hur HTML-element ser ut: typografi, färger, avstånd och layout.

Vad är skillnaden mellan HTML och CSS?

HTML ger struktur och betydelse, till exempel rubriker, stycken och listor. CSS ger presentationen: hur elementen ser ut.

Behöver jag lära mig CSS för att bygga en webbplats?

Nej. Ett tema eller en visuell redigerare kan ge kontroller för färg, typografi och layout. Använd dem först så att relaterade sidor förblir enhetliga. Lär dig CSS när du behöver förstå eller ändra en presentationsregel som de tillgängliga kontrollerna inte täcker.

Vad är responsiv design?

Responsiv design innebär att en webbplats anpassar sig till olika skärmstorlekar. CSS ändrar layout och avstånd för telefoner, surfplattor och datorer.

Påverkar CSS SEO?

CSS kan påverka hur en sida visas och laddas, men färg- eller avståndsändringar förbättrar inte rankningen i sig. Se till att användbart innehåll är tillgängligt och kontrollera mobil layout och laddningsbeteende när du ändrar stilar.

Har du en praktisk fråga om CSS?

Skicka sidans adress, elementet som ser fel ut och skärmstorleken där du ser problemet. Skriv också vad du förväntade dig att se, så kan vi identifiera vilken stylingändring som behövs.

Skicka e-post till [email protected]