There’s also nothing stopping you from individually setting or overriding certain styles for the current page on a case-by-case basis by inserting style declarations directly within the HTML, like this (which results in italic, blue text within the tags):
<div style='font-style:italic; color:blue;'>Hello there</div>
But this should be reserved for only the most exceptional circumstances, as it violates the principle of separation of content and layout.
A better solution for setting the style of an element is to assign an ID to it in the HTML, like this:
<div id='iblue'>Hello there</div>
What this does is state that the contents of the <div> with the ID iblue should have applied to it the style that
is defined in the iblue style
setting. The matching CSS statement for this might look like the
following:
#iblue { font-style:italic; color:blue; }Note the use of the # symbol,
which specifies that only the ID with the name iblue should be styled with this
statement.
If you would like to apply the same style to many elements, you do not have to give each one a different ID because you can specify a class to manage them all, like this:
<div class='iblue'>Hello</div>
What this does is state that the style defined in the iblue class should be applied to the contents
of this element (and any others that use the class). Once a class is
applied you can use the following rule, either in the page header or
within an external style sheet for setting the styles for the
class:
.iblue { font-style:italic; color:blue; }Instead of using a # symbol,
which is reserved for IDs, class statements are prefaced with a . (period).