Prvok div pre zoskupenie prvkov v HTML

V predchádzajúcej lekcii sme rozobrali prvok span, ktorý umožňuje nejako zvýrazniť časť textu. Existuje aj špeciálny prvok div, ktorý umožňuje zoskupiť niekoľko prvkov, aby sme s nimi potom mohli urobiť niečo naraz.

Nech napríklad pomocou prvkov div zoskupíme odseky:

html<div class="block1">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div class="block2">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

Nastavme prvkom z prvej skupiny červenú farbu, a prvkom z druhej skupiny - zelenú:

css.block1 {
  color: red;
}
.block2 {
  color: green;
}

Задание 1

Daný je nasledujúci kód:

html<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

Zafarbite obsah prvého div-u na červenú farbu, obsah druhého div-u - na zelenú, a obsah tretieho div-u - na modrú. Nastavte na to každému div-u svoju triedu.

Задание 2

Daný je nasledujúci kód:

html<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

Zafarbite obsah prvého a tretieho div-u na červenú farbu, obsah druhého div-u a štvrtého - na zelenú. Na to prvému a tretiemu div-u dajte jednu triedu, a druhému a štvrtému - inú triedu.