For å bruke stiler effektivt, må du forstå CSS-selektorer, som avgjør hvilke HTML-elementer som skal styles. La oss se nærmere på hovedtypene av selektorer.

Taggselektor

En måte å bruke stiler på er ved å benytte selve elementtaggen. Stiler angitt med en taggselektor vil påvirke alle elementer med den taggen. Dette er nyttig for å gi enhetlig stil til elementer på tvers av nettstedet.

Syntaks: I HTML har vi et p-element:

<p>It was all in my head.</p>

For å bruke stiler i CSS-filen, bruk taggnavnet (p) som selektor:

p {
  property: value;
}

Kjør følgende eksempel og se hvordan det fungerer.

Klassevelger

En mer presis metode for å style elementer er ved å bruke klassevelgere. Disse velgerne retter seg mot elementer med spesifikke klassenavn, noe som gir mulighet for selektiv styling.

Syntaks: I HTML legger du til et class-attributt med et beskrivende klassenavn:

<p class="text">This song is another hit.</p>

I CSS refererer du til klassenavnet med et punktum (.) for å definere stilene:

.text {
  property: value;
}

Kjør følgende eksempel og observer at kun elementer med text-klassen får disse stilene, noe som gir deg mer presis kontroll over utseendet.

Alle elementer med attributtet class="text" styles med rød tekst, skriftstørrelse på 24px og hvete-farget bakgrunn. Klassenavnet text er definert i index.css ved bruk av et .-prefiks.

Klassekomposisjon

Vi kan også kombinere flere klasser på ett enkelt element, noe som gjør klassekomposisjon til et kraftig verktøy for å tildele stiler – adskil klassenavn med mellomrom i class-attributtet.

Syntaks: I HTML legger du til flere klassenavn på et element:

<p class="text font">A robot created chemicals.</p>

I CSS definerer du stiler for hver klasse separat:

.text {
  property: value;
}

.font {
  property: value;
}

La oss kjøre følgende eksempel og se hvordan det fungerer. Elementer med både text og font-klassene vil motta de angitte stilene.

<p>-elementet med både text og font-klassene får stiler fra begge selektorene. Klassen text setter fargen til navy, og klassen font setter skriftstørrelsen til 24px.

Id-velger

Selv om det er mulig å bruke id-velgeren for styling, anbefales det vanligvis ikke. Id-er skal være unike på en side, noe som begrenser gjenbruk.

Syntaks: I HTML legger du til et id-attributt på et element:

<p id="title">Choose from different themes.</p>

I CSS refererer du til id-en med en hashtag (#) for å definere stilene:

#title {
  property: value;
}

Kjør følgende eksempel og observer hvordan det fungerer. Dette eksempelet bruker stiler på det unike elementet med title-id.

Attributtet id="title" identifiserer <p>-elementet unikt, og stilene definert med #title-velgeren gjelder kun for dette spesifikke elementet.