První panel obsahuje nějaký text.
Druhý panel taky obsahuje nějaký text.

Odlišné formátování

V ukázkové stránce jsou dva šedé panely. Každý z nich obsahuje nějaký nadpis a text.

Chceme druhý panel přebarvit na žlutou a zmenšit mu velikost písma.

Možný postup

  1. První z obou značek `<div>` doplníme na `<div class=prvni>`. Obdobně druhému přidáme `class=druhy`.
  2. Šedá barva se má vztahovat jen na první panel, proto selektor `div { background-color: lightgray; }` přepíšu na `.prvni { background-color: lightgray; }`.
  3. Prvnímu panelu nastavím obdobným způsobem barvu `gold`. Navíc mu přidáme pravidlo `font-size: 80%;`.
  4. Pokud bychom chtěli na oba panely vztáhnout stejné pravidlo, např. nastavit hnědé písmo, můžeme použít selektor `.prvni, .druhy { color: brown; }`.