În codificare există adesea multe soluții diferite pentru o anumită problemă. Acest lucru este valabil mai ales atunci când vine vorba de stilizarea unui element HTML.

Unul dintre cele mai ușor de schimbat este culoarea textului. Dar, uneori, se pare că nimic din ceea ce încercați nu funcționează:

<style>
  h2 .red-text {
    color: red;
  }
</style>

<h2 class="red-text" color=red;>CatPhotoApp</h2>

Deci, cum puteți schimba culoarea elementului H2 în roșu?

Opțiunea # 1: CSS în linie

O modalitate ar fi să folosiți CSS inline pentru a stiliza direct elementul.

Ca și în celelalte metode, formatarea este importantă. Uitați-vă din nou la codul de mai sus:

<h2 class="red-text" color=red;>CatPhotoApp</h2>

Pentru a utiliza stilul în linie, asigurați-vă că utilizați style atribut și pentru a înfășura proprietățile și valorile între ghilimele duble (“):

<h2 class="red-text" style="color: red;">CatPhotoApp</h2>

Opțiunea # 2: utilizați selectoare CSS

În loc să utilizați stilul în linie, puteți să vă separați HTML-ul sau structura și conținutul paginii de stilul sau CSS.

Mai întâi, scăpați de CSS-ul în linie:

<style>
  h2 .red-text {
    color: red;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

Dar trebuie să fii atent la selectorul CSS pe care îl folosești. Uită-te la <style> element:

h2 .red-text {
  color: red;
}

Când există un spațiu, selectorul h2 .red-text îi spune browserului să vizeze elementul cu clasa red-text asta e copilul h2. Cu toate acestea, elementul H2 nu are un copil – încercați să stilizați elementul H2 în sine.

Pentru a remedia acest lucru, eliminați spațiul:

h2.red-text {
  color: red;
}

Sau pur și simplu vizați red-text clasa direct:

.red-text {
  color: red;
}