Таг 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>

Оцветете съдържанието на първия div в червен цвят, съдържанието на втория div - в зелен, а съдържанието на третия div - в син. Задайте за това на всеки 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>

Оцветете съдържанието на първия и третия div в червен цвят, съдържанието на втория и четвъртия - в зелен. За това на първия и третия div дайте един клас, а на втория и четвъртия - друг клас.