Наследување на CSS својства

Нека имаме параграф, а во него некаков текст во таг i:

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

Ајде да ги обојуваме параграфите во црвена боја:

cssp {
  color: red;
}

Како резултат, ќе се обојат не само текстот на параграфот, туку и текстот на таг i:

Сè се должи на фактот што својството color се наследува. Ова значи дека ако на родителскиот таг е зададена некоја боја, тогаш таква боја ќе имаат и потомците. Не се наследуваат сите CSS својства, но многу од нив (од оние што веќе ги знаете - сите се наследуваат).

По желба, сепак, може да се преопредели својството на родителот, со задавање на селектор на потомок. На пример, ајде на параграфот да му зададеме црвена боја, а на курзивот - сина:

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

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

Результат:

Редоследот на селекторите во CSS кодот во таков случај нема значење. Ако се заменат местата на селекторот i и селекторот p, сè ќе работи исто така:

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

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

Результат:

Задание 1

Проучувајќи го кодот, кажете каква боја ќе има текстот во таг b:

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

cssp {
  color: blue;
}

Задание 2

Проучувајќи го кодот, кажете каква боја ќе има текстот во таг b:

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

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

Задание 3

Проучувајќи го кодот, кажете каква боја ќе има текстот во таг b:

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

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

Задание 4

Проучувајќи го кодот, кажете каква боја ќе има текстот во таг li:

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

cssul {
  color: blue;
}

Задание 5

Проучувајќи го кодот, кажете каква боја ќе има текстот во таг li:

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

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

Задание 6

Проучувајќи го кодот, кажете каква боја ќе има текстот во таг 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

Проучувајќи го кодот, кажете каква големина ќе има текстот во таг 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;
}