Cascading Style Sheets
En css fil inneholder regler for hvordan elementer på en html side skal presenteres.
Under HTML kapitelet laga vi en side som så slik ut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="eksemple.js"></script>
<link rel="stylesheet" href="eksempel.css">
<title>Min side</title>
</head>
<body>
<h1>Hei - dette er sida mi </h1>
Litt tekst (skriv det du ønsker)
<br> Mer tekst på flere linjer - vises som en linje.
<p> Du kan bruke p for paragraf eller br for break for å få til avsnitt/linjeskift
</p>
Du kan også legge inn
<hr> for å få en linje som deler sida
</body>
</html>
Legg merke til <link rel="stylesheet" href="eksempel.css">
Dette sier at html sida skal laste ned og ta i bruk eksempel.css. Denne filen har vi ikke laga ennå - så plasser markøren over
eksempel.css (du vil se Cmd+Click to follow link) og Ctrl/Cmd + click på filnavnet. (Ctrl windows, Cmd mac)
Nå vil VSCode varsle om at filen ikke finnes, velg at du vil lage den nå.
Skriv inn følgende regler i filen
h1 {
color: blue;
}
body {
background-color: teal;
}
Her har vi laga to regler: h1 { color:blue; } sier at alle <h1> tags skal vises med blå skrift.
body { background-color: teal; } sier at alle elementer inne i <body> skal ha bakgrunnsfargen teal.