Synonymer: Stylesheet
CSS står for “Cascading Style Sheets,” som på dansk kan oversættes til “kaskaderende typografiark.” Det er et sprog, der bruges til at beskrive udseendet og formateringen af et dokument skrevet i HTML eller XML. CSS styrer layoutet af websider, herunder design, farver, skrifttyper og placering af elementer, hvilket gør det muligt at adskille indhold fra præsentation.
Hvordan fungerer CSS?
CSS fungerer ved at anvende stilregler til HTML-elementer. Disse regler kan defineres i eksterne stylesheets, interne stylesheets eller inline. Her er en grundlæggende oversigt over, hvordan CSS fungerer:
- Selektorer: CSS bruger selektorer til at målrette specifikke HTML-elementer. For eksempel vil selektoren
pmålrette alle<p>(paragraf) elementer. - Egenskaber og værdier: Hver stilregel består af en egenskab og en værdi. For eksempel vil reglen
color: red;sætte tekstfarven til rød. - Kaskadering: Hvis flere regler gælder for samme element, bestemmer kaskaderingsreglerne, hvilken stil der skal anvendes baseret på specifikke kriterier som specifitet og vigtighed.
Eksempel på CSS
Her er et simpelt eksempel på, hvordan CSS kan bruges til at style en HTML-side:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Velkommen til min hjemmeside</h1>
<p>Dette er en simpel CSS-stylet side.</p>
</body>
</html>
CSS (style.css):
h1 {
color: blue;
font-family: Arial, sans-serif;
text-align: center;
}
p {
color: green;
font-size: 14px;
}
Fordele ved at bruge CSS
CSS tilbyder mange fordele, herunder:
- Adskillelse af indhold og stil: Ved at adskille HTML (indhold) fra CSS (præsentation) bliver webdesign mere organiseret og lettere at vedligeholde.
- Genbrugbarhed: Stilregler kan genbruges på tværs af flere sider, hvilket sparer tid og reducerer redundans.
- Forbedret kontrol: CSS giver fin kontrol over layout og design, hvilket gør det muligt at skabe komplekse og sofistikerede webdesigns.
- Responsivt design: CSS gør det muligt at lave design, der tilpasser sig forskellige skærmstørrelser og enheder, hvilket forbedrer brugeroplevelsen.
Anvendelsesområder
CSS bruges bredt i webudvikling for at style og designe websider. Her er nogle almindelige anvendelsesområder:
- Layout: Bestemmer placeringen af elementer på en side, herunder grids, flexbox og positionering.
- Typografi: Angiver skrifttyper, skriftstørrelser, farver og tekstjustering.
- Farver og baggrunde: Angiver baggrundsfarver, billeder og andre visuelle effekter.
- Animationer og overgange: Tilføjer dynamiske effekter og animationer til webindhold.
CSS er en grundlæggende teknologi i webudvikling, der gør det muligt at skabe attraktive, brugervenlige og responsivt designede websider.