För att tillämpa stilar effektivt behöver du förstå CSS-väljare, som avgör vilka HTML-element som ska stylas. Låt oss utforska de huvudsakliga typerna av väljare.

Taggväljare

Ett sätt att tillämpa stilar är genom att använda själva elementtaggen. Stilar som anges med en taggväljare påverkar alla element med den taggen. Detta är användbart för att ge enhetlig stil till element över hela webbplatsen.

Syntax: I HTML har vi ett p-element:

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

För att tillämpa stilar i CSS-filen, använd taggnamnet (p) som väljare:

p {
  property: value;
}

Låt oss köra följande exempel och se hur det fungerar.

Klassväljare

Ett mer precist sätt att styla element är att använda klassväljare. Dessa väljare riktar sig mot element med specifika klassnamn, vilket möjliggör selektiv tillämpning av stilar.

Syntax: Lägg till ett class-attribut med ett beskrivande klassnamn i HTML:

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

I CSS refererar du till klassnamnet med en punkt (.) för att definiera stilarna:

.text {
  property: value;
}

Kör följande exempel och observera att endast element med klassen text får dessa stilar, vilket ger dig bättre kontroll över din styling.

Alla element med attributet class="text" får röd text, en teckenstorlek på 24px och en bakgrund i färgen wheat. Klassnamnet text definieras i index.css med ett .-prefix.

Klasskomposition

Vi kan också kombinera flera klasser på ett enda element, vilket gör klasskomposition till ett kraftfullt verktyg för att applicera stilar – separera klassnamn med mellanslag i attributet class.

Syntax: Lägg till flera klassnamn på ett element i HTML:

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

Definiera stilar för varje klass separat i CSS:

.text {
  property: value;
}

.font {
  property: value;
}

Låt oss köra följande exempel och se hur det fungerar. Element med både klasserna text och font får de angivna stilarna.

<p>-elementet med både text och font klasser får stilar från båda selektorerna. Klassen text sätter färgen till navy, och klassen font sätter teckenstorleken till 24px.

Id-väljare

Även om det är möjligt att använda id-väljaren för att styla, rekommenderas det generellt inte. Id:n ska vara unika på en sida, vilket begränsar deras återanvändning.

Syntax: Lägg till ett id-attribut på ett element i HTML:

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

I CSS refereras id:t med ett hash-tecken (#) för att definiera stilarna:

#title {
  property: value;
}

Kör följande exempel och observera hur det fungerar. Detta exempel applicerar stilar på det unika elementet med id title.

Attributet id="title" identifierar <p>-elementet unikt, och de stilar som definieras med väljaren #title gäller endast för det specifika elementet.