Тегот 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 и четвртиот - во зелена. За ова на првиот и третиот div дајте им една класа, а на вториот и четвртиот - друга класа.