Hopp til innhald
Fagartikkel

CSS-veljarar

I CSS lagar vi reglar for utsjånad som gjeld fontar, fargar, oppsett og stilar brukt på nettsider. Kvar CSS-regel blir identifisert med ein CSS-veljar, som vi referer til i HTML-koden når vi ønsker å bruke ein spesifikk regel.
Berbar datamaskin, notisblokk og penn ligg på eit bord. På skjermen kan ein skimte CSS-kode. Foto.
Bilete: Goumbik / CC0

Eit døme på ein CSS-veljar kan du sjå på den første linja i koden under.

css
1h1{
2  font-family: Arial, sans-serif;
3  color: red;
4}

Denne kodesnutten blir kalla ein CSS-regel, og det som står til venstre for teiknet {, er CSS-veljaren, altså i dette tilfellet h1. CSS-veljaren angir kva element på nettsida denne CSS-regelen skal verke på. I dette dømet vil alle overskrifter merkte med taggen <h1> få skrifttypen Arial og raud skriftfarge.

CSS-veljarar

Det finst tre hovudtypar CSS-veljarar: type, class og id. Dømet over er ein typeveljar. Typeveljarar vel element basert på HTML-taggen. Under ser du døme på CSS-reglar med typeveljarar.

css
1body{
2  font-family: Arial, Helvetica, sans-serif;
3  background-color: black;
4}
5
6header{
7  background-color: black;
8  color: white;
9  font-family: Arial black;
10  font-size: 40px;
11  text-align: center;
12  height: 90vh;
13}
14
15main{
16  width: 75%;
17  margin: auto;
18  background-color: white;
19}

body, header og main angir CSS-reglar for element i HTML-dokumentet med taggane <body>, <header> og <main>.

Typeveljarar, id-veljarar og class-veljarar gir større variasjon

Nettsidedesign på ei datamaskin i vinkla perspektiv. Ulike gjenstandar rundt datamaskina, mellom anna eit fotoapparat, ei klokke, ei snakkeboble, ei lyspære, ein blyant. Grafisk illustrasjon.
Bilete: Sentavio / CC BY-NC-SA 4.0

Om vi berre skulle bruke typeveljarar, ville det avgrense veldig kva vi kunne gjere med utsjånaden på nettsida, for alle element av same type vil bli heilt like. Men av og til vil vi at element av same type skal sjå ulike ut og plasserast ulikt på nettsida. Då treng vi å kunne skilje ut enkelte element på andre måtar enn berre ved namnet på HTML-taggen. Det kan vi gjere med class- og id-veljarar.

Class og id er attributt til HTML-taggar og blir derfor angitt inne i ein HTML-tag, til dømes slik:

<p id=”ingress”> eller <img class=”miniatyrbilete” src=”bilete.jpg”>

Class og id

Forskjellen på class og id er at same class kan brukast på fleire element på same nettside, men ein id kan berre brukast ein gong. Id blir derfor brukt på element som berre skal opptre ein gong på nettsida, som til dømes hovudmeny, banner eller botntekst, mens class blir brukt på element som blir gjentekne, som bilete, knappar, lenker eller lister.

Class-veljarar blir angitt i CSS med eit punktum framfor namnet på klassen, slik:

css
1.miniatyrbilete{
2  width: 50px;
3  height: 50px;
4}

Id-veljarar blir angitt i CSS med firkant-teikn framfor namnet på klassen, slik:

css
1#ingress{
2  font-size: 20px;
3  font-style: italic;
4}
5

Interne lenker med id

Skisse for web-design. Foto.
Bilete: Aleksandar Urošević / CC BY 4.0

Eit anna bruksområde for id-attributtet er interne lenker i eit dokument. Med interne lenker kan du lenke til spesifikke delar på nettsida. Dette blir brukt mykje i moderne web-design, der det er vanleg at heile nettstaden er spreidd utover eitt langt HTML-dokument. Interne lenker bruker id-en til eit element til å få nettlesaren til å automatisk skrolle til det elementet. Dette kan vi samanlikne med innhaldslista i eit Word- eller PDF-dokument.

Døme

<a href=”#about”>Om oss</a>

Denne lenka vil gjere at nettlesaren automatisk skrollar til elementet med id=”about”, til dømes <div id=”about”>.

<div>-elementet

<div> er eit element som blir brukt mykje i samband med id- og klasseveljarar. <div>-taggen gjer i utgangspunktet ingenting med innhaldet, men blir brukt for å gruppere innhald eller til å hekte class eller id på innhaldet, slik at ein enkelt kan legge CSS-kode eller annan kode til elementet. Du kan legge kva innhald som helst i eit <div>-element. På grunn av dette er <div> ein av dei mest brukte HTML-taggane, og han blir ofte brukt i staden for andre taggar som er meir spesifikke, som til dømes <ul>, <p> eller <table>.

Døme

HTML
1<div class=”miniatyrbilete”>
2  <img src=”bilete.png”>
3  <div class=”bilettekst”>Eit bilete</div>
4</div>

I dømet blir den første <div>-en brukt til å gruppere eit bilete og ein bilettekst, og den andre <div>-en blir brukt til å formatere biletteksten med class-veljar i CSS.

<span>

Ein annan tag som liknar på <div>, er <span>. Forskjellen er at <span> er såkalla inline, som betyr at han kan brukast til å markere enkeltord eller delar av ei linje utan at tekstflyten blir påverka. <div> vil automatisk lage linjeskift før og etter elementet.