CSS står for Cascading Style Sheets og er et stilark-sprog, der bruges til at beskrive præsentationen af et dokument skrevet i HTML eller XML. CSS spiller en central rolle i webudvikling, da det adskiller indhold fra præsentation, hvilket giver udviklere mulighed for at ændre udseendet af websteder uden at skulle ændre deres grundlæggende struktur.

Hvordan fungerer CSS?

CSS fungerer ved at bruge selektorer til at vælge elementer i et HTML-dokument og derefter anvende stilarter på disse elementer. Selektorer kan være så specifikke eller generelle som nødvendigt, hvilket giver stor kontrol over, hvordan en webside ser ud. For eksempel kan en udvikler bruge en klasse-selektor til at style alle elementer med en bestemt klasseattribut på en bestemt måde.

CSS-filer kan integreres i et HTML-dokument på tre måder:

Inline-stilarter: Her skrives CSS direkte i HTML-elementer ved hjælp af style-attributten. Dette bruges sjældent i dag, da det kan føre til redundans og svær vedligeholdelse.
Intern stil: Her placeres CSS-regler i et style-element i dokumentets <head>-sektion. Denne metode anvendes, når stilarter kun skal gælde for én specifik side.
Ekstern stilark: Dette er den mest populære metode, hvor CSS-koden gemmes i en separat .css-fil. HTML-dokumentet linker til denne fil, hvilket gør det muligt at anvende de samme stilarter på tværs af flere sider og dermed forenkle vedligeholdelsen.

CSS Syntax

CSS består af regler, som er defineret af en selektor og et deklarationsblok. En typisk CSS-regel ser sådan ud:

p {
  color: blue;
  font-size: 16px;
}

I ovenstående eksempel er p selektoren, der målretter alle <p> (afsnit) elementer. Indenfor de krøllede parenteser {} findes deklarationerne, som ændrer farven til blå og skrifttypestørrelsen til 16 pixels.

CSS Box Model

En af de mest fundamentale begreber i CSS er boksen modellen, som styrer, hvordan elementer bliver præsenteret på en webside. Hvert element på en webside betragtes som en rektangulær boks, og CSS-boksmodellen består af fire komponenter:

Indholdsboks (Content): Indeholder det egentlige indhold, såsom tekst eller billeder.
Polstring (Padding): Pladsen mellem indholdet og grænsen (border).
Grænse (Border): En kant, der omgiver polstringen (og indholdet).
Margin: Pladsen uden for grænsen, som adskiller elementet fra andre elementer.

CSS Fleksibilitet og Responsiv Design

CSS giver udviklere mulighed for at skabe responsive design, hvilket betyder, at et websteds layout og design kan tilpasse sig forskellige skærmstørrelser og enheder. Med introduktionen af CSS3 er der kommet mange nye funktioner, såsom medieforespørgsler, som gør det muligt at anvende forskellige stilarter afhængigt af skærmstørrelsen, retningen (landskab eller portræt), opløsningen og meget mere.

Medieforespørgsler kan se sådan ud:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

I dette eksempel vil baggrundsfarven på siden ændre sig til lyseblå, hvis skærmbredden er 600 pixels eller mindre, hvilket gør siden mere mobilvenlig.

CSS Frameworks

For at lette udviklingsprocessen bruger mange webudviklere CSS-rammeværker såsom Bootstrap, Foundation eller Bulma. Disse frameworks indeholder foruddefinerede CSS-klasser og komponenter, som kan anvendes til hurtigt at bygge responsive og stilfulde websteder uden at skulle skrive alt CSS fra bunden.

Fremtidige udviklinger indenfor CSS

CSS fortsætter med at udvikle sig, og nye funktioner og specifikationer bliver løbende introduceret. For eksempel har CSS Grid og Flexbox revolutioneret måden, hvorpå udviklere bygger layout-strukturer på websider. CSS Grid gør det muligt at skabe komplekse layoutstrukturer på to dimensioner (rækker og kolonner) med minimal kode, mens Flexbox fokuserer på at arrangere elementer i en enkelt dimension (række eller kolonne).

Desuden arbejder CSS-udviklerne konstant på at introducere nye funktioner, såsom CSS Variables (Custom Properties), som gør det muligt at genbruge værdier på tværs af et stilark, hvilket gør det nemmere at vedligeholde.

Hvad er CSS?