Forudsætninger

• Ultimate HTML

Velkommen til webdesignens verden

CSS (Cascading Style Sheets) forvandler almindelig HTML til visuelt tiltalende og brugervenlige websider. Det styrer farver, layout, afstand og den overordnede præsentation—det bringer kort sagt dine designs til live.

Hvad er CSS?

CSS, en forkortelse for Cascading Style Sheets, er et stilark-sprog, der bruges til at definere præsentationen af dokumenter i HTML (Hypertext Markup Language). Men hvad betyder det egentlig?

Forestil dig HTML som fundamentet i et hus – det giver den grundlæggende struktur og layout til din webside. Tænk nu på CSS som husets indretningsarkitekt. Det er ansvarligt for at tilføje stil, farver og æstetik til strukturen, hvilket gør den indbydende og visuelt tiltalende.

Se denne illustration:

Venstre side af illustrationen viser almindelig HTML. Højre side viser, hvordan CSS kan forvandle det samme indhold med stil og farve.

Forståelse af CSS-syntaks

CSS kan i starten virke som et fremmed sprog, men følger en enkel syntaks. En CSS-regel består af en selektor og et deklarationsblok. Selektoren angiver, hvilket HTML-element(er) reglen gælder for, mens deklarationsblokken indeholder en eller flere egenskab-værdi-par, der definerer udseendet.

Lad os gennemgå det med et eksempel:

p {
  color: purple;
  background-color: green;
}

• p er selektoren, hvilket angiver, at denne regel gælder for alle <p>-elementer;
• color: purple; angiver, at tekstfarven skal være lilla;
• background-color: green; angiver, at baggrundsfarven skal være grøn.

Vi vil gå mere i dybden med selektorer, egenskaber og værdier i senere kapitler, men for nu skal du huske, at CSS gør det muligt at vælge elementer og anvende stilarter inden for de krøllede parenteser {}.

Hvad er det næste?

Kommende kapitler vil udforske selektorer, egenskaber, værdier og praktiske stylingteknikker. Når du er færdig, vil du kunne omdanne grundlæggende HTML til rene, attraktive designs.