Gå til innhold

Introduksjon til CSS

CSS (Cascading Style Sheets) bestemmer hvordan nettsiden ser ut. Mens HTML sier hva innholdet er, sier CSS hvordan det skal vises – farger, størrelser, avstander og mer.

CSS-syntaks

CSS bruker krøllparenteser {} rundt egenskapene, og hver egenskap avsluttes med semikolon ;.

/* This is a comment */
h1 {
    color: blue;
}

p {
    font-size: 18px;
}

Mønster

selector { property: value; }

Viktige CSS-egenskaper

Egenskap Forklaring
color Tekstfarge
background-color Bakgrunnsfarge
font-size Tekststørrelse
font-family Skrifttype
font-weight Tykkelse (normal, bold)
text-align Justering (left, center, right)
width Bredde
height Høyde
margin Avstand utenfor elementet
padding Avstand inni elementet
border Ramme rundt elementet

Enheter

Enhet Beskrivelse
px Piksler (fast størrelse)
% Prosent av forelder
em Relativt til font-størrelse
rem Relativt til rot font-størrelse
vh Prosent av viewport høyde
vw Prosent av viewport bredde

Kom i gang

  1. Lag en CSS-fil (f.eks. style.css)
  2. Koble den til HTML med <link>
  3. Skriv selektorer og egenskaper
  4. Oppdater nettleseren for å se endringer
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
body {
    background-color: lightblue;
}

h1 {
    color: navy;
    text-align: center;
}

p {
    font-size: 18px;
    margin: 20px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html lang="no">
<head>
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome</h1>
    <p>This is my styled website!</p>
</body>
</html>

Referanse

Se CSS-referansen for en komplett oversikt over alle CSS-egenskaper.

Videre lesning