The CSS rule '#red { color: #FF0000; }' with HTML <p id=\"red\"> This paragraph has red text </p> demonstrates which CSS concept?

The CSS rule '#red { color: #FF0000; }' with HTML <p id=\"red\"> This paragraph has red text </p> demonstrates which CSS concept?

• A. Element selector
• B. Inline style
• C. Class selector
• D. Id selector

Answer: (D)

Targeting a specific element with an ID selector. The leading hash in the selector, #red, tells CSS to select the element that has the id attribute equal to red. In the HTML, the paragraph indeed uses id="red", so this rule styles that exact element and sets its text color to #FF0000, resulting in red text. This is distinct from an element selector, which would apply to all elements of a given tag (like all paragraphs), and from a class selector, which targets elements with a matching class attribute. Inline styles would put the styling directly on the element itself, which can override external rules in some cases but isn't what's shown here.

Targeting a specific element with an ID selector. The leading hash in the selector, #red, tells CSS to select the element that has the id attribute equal to red. In the HTML, the paragraph indeed uses id="red", so this rule styles that exact element and sets its text color to #FF0000, resulting in red text. This is distinct from an element selector, which would apply to all elements of a given tag (like all paragraphs), and from a class selector, which targets elements with a matching class attribute. Inline styles would put the styling directly on the element itself, which can override external rules in some cases but isn't what's shown here.