Cascading Style Sheets Sampler (child)

This HTML document uses the <LINK> tag to link to a parent style sheet:

The <LINK> tag has no ending tag and is defined within the <HEAD>...</HEAD> tags.

You can also use the @import command within the HEAD section to pull in style sheets (see page 275). The main difference between using the LINK tag and @import command is that the @import command allows you to pull in multiple style sheets with the last rule for an element taking precedence over previous, conflicting rules.

For this class, I will concentrate on the LINK tag.

All formatting for headers H1..H3 are defined in the linked-to style sheet, not in this HTML document. For example:

Header one - should be Red, Italics

Header two - should be Blue, Centered

Header three - should be Green, Oblique (slanted)

The headers appear ss they do because of the following STYLE tag in the parent CSS template:

Properties:

Properties include things like "color", "font-style", and "text-align". Do not confuse properties with attributes. Attributes are parameters found within a tag like the src attrbute of the <img> tag:

src

Unlike attributes, properties are associated with elements of style sheets, not tags. Like attributes, however, properties (in red) are assigned values (in blue):

color

RED

Click here for a listing of properties and their corresponding values that you can use with elements such as "H1".

Elements:

Elements correspond to various tags like H1, P (for paragraph), etc. You apply properites and values to elements in a style sheet. Please note that not all properties can be used with all elements. Elements include:

H1, H2, H3, etc
EM, STRONG, B
P
List tags: OL, UL, DL, LI, DT, DD
i, u
table tags (not covered yet)
and on and on...

Heck, even the list type of solid square bullets and green color above is compliments of the parent style sheet.

Nested Elements:

While nesting of elements is confusing, the basic premise is that you can control formatting of your HTML documents at very precise levels. For example, if you want the items in the innermost list of nested ordered lists (ordered list within an ordered list) to be blue, you would code the following rule in the STYLE tag of the parent style sheet:

OL OL {color: BLUE} Then, if you coded:

Sub item #1

The result would be:

Item #1

Sub item #1

Item #2...

Heck, you can even go as far as to say that you want all <EM> tags to be PINK when used in a <H4> tag by coding the following rule:

H4 EM {color: PINK; font-type: NORMAL} The result of using the EM tag within the H4 tag would be:

Pink emphasized header in normal font type

You could code additional H4 rules for other cases like brown text without emphasizing:

Brown header in normal font type

Classes:

Classes allow you to create multiple formatting options for the same tag and refer to them inside of HTML tags using the class attribute that is common to all tags. For example, assume that you would like to sometimes have the <P> tag do right-aligned parapgraphs with RED text and other times do center-aligned paragraphs with BLUE text.

To do this, you would code the following in the STYLE tag of the parent style sheet:

Then in the child HTML document, you could code:

This would result in:

blah..blah..blah...

Please note the use of the ending paragraph tag, </P>.

The book goes into much more detail on classes, but hopefully you get the idea.

In the interest of time, I am skipping the rest of chapter 9. If you want more in-depth exampels of classes and how HTML CSS applies things like margins, I encourage you to read that chapter. For the most part, I have summarized the chapter for you in this document.

click here to popup the style sheet used for this page.