Div tag za grupisanje tagova u HTML-u

U prethodnoj lekciji smo razmotrili tag span, koji omogućava da se izdvoji neki deo teksta. Takođe postoji specijalni tag div, koji omogućava grupisanje više tagova, da bi se zatim s njima moglo nešto uraditi istovremeno.

Neka za primer pomoću tagova div grupišemo pasuse:

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

Dodelimo elementima iz prve grupe crvenu boju, a elementima iz druge grupe - zelenu:

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

Задание 1

Dat je sledeći kod:

html<div>
  <h2>Naslov</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Naslov</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Naslov</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>

Obojite sadržaj prvog diva u crvenu boju, sadržaj drugog diva - u zelenu, a sadržaj trećeg diva - u plavu. Dodelite za to svakom divu svoju klasu.

Задание 2

Dat je sledeći kod:

html<div>
  <h2>Naslov</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Naslov</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Naslov</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Naslov</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>

Obojite sadržaj prvog i trećeg diva u crvenu boju, sadržaj drugog diva i četvrtog - u zelenu. Za to prvom i trećem divu dodelite jednu klasu, a drugom i četvrtom - drugu klasu.