Наслеђивање 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;
}