Question

The following CSS code is embedded on a webpage:

p {
font-weight: bold;
font-style: italic;
}

Which of the following statements is true when the above webpage is shown on a browser?

Group of answer choices(A-D)

a. All paragraphs are displayed in bold but not in italic, since the browser will only execute the first CSS rule and ignore all subsequent rules.

B. All paragraphs are displayed in italic but not in bold, since the browser will only execute the latest CSS rule and ignore all previous rules.

C. All paragraphs are displayed in bold and italic at the same time, since the browser is able to execute both CSS rules.

D. All paragraphs are not displayed in bold and not in italic, since CSS does not allow more than 1 rule under the same selector, so the above CSS code has errors and the browser will not execute it at all.

Answer 1

Following is the css syntax where the paragraph element selector is used.

p{
font-weight: bold;
font-style: italic;
}

The correct answer here is:

C. All paragraphs are displayed in bold and italic at the same time, since the browser is able to execute both CSS rules.

In CSS, we can declare more than one rule inside a selector block and all the rules will be executed. So, all the paragraph tags will be displayed in bold and italic unless specified otherwise using an id or a class that overrides the element selector.

There is no such rule as stated in option A that "Only first rule is executed and any other subsequent rules will be ignored".

There is no such rule as stated in option B that "Only latest rule is executed and previous rules are not executed".

Unlike option D, we can declare more than one rule inside a css selector block and all the rules will be executed.

Example

is the output of :

This html code. Observe that both the paragraph tags are displayed in bold and italic.

Thanks.