If only one ID per page is allowed, how is this possible?

Question

"IDs can only be applied once per page, while classes can be used as many times on a page as needed." Then how can the following code work?

According to this lesson, only one "intro" id should be allowed in the same page. Nevertheless, both paragraphs will have the CSS applied. You can try it yourselves:

HTML

<div id="intro">
<p> This paragraph is in the intro section.</p>
</div>
<p id="intro"> This paragraph is not in the intro section.</p>

CSS

#intro {
color: white;
background-color: gray;
}

#intro{font-weight: bold;}

Answer 1

The whole idea of ids is that any of should be unique in your page.
CSS doesn't care about it in general, but id-queries have largest priority for rules,
JS DOM has getElementById which returns only one element with id. Compare it to getEementsByName or getElementsByTagName. They return an array of elements.
jQuery acts same way.

Answer 2

In this case Css fusions both of your style arguments together.
the problem is when you modify in two or more #intro{} the same attribute the last one in the Css overrides all before