Tekst og utseende
Lær typografi, bakgrunnsbilder, skygger, pseudo-elements, CSS-variabler og overganger i CSS. Gratis videoer og praktiske eksempler steg for steg.
Artikler
Lær å endre skrifttype med font-family i CSS. Web-safe fonter, Google Fonts og font stacks forklart med gratis video.
Lær å sette tekststørrelse med font-size i CSS. Forskjellen mellom px, rem og em forklart med gratis video og eksempler.
Lær å style tekst med text-decoration og text-transform i CSS. Understreking, gjennomstreking, store bokstaver og mer.
Lær å legge til bakgrunnsbilder i CSS. Background-size, position, repeat og cover forklart med gratis video og eksempler.
Lær å legge til skygger på elementer med box-shadow i CSS. Offset, blur, spread og farge forklart med gratis video.
Lær å bruke ::before og ::after i CSS for å legge til innhold uten ekstra HTML. Gratis video med praktiske eksempler.
Lær å bruke CSS-variabler for gjenbrukbare verdier. Custom properties, var-funksjonen og theming forklart med gratis video.
Lær å animere CSS-endringer med transition. Duration, property, timing-function og delay forklart med gratis video.
Sist oppdatert
Har du noen gang åpnet en nettside og kjent at den ser «riktig» ut, uten helt å vite hvorfor? Ofte handler det om små valg i CSS som styrer tekst, farger, skygger og bevegelser, og sammen gir de siden personlighet. Her får du oversikten over verktøyene som former både uttrykket og lesbarheten på en side.
Tekst som er lett å lese
Typografi er en stor del av førsteinntrykket. Med font-family i CSS forklart velger du hvilke skrifttyper som skal brukes, mens font-size i CSS forklart hjelper deg å styre størrelse og hierarki i teksten.
Når du vil fremheve overskrifter, lenker eller ord i brødteksten, er text-decoration og text-transform i CSS nyttige verktøy. De påvirker både hvordan teksten ser ut og hvordan den oppleves for leseren.
Bakgrunner og dybde i designet
Utseendet på en side handler ikke bare om tekst. Med background-image i CSS forklart kan du legge inn bilder som bakgrunn og bygge stemning, mens box-shadow i CSS forklart gir elementer mer dybde og tydeligere skille fra resten av innholdet.
Slike detaljer gjør det enklere å styre hva som skal trekke oppmerksomhet, og hva som skal ligge mer i bakgrunnen.
Smartere styling med gjenbruk
Når du begynner å jobbe mer med større prosjekter, blir det nyttig å tenke på struktur i CSS. CSS-variabler (custom properties) forklart gjør det enklere å holde farger, størrelser og andre verdier samlet, slik at du kan endre uttrykket på flere steder samtidig.
Vil du også gjøre designet mer levende, kan CSS transition forklart hjelpe deg med å lage myke overganger når noe endrer seg på siden.
Når små detaljer gjør stor forskjell
Det er ofte kombinasjonen av tekst, bakgrunner, skygger og bevegelser som avgjør om en side føles enkel, ryddig og profesjonell. Pseudo-elementer er også nyttige når du vil legge til små visuelle detaljer uten å endre HTML-strukturen, og du kan lese mer i pseudo-elements i CSS forklart.
Når du utforsker disse temaene videre, får du bedre kontroll over både uttrykk og lesbarhet. Det gjør det lettere å bygge nettsider som ser gjennomtenkte ut, og som er gode å bruke.
Lær med nettkurs
Få tilgang til alt
Ubegrenset kurstilgang. Fra 599,-/mnd.