Farger

CSS gir deg 16.777.216 farger til rådighet. De kan ta form av et navn, en RGB-verdi (rød/grønn/blå), eller en heksadesimal-kode (hex).

De følgende verdiene, vil alle produsere det samme resultatet – den rødeste røde som du noengang har sett rød:

• red
• rgb(255,0,0)
• rgb(100%, 0%, 0%)
• #ff0000
• #f00

Forhåndsdefinerte fargenavn inkluderer aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white og yellow. transparent er også en gyldig verdi.

Med unntak av black og white har fargenavn begrenset bruksverdi når man lager websider, ettersom de er såpass spesifikke farger, som neppe reflekterer det noen har laget i et design.

De tre verdiene i RGB er verdier mellom 0 og 255, hvor 0 er den laveste verdien (ingen rødfarge, for eksempel) og 255 er den høyeste (full rødfarge, for eksempel). Disse verdiene kan også settes med prosent.

Heksadesimaler er et sekstentallssystem, som går fra 0 til f. 0 til 9 er som vanlig, men tallene 10 til 16 er bokstavene a til f.

Heksadesimale verdier i CSS blir prefikset med en hash. To og to siffer representerer henholdsvis rød, grønn og blå (rgb). Så hvis vi har #0000ff, så vil det gi full blåfarge. Vi kan også skrive det på en kortform med bare tre siffer, og da teller ett siffer for to siffer: #00f vil da være samme som over. Du blir vant til å lese disse jo mer du jobber med det.

Farge og bakgrunnsfarge

Farge og bakgrunnsfarge

Farger kan settes ved å bruke color og background-color (merk: amerikansk skrivemåte color, ikke engelsk colour)

En blå bakgrunn med gul tekst kan settes slik

h1 {
  color: yellow;
  background-color: blue;
}

Disse fargene kan hende blir litt vel skarpe, så du kan bytte de med dette:

body {
  font-size: 14px;
  color: navy;
}

h1 {
  color: #ffc;
  background-color: #009;
}

Lagre css-fila, og last inn nettleseren på nytt. Du skal da se at den første tittelen (h1-elementet) har blitt blått og gult.

Du kan sette color og background-color på de fleste HTML-elementer, inkludert body, som vil skifte fargene på hele siden, og alt inni.