Dynamic CSS

Since a large part of HTML has to do with changing style settings of HTML elements, it will be helpful to review the application of Cascading Style Sheets (CSS) to page elements. Although most CSS settings are not intended for dynamic change, any and all such settings are available for change at the discretion of the page designer.

Inline Style Sheets

Style sheets are applied to XHTML elements in three ways. Inline style sheets are applied by coding style properties and values inside the tags to which they apply.

<tag style="property:value [; property:value]...">
Figure 10-1. General format for inline style sheet.

The keyword style is followed by a quoted list of style properties and associated values, connected with colons (:) and separated by semicolons (;). For instance, to set the font family and font size for the text contained within a paragraph, the following inline style sheet is coded inside the opening <p> tag.

<p style="font-family:arial; font-size:9pt">
  This is a paragraph styled with an inline style sheet.
</p>
Listing 10-1. Setting inline styles for a paragraph.

An inline style sheet can appear inside any tag to directly set its style. All that is required is to enclose the applicable style properties and values inside a quoted style attribute.

Embedded Style Sheets

When a large number of style settings are used on a Web page, there is convenience in packaging the settings together in one place as an embedded style sheet, rather than having them scattered as inline style sheets throughout the document. An embedded style sheet normally is coded inside the <head> section of the document surrounded by a <style> tag. It applies styles across the entire Web page through simple selectors, ID selectors, group selectors, contextual selectors, and class selectors, whose general formats are shown in Figure 10-2 and discussed below.

<style type="text/css">

  tag           {property:value [; property:value]...}
  tag#id        {property:value [; property:value]...}
  tag, tag, ... {property:value [; property:value]...}
  tag tag ...   {property:value [; property:value]...}
  .class        {property:value [; property:value]...}

</style>>

Figure 10-2. General formats for embedded style sheet settings.

Simple Selectors

When associating styles with a particular type of tag, the tag name is followed by a set of properties and values enclosed within braces { }. For instance, to set the font family and size for all paragraphs in a document, the following simple selector entry is coded.

p {font-family:arial; font-size:9pt}
Listing 10-2. Using a simple selector to style a <p> tag.

Now, wherever a <p> tag is encountered in the Web document, the browser applies these styles to its content.

Group Selectors

In a similar manner, identical styles can be applied to multiple tags by listing the tag names separated by commas. In the following example, all <h1>, <h2>, and <h3> tags appearing on a page receive the same styling.

h1, h2, h3 {font-family:arial; color:blue}
Listing 10-3. Using group selectors to style multiple heading tags.

ID Selectors

If a single tag is to take on a different style from that given in a simple selector, the tag can be assign an id for use in differentiating its style. For example, a paragraph with id="myPar" is assigned a different style from all other paragraphs on a page with the ID selector shown in Listing 10-4.

p       {font-family:times new roman; font-size:10pt}
p#myPar {font-family:arial; font-weight:bold}
Listing 10-4. Using an ID selector to style an identified paragraph different from other paragraphs.

The tag type (p in this example) is followed by the character "#" to indicate that the following specification is a tag ID. In this case, all paragraphs except the one identified with id="myPar" are styled in Times New Roman font at 10-point size; the individual paragraph appears in bold Arial font. It still retains its 10-point size since this style setting, applied to all paragraphs, is not overridden by the ID selector.

Contextual Selectors

A contextual selector gives the combination of tags, separated by spaces, that must hold before a style is applied. In the following example, a list item <li> is blue only if it is part of an unordered list <ul>. A list item in an ordered list <ol> is not displayed in blue.

ul li {color:blue}
Listing 10-5. Using a contextual selector to style a list item only for an unordered list.

Class Selectors

A general style that can be applied to any tag is called a style class and is defined by assigning a class name, preceded by a period, to its style properties. In the following example, a class named .newstyle is created to apply 10-point Times New Roman font style.

.newstyle {font-family:times new roman; font-size:10pt}
Listing 10-6. Defining a style class.

The named style is applied to any HTML tag by associating the tag with the class. The specification class="class" is coded in the tag to which it applies. A paragraph, for example, can take on the .newstyle class with the code,

<p class="newstyle">
Listing 10-7. Applying a style class.

Notice when applying the class to a tag that the period identifying the class name in the style sheet is not used. Only the class name itself is specified.

Linked Style Sheets

A linked style sheet is a separate document of style specifications that can be applied to any XHTML document that links to it. The format for defining linked styles is the same as for an embedded style sheet with the exception that a <style> tag does not enclose the specifications. The style sheet document is saved as a simple text file, normally identified with the .css file extension to differentiate it from .htm documents.

Below, for example, is a set of style specifications contained within a text document named stylesheet.css.

p		{font-family:arial; font-size:10pt; color:black}
h1, h2		{color:blue; text-align:center}
ul li		{font-style:italic}
.newstyle	{font-family:times new roman; font-size:10pt}
Figure 10-3. Example code for a linked style sheet saved as stylesheet.css.

Any HTML page can apply these style settings by linking to this stylesheet.css document with a <link> tag coded in the <head> section of the page.

<head>
  <title>Page Title</title>
  <link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
Listing 10-8. Applying a linked style sheet to a page.

The href="stylesheet.css" attribute gives the URL for the style sheet document, which can appear in any local folder or external to the Web site. The attribute rel="stylesheet" must be coded to give the relationship between this external document and the Web document; the attribute type="text/css" indicates the document type of the file, in this case a CSS style sheet.

Style Sheet Precedence

Style settings at the lowest level take precedence. That is, an inline style sheet overrides an embedded style sheet, which overrides a linked style sheet for the same style settings. Assume, for example, that an embedded style sheet specifies the paragraph styles of a document with the following specification.

<style type="text/css">
  p {font-family:arial; font-size:10pt; color:black}
</style>
Listing 10-9. Applying an embedded style sheet to paragraphs on a page.

If then, for a particular paragraph, an inline style sheet is used,

<p style="color:red">Here is a paragraph with a different style setting.</p>
Listing 10-10. Overriding an embedded style with an inline style.

the inline style color:red overrides the embedded style color:black for this particular paragraph. Other embedded styles remain in effect since they are not changed by the inline style sheet. In short, style settings cascade from linked, through embedded, through inline style sheets, with conflicting settings resolved by the lowest-level style sheet that applies.

DOM Style References

Style settings applied to XHTML elements through a style sheet can be considered their initial style settings. Through scripting applied with the Document Object Model, these settings can be changed in response to events that take place surrounding the page.

Style sheets and the Document Object Model use two different syntactical conventions when referring to style properties. Within style sheets, the hyphenated form of the style name is used as illustrated below for selected styles appearing in inline, embedded, or linked style sheets.

border-top-style:dotted
font-family:arial
font-size:10pt
color:black

When using DOM scripting, however, hyphens in the name are omitted, and the letter following the hyphen is capitalized. Script references when applying the previous style properties are to

borderTopStyle = "dotted"
fontFamily = "arial"
fontSize = "10pt"
color = "black"

Scripted style settings are made with the JavaScript assignment (=) statement. As noted earlier, the DOM object reference is followed by the keyword style, followed by the property name, followed by the assigned property value.

document.getElementById("id").style.property = value
Figure 10-4. General format to assign a style setting through script.

A large part of applying HTML to page elements is the setting of style properties under script control, triggered by events surrounding the page. However, there are many other ways to bring dynamism to a Web page besides using style settings. These various methods are discussed throughout these tutorials.

Web Development Tutorials