Nasleđivanje CSS svojstava

Recimo da imamo pasus, a u njemu neki tekst u tagu i:

html<p>
  This is some <i>text</i> in paragraph.
</p>

Hajde da obojimo pasuse u crvenu boju:

cssp {
  color: red;
}

Kao rezultat, obojiće se ne samo tekst pasusa, već i tekst taga i:

Stvar je u tome što se svojstvo color nasleđuje. To znači da ako roditeljskom tagu postavljena neka boja, ta boja će biti i potomaka. Ne nasleđuju se sva CSS svojstva, ali mnoga (od onih koja već znate - sva se nasleđuju).

Po želji, međutim, možemo redefinisati svojstvo roditelja, postavivši selektor potomka. Na primer, hajde da pasusu postavimo crvenu boju, a kurzivu - plavu:

html<p>
  This is some <i>text</i> in paragraph.
</p>

cssp {
  color: red;
}
i {
  color: blue;
}

Результат:

Redosled selektora u CSS kodu u tom slučaju nema značaja. Ako se zamenim mesta selektoru i i selektoru p, sve će raditi isto:

html<p>
  This is some <i>text</i> in paragraph.
</p>

cssi {
  color: blue;
}
p {
  color: red;
}

Результат:

Задание 1

Proučivši kod, recite koju boju će imati tekst u tagu b:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssp {
  color: blue;
}

Задание 2

Proučivši kod, recite koju boju će imati tekst u tagu b:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssp {
  color: blue;
}
b {
  color: red;
}

Задание 3

Proučivši kod, recite koju boju će imati tekst u tagu b:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssb {
  color: red;
}
p {
  color: blue;
}

Задание 4

Proučivši kod, recite koju boju će imati tekst u tagu li:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  color: blue;
}

Задание 5

Proučivši kod, recite koju boju će imati tekst u tagu li:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}

Задание 6

Proučivši kod, recite koju boju će imati tekst u tagu i:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}
i {
  color: green;
}

Задание 7

Proučivši kod, recite koju veličinu će imati tekst u tagu i:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

cssi {
  font-size: 30px;
}
ul {
  font-size: 20px;
}
li {
  color: red;
  font-weight: bold;
}