Наследяване на 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;
}