Тэг div для групавання тэгаў у HTML

У папярэднім уроке мы разабралі тэг span, які дазваляе як-то вылучыць кавалак тэксту. Існуе таксама спецыяльны тэг div, які дазваляе згрупаваць некалькі тэгаў, каб потым з імі зрабіць што-небудзь адначасова.

Хай для прыкладу з дапамогай тэгаў div мы згрупуем абзацы:

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

Давайце элементам з першай групы назначым чырвоны колер, а элементам з другой групы - зялёны:

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

Задание 1

Даны наступны код:

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>

Афарбуйце змесціва першага дыва ў чырвоны колер, змесціва другога дыва - у зялёны, а змесціва трэцяга дыва - у блакітны. Задайце для гэтага кожнаму дыву свой клас.

Задание 2

Даны наступны код:

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>

Афарбуйце змесціва першага і трэцяга дыва ў чырвоны колер, змесціва другога дыва і чацвёртага - у зялёны. Для гэтага першаму і трэцяму дывам дайце адзін клас, а другому і чацвёртаму - другі клас.