Eksempel på bruk av CSS

Har du noen gang sett en nettside som ser ut som et ustrukturert Word-dokument med tekst og bilder hulter til bulter? Vel, det er nettopp dette CSS (Cascading Style Sheets) hjelper oss med å unngå. Jeg er ingen ekspert på CSS, men jeg vet nok til å forklare det på en enkel måte og gjøre lette justeringer selv. Hvis du også vil forstå hva CSS er og hvordan det brukes, er denne artikkelen for deg.

CSS er en teknologi som brukes til å styre hvordan HTML-elementer (innholdet på en nettside) skal se ut. Hvis HTML er skjelettet til en nettside, kan du se på CSS som klærne, smykkene og frisyren – alt som gjør nettsiden din stilig, attraktiv og funksjonell.

Grunnleggende funksjoner i CSS

  • Design og layout
    CSS lar deg kontrollere ting som farger, skrifttyper, marger, mellomrom og oppsett på en nettside. Vil du ha en blå knapp med avrundede kanter? Eller slå av og på emnelisten i artikkelen? Ingen problem. CSS fikser det. Her er et eksempel:
  • Responsivt design
    CSS kan også tilpasses ulike skjermstørrelser, slik at nettsiden din ser bra ut både på mobil og stasjonær PC.
  • Gjenbruk og struktur
    CSS gjør det enkelt å holde stilreglene konsistente på tvers av en nettside. I stedet for å endre hver eneste knapp manuelt, kan du opprette en CSS-klasse som brukes overalt.

Hvordan fungerer CSS?

CSS fungerer ved at du lager regler som beskriver hvordan spesifikke elementer på en nettside skal se ut. Reglene består av:

  • Selektorer: Disse spesifiserer hvilke elementer regelen gjelder for. Eksempel: h1 for overskrifter, eller .knapp for en CSS-klasse.
  • Egenskaper og verdier: Dette er instruksjonene som sier hva du vil gjøre. Eksempel på CSS som gjør overskriften blå og setter størrelse på skriften:
h1 {
    color: blue;
    font-size: 24px;
}

CSS i praksis

Når du bruker CSS, kan du definere stilene direkte i HTML, men det anbefales å bruke eksterne CSS-filer for å holde ting ryddig. Eksempel på bruk i HTML:

<link rel="stylesheet" href="styles.css">

I CSS-filen kan du for eksempel skrive:

.has-foreground-background-color {
    background-color: #4e4b66;
    color: white;
}

Hvorfor bør du lære CSS?

  • Visuell kontroll: Du får full kontroll over hvordan nettsiden din ser ut.
  • Kreative muligheter: Med CSS kan du designe alt fra en minimalistisk blogg til en fargerik e-handelsplattform.
  • Enklere vedlikehold: Gjør en endring ett sted, og se det oppdatert overalt.

Klar til å prøve?

Nå som du vet hva CSS er, skal vi se hvordan du kan bruke det i praksis. Prøv deg frem med eksemplet under og oppdag hvor kraftfullt (og gøy!) CSS kan være.

Rediger CSS og kontroller designelementer

Skriv inn CSS i feltet nedenfor for å endre stilen til elementer på nettsiden. Du kan også bruke knappen nedenfor for å slå av eller på spesifikke designelementer.

Denne CSS-koden fjerner emnelisten nedenfor:

    .wp-block-categories-list {
        display: none;
    }

Kopier og lim inn denne for å endre fargen på topp-banneren:

    .has-foreground-background-color {
        background-color: #4e4b66 !important;
    }

Kopier og lim inn denne for å fjerne bildet på toppen av artikkelen: 

    .wp-block-post-featured-image {
        display: none;
    } 
        

Alle designelementer er synlige

Dette er en eksempelboks.
Prøv å endre stilen dens med CSS.