Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

Embedded Style Settings

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.

Using IDs

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

Note the use of the # symbol, which specifies that only the ID with the name iblue should be styled with this statement.

Using Classes

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 ...