HTML Help & Resources

Cascadding Style Elements

While style elements are best housed in an external file, it may be necessary for style to be implemented at some point in your documents. For instance, programmers using scripting languages, relying on the value of a variable, may need to dynamically change a style element. There are several different methods to achieve this integration of style.

Whenever style declarations occur, the TYPE ( type="text/css" ) definition must be set, to ensure the elements of style are displayed as intended. Omitting the type reference can result in inconsistent results. The media definition is optional, and not necessary unless you intend to reference style for a type of media other than the screen - media="screen" is the default property when media definition is omitted.

The elements of style, and how to use them, are not covered in this reference. For more information on how to utilize the power of cascadding style, visit our CSS reference instead.

Method #1 - Inside the Document Head

In Cascadding Style Elements, it's the order in which style is referenced, that will determine what is affected and how. In the example below, any reference to the P or H1 tags in an external style sheet, defined in the document head, and above the declaration of style, will be overriden. Conversely, if the style declaration appeared before a declaration of an external style sheet, referenced in the document head, the configuration inside the external style sheet would override any declaration before it that referenced the P and H1 tags.

Every style element configuration, in conjunction with an HTML tag, such as <P> or <H1> in the example at left, must start with { and end with }, when defined by the STYLE element.

In this example, all paragraphs will be displayed in the color green, unless an alternate style has been defined later on inside the document body - Cascadding Affect.

Method #2 - Inside the Document Body

Style declaration occuring inside the document body will override any previous style declarations outlined in the document head, and affect the entire document, despite where the declaration occurs inside the document body.

Every style element configuration, in conjunction with an HTML tag, such as <P> or <H1> in the example at left, must start with { and end with }, when defined by the STYLE element.

In this example, all paragraphs will be displayed in the color red, overriding the previous definitions in the document head, which defines the P tag as having the color green.

Notice that despite where the style definition, inside the body, occurs, all paragraphs are affected.

Method #3 - Inside the Document Body - HTML Tag Level

This method is probably the most frequently used aspect of style, in that the method allows users to define a distinct style for an individual HTML item, and not for an entire group, class, or id. This type of method only affects the tag being referenced, and no other tag - no cascadding affect. This is particularly useful to override groups, classes, and ids, with common style, and support a dynamic style that does not affect future references to any group, class or id.

Every style element configuration, in conjunction with an HTML tag, such as <P> or <H1> in the example at left, must start with { and end with }, when defined by the STYLE element. In the case of this example, the style element occurs inside the HTML tag boundaries, in which case the style properties must fall inside the quotations.

In this example, all paragraphs will be displayed in the color green, except the paragraph where the style element has been specifically defined to be the color of magenta.

Move on to the Next Topic - Document Scripting.