Devenia Lær / Ordliste

Forstå styling med CSS

CSS styrer hvordan HTML-innhold ser ut: typografi, farger, avstand, layout og responsiv oppførsel. Bruk denne guiden for å forstå hva styling kan endre, og hva CSS ikke kan løse.

Spør om CSS

Start med en e-post. Send siden eller spørsmålet ditt, så svarer vi klart.

Responsiv nettside med veiledning for typografi, avstand, rutenett, farger og mobildesign

Bruk CSS som presentasjonslaget.

På en kafémeny beskriver HTML overskriften, rettene og prisene. CSS bestemmer skrifttype, avstand og plassering. På en bred skjerm kan CSS legge to menyspalter ved siden av hverandre og stable dem på en telefon, mens rettene og prisene er de samme.

Det samme sideinnholdet i en enkel og en stylet layout, med et separat gjennomsiktig stylinglag.

Dette kan styling endre

Gi overskrifter tydelig størrelse og vekt
Sett merkevarefarger på knapper og lenker
Opprett spalter, rutenett, avstander og justering
Tilpass layouten til telefoner og nettbrett
Gjør teksten lettere å lese med linjehøyde, avstand og kontrast

En større overskrift kan ikke fylle inn en manglende åpningstid eller forklare et uklart tilbud. Rett ordene først, og bruk deretter styling for å gjøre dem lette å finne. Se MDNs introduksjon til CSS.

Hvorfor én stil overstyrer en annen

Flere regler kan gjelde for det samme elementet. Kaskaden avgjør hvilken verdi nettleseren bruker når reglene kolliderer. For eksempel kan både en lenkefarge for hele nettstedet og en egen farge for navigasjonslenker gjelde for en menylink.

Hvis en fargeendring ikke synes, kan du inspisere elementet i nettleserens utviklerverktøy. Stilpanelet viser reglene som passer, og deklarasjoner som er strøket over. Sjekk hvilken regel som vinner før du legger til en ny overstyring.

Sjekk om folk kan bruke siden

Etter en stylingendring bør du teste siden med ekte innhold. Lange overskrifter, menyer og priser kan avdekke problemer som kort plassholdertekst skjuler.

Les den lengste overskriften på en telefon. Den skal brytes uten å skjule tekst eller tvinge frem vannrett rulling.
Zoom inn på siden og sjekk at teksten fortsatt er lesbar, og at knapper ikke dekker den.
Bruk tastaturet til å gå gjennom lenker og knapper. Det fokuserte elementet skal være synlig.

God styling gjør det lettere for besøkende å lese og bruke siden. Den garanterer ikke bedre plasseringer i søk. Googles veiledning om sideopplevelse viser at en god opplevelse alene ikke garanterer en topplassering.

CSS: vanlige spørsmål

Tilbake til ordlisten.

Hva står CSS for?

CSS står for Cascading Style Sheets. Det styrer hvordan HTML-elementer ser ut: typografi, farger, avstand og layout.

Hva er forskjellen på HTML og CSS?

HTML gir struktur og mening, for eksempel overskrifter, avsnitt og lister. CSS gir presentasjon: hvordan disse elementene ser ut.

Må jeg lære CSS for å bygge et nettsted?

Nei. Et tema eller en visuell editor kan gi deg kontroller for farge, typografi og layout. Bruk disse kontrollene først, slik at relaterte sider holder seg konsekvente. Lær CSS når du trenger å forstå eller endre en presentasjonsregel som de tilgjengelige kontrollene ikke dekker.

Hva er responsivt design?

Responsivt design betyr at et nettsted tilpasser seg ulike skjermstørrelser. CSS endrer layout og avstand for telefoner, nettbrett og datamaskiner.

Påvirker CSS SEO?

CSS kan påvirke hvordan en side vises og lastes, men å endre farger eller avstand forbedrer ikke rangeringen i seg selv. Sørg for at nyttig innhold er tilgjengelig, og sjekk mobil layout og lasteoppførsel når du endrer stiler.

Har du et praktisk spørsmål om CSS?

Send sidens adresse, elementet som ser feil ut, og skjermstørrelsen der du ser feilen. Skriv også hva du forventet å se, så kan vi finne ut hvilken stylingendring som trengs.

Send e-post til [email protected]