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 taggselektor retter seg mot alle elementer av en gitt tagg, og gir enhetlig styling på siden.

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;
}

La oss kjøre følgende eksempel og se hvordan det fungerer.

Klassevelger

Klassevelgere retter seg mot elementer som deler et klassenavn, og gir mer presis kontroll.

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 bedre kontroll over utseendet.

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

Klassekomposisjon

Du kan tildele flere klasser til et enkelt element for fleksibel styling.

Syntaks: I HTML-en 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 mottar stiler fra begge selektorene. Klassen text setter fargen til navy, og klassen font setter skriftstørrelsen til 24px.

Id-velger

Id-velgere retter seg mot ett unikt element. Siden id-er må være unike, brukes denne metoden sjelden for styling.

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 id-en title.

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