Page 40 - LoudOffice_Guide-to-HTML_Part-II_Advanced.PDF

As you can see, a class is simply a group of elements that can be used on scattered
elements throughout a document, all of which have the same value for their CLASS
attribute.

IDs
Like C L A S S , I D is an HTML attribute that can be applied to any element. In general, while
class names are usually given to groups of elements, ID is used to identify one specific
instance of an element. Style rules selected by the ID attribute are declared using the
pound sign (#) to precede the selector, as follows:

< S T Y L E >
< ! - -
# m a i n h e a d { c o l o r : y e l l o w ; t e x t - d e c o r a t i o n : i t a l i c ; }
- - >
< / S T Y L E >
While many elements can share the same CLASS attribute value, only one
element in any document can have a particular ID attribute value.

DIV and SPAN
These two HTML elements < D I V > and < S P A N > are almost exclusively used as containers for
have no inherent display characteristics, with one
CSS properties. < D I V > and < S P A N >
exception each. < D I V > defines a block consisting of text and HTML tags, and separates this
is an inline element which
block from surrounding content by line breaks, while < S P A N >
"flows" in with surrounding content. These two elements are used to allow you to add CSS
to a selected amount of text:

< S T Y L E >
< ! - -
. r e d s p a n { c o l o r : y e l l o w ; t e x t - d e c o r a t i o n : i t a l i c ; }
- - >
< / S T Y L E >
. . .
< p > I c a n u s e S P A N t o a p p l y t h e < s p a n c l a s s = ” r e d s p a n ” > r e d
s p a n < / s p a n > c l a s s t o j u s t a s e l e c t a m o u n t o f t e x t . < / p >

Cascading and Inheritance
The style sheets we are discussing are called Cascading Style Sheets. Simply stated,
"cascading" in CSS specifies how an element instance may be affected by styles of different
types (inline style, embedded style sheet, linked style sheet, imported style sheet) and
selected in a number of ways (element tag, class, ID). The logic is simple: CSS cascades
from general to specific, and from top to bottom. The order of specificity, from greatest to
least, is:

1. Inline styles
2. ID
3. CLASS
4. HTML element

LoudOffice.com Guide to HTML – Part II Page 40