CSS
Cascading Style Sheets (CSS) er et computersprog, der bruges til at bestemme udseendet og præsentationen af indholdet i et HTML/XHTML/XML-dokument. Det vil sige, at CSS styrer, hvordan tekster, billeder og andre elementer på en hjemmeside skal se ud og placeres. CSS er en vigtig del af webdesign og -udvikling, da det gør det nemmere at skabe flotte og funktionelle hjemmesider.
For at forstå CSS bedre, er det vigtigt at kende til HTML (Hypertext Markup Language). HTML er det grundlæggende sprog, der bruges til at opbygge strukturen og indholdet af en hjemmeside. Det indeholder tags og elementer, der definerer forskellige dele af en hjemmeside, såsom overskrifter, afsnit, lister og billeder. Men HTML alene giver ikke mulighed for at kontrollere præsentationen og udseendet af hjemmesiden.
Her kommer CSS ind i billedet. CSS fungerer som en slags instruktionsmanual for, hvordan hjemmesidens elementer skal se ud og præsenteres. Det gør det muligt at ændre farver, skrifttyper, størrelser, baggrunde, afstande og meget mere. CSS er altså en måde at adskille indholdet (HTML) fra præsentationen (CSS) på en hjemmeside.
Der er to hovedmåder at bruge CSS i forbindelse med HTML:
1. Indlejret CSS: CSS-koden kan skrives direkte i HTML-dokumentet ved hjælp af et "style"-element. Dette gøres normalt i "head"-delen af HTML-dokumentet og kan se sådan ud:
```html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Dette er en overskrift</h1>
</body>
</html>
```
I dette eksempel vil overskriften (h1-elementet) blive vist med blå skrift og en skriftstørrelse på 24 pixels.
2. Ekstern CSS: I stedet for at skrive CSS-koden direkte i HTML-dokumentet, kan man også oprette en separat fil med filtypen ".css" og referere til den i HTML-dokumentet ved hjælp af et "link"-element. Dette gør det nemmere at vedligeholde og opdatere stilarter for flere HTML-dokumenter, da man kun skal ændre ét sted, nemlig i CSS-filen. Et eksempel på dette kunne se sådan ud:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Dette er en overskrift</h1>
</body>
</html>
```
I dette eksempel refererer "link"-elementet til en ekstern CSS-fil kaldet "styles.css", hvor stilarterne for hjemmesiden er defineret.
CSS fungerer ved at anvende stilarter på HTML-elementer baseret på "selektorer". Selektorer kan være elementnavne (f.eks. "h1", "p", "img"), klasser (f.eks. ".menu", ".footer") eller id'er (f.eks. "#header", "#logo"). Når en selektor er defineret, kan man angive forskellige stilarter for den pågældende selektor ved hjælp af egenskaber og værdier. Et eksempel på dette kunne være:
```css
h1 {
color: red;
font-family: Arial, sans-serif;
font-size: 32px;
}
```
I dette eksempel vil alle h1-elementer på hjemmesiden have en rød skriftfarve, en skrifttype fra Arial-familien og en skriftstørrelse på 32 pixels.
CSS er altså et kraftfuldt værktøj, der gør det muligt at kontrollere og tilpasse præsentationen af hjemmesider på en effektiv og fleksibel måde. Det er en essentiel del af moderne webdesign og -udvikling og en vigtig kompetence for alle, der arbejder med hjemmesider og webapplikationer.
Vil du tilføje et nyt begreb?