What is the difference between the CSS Class selector and Style property? It's both a big difference, and a small one. While they use the same style rules, and can often create the same effects, there are different reasons for using each of them. They are both used to attach characteristics to an HTML element, but the Class selector is used when those characteristics are common to your site. For instance I would use a class selector if I were defining code, like this:
.blue { font-style: italic; color: #000099 }
I use this "code" class, which I have previously defined in my CSS, to show HTML and CSS code, throughout my site. Since this style is reoccurring, placing it in my CSS saves me time and effort each time I use it. I don't have to re-type the style rules for that style each time, as I would if I were using the style property. I just add class="code" to the paragraph tag, and my predefined style is applied. The style tag, as I mentioned in the previous paragraph, could do the same job with two major differences. One, it would take more code. Instead of class="code", I would have had to add this to the paragraph tag:
style="margin-left: 1.5em; padding-left: 10px; font-weight:bold; font-style:italic; color:#666666;"
Obviously using the code class saved me typing, but there is one other reason to use class for repetitive styles. A Class selector is defined in only one place per site if you are using a remote CSS file. So if I want to change the color of my "code", I only have to change it in one place. Change the definition of the "code" class in my CSS, and my whole site changes to reflect this change. If I'd used the style property, I'd have had to go to each instance of it's use, and change that instead. On this site, that would have been dozens of changes, and I'm not a particularly prolific writer. So why use the Style property? Use it when something is unique. Rather than define a style in your CSS that will only be used once, use the Style property and define it for that one use. You can also benefits from the fact that it's not controlled remotely. If I was describing aspects of a site, I might mention that it had red links. Which makes sense if the links actually were red. If that site changes its theme however, they might not be red the next time. My comment might not make sense in that new context. I could instead, use the style tag to define an example of the red link I was discussing. Then not matter how my own CSS changes, the example I used would still be appropriate. So while one of the Style property's limitations is that it's not remotely controlled, one of it's benefits is also that it's not remotely controlled. I'll also take this opportunity to mention the Span element. In addition to applying Class and Style to common elements like paragraphs, DIVs, links, etc., you can also apply it to the Span element. This allows you to change the style in-line. Using either Class or Style within the Span element, you can apply a style to a section of content, without altering the style of the larger block. Like using Strong or Emphasis, I could use Span to change a block of text in the middle of a sentence, without changing the text characteristics of the rest of the sentence. Another very useful tool. Here's what you take away from this. You should use the Class selector to add styles that you use repetitively. You can use the Style element to apply unique styles. You can use the Span element to apply either of these within a larger block of content.
