class or id Options

[jimbondy]

Hi.
I understand how 'class and id' differentiate.
I use 'class' when I have multiple occurrences throughout my HTML page, & use id if only using once IE: my header.

My question:
Since I have 8 HTML & 8, (mostly), unique, (other than the headers which will have like attributes), CSS pages on my website I will be installing 8 headers (with like attributes).

Since they are not on the same HTML page, does the rule apply per page or per website (multiple pages)?

Thanks so much
JimmyB

[pandy]

If you use an external style sheet it applies to your whole site as long as you link to it in HEAD on each page. Really, it applies to any site (domain) that include a LINK element with its URL in their pages. The whole internet could use the same style sheet - but it would take a helluva server.

What you type in a style block in HEAD is good for that page only. The style attribute has an even more local scope.

https://htmlhelp.com/reference/css/style-html.html

[jimbondy]

Awesome. Thanks for your help Pandy.
Have a great holiday
JimmyB

[Christian J]

The whole internet could use the same style sheet - but it would take a helluva server.

Apparently the Google Analytics script file is now used by 73,7% of the world's most popular web sites, according to https://en.wikipedia.org/wiki/Google_Analytics#Popularity (most of time the file is cached, of course, reducing the load on Google's servers).

Cautionary tale about relying on third-party files: https://qz.com/646467/how-one-programmer-br...y-piece-of-code

[Jason Knight]

One thing to keep in mind is that ID's "uniqueness" is useful above/beyond CSS. For example the browser maintains a cache/list of all ID's on a page which makes getElementById faster than querySelector. More importantly ID's can also act as hash link targets... useful for linking to subsections of a page, but even more useful for creating non-scripted modal dialogs using the :target attribute!

Don't forget as well that ID's -- NOT NAME -- are the target of FOR and HEADERS attributes. Thus why things like W3Fools garbage examples often have broken LABEL tags with their FOR attribute pointing at nothing.

CODE

<input type="checkbox" id="toggle" hidden>
<label for="toggle">Toggle</label>

CODE

label {
  cursor:pointer;
  color:#F00;
  text-decoration:underline;
}

#toggle:checked + label {
  color:#F00;
}

Try that out.