Selectors allow you label a div so they can be easily found. You can then construct your CSS styles and store them in the head of your document or even elsewhere and yet still have the ability to apply those styles to the div in the document.
Selectors are what gives real power to a div. Now that div can be selected via this ‘label’, it can controlled from far away.
How far? Well for now we are storing your styles in the head portion your document. Soon we will look at putting your styles in a Cascading Style Sheet (CSS) a document that sits outside of your html document. Thus allowing you to control multiple documents from the same CSS! In fact, your CSS doc could be on the other side of the world. Use the right path to connect your CSS and your html file and the selector will apply the styles all the same.
*Here’s where it gets tricky
As far as we’re concerned, there is no real difference between the two. You can use them interchangeably and as you wish. BUT, as a matter of discipline, it would be wise to use them as they were intended.
Class selectors are intended to be used to label and pick a number of tags that you desire to have as part of a similar group or class. In other words, a number of tags you want to all be treated the same way.
For example:
I have these five paragraphs and I want them to be treated as a sub text.
<p class=”subtext”>This is my subtext paragraph and they are others on the page too that will be treated exactly alike</p>
Id selectors are intended to be used for a tag that occurs only once in the document. Some unique element you want to find quickly and there is perhaps only one, maybe two instances in the document.
For example (staying inline with the earlier example):
I have an intro paragraph and I want to apply a style to it that is different.
<p id=”introtext”>This is my introduction paragraph and I also want to remind myself there is only one such occurrence in the document that should receive a special style.</p>
Of course, once you establish your selectors, you will need styles in the head to apply to them. between the open head tag <head> and close head tag </head>
It would look something like the following:
<style>
.subtext{font-style: italic; color: #777;}
#introtext{font-weight:bold; color: #000;}
</style>