Priorytet stylów CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Priorytet stylów CSS określa, która reguła zostanie zastosowana, gdy kilka stylów dotyczy tego samego elementu HTML i tej samej właściwości, np. color albo font-size.

W pytaniach egzaminacyjnych często przyjmuje się uproszczoną kolejność priorytetu według miejsca zapisania stylu:

  1. styl lokalny / inline - zapisany bezpośrednio w elemencie HTML w atrybucie style,
  2. styl wewnętrzny - zapisany w dokumencie HTML w elemencie <style>, najczęściej w sekcji <head>,
  3. styl zewnętrzny - zapisany w osobnym pliku .css i dołączony przez <link>.

Przykład

<head>
  <link rel="stylesheet" href="style.css">
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p style="color: red;">Tekst</p>
</body>

Jeżeli w pliku style.css ustawiono:

p {
  color: green;
}

To tekst będzie czerwony, ponieważ styl lokalny style="color: red;" ma najwyższy priorytet.

Ważne na egzaminie

Dla pytania o kolejność od najwyższego priorytetu poprawna odpowiedź to:

lokalny → wewnętrzny → zewnętrzny

czyli:

style="..." → <style>...</style> → plik .css

Uwaga praktyczna

W rzeczywistym CSS znaczenie mają też: selektory, szczegółowość selektora, !important oraz kolejność wczytywania reguł. Jednak w typowych pytaniach INF.03 chodzi o podstawową hierarchię miejsca zapisania stylu.