Monday, February 18, 2008

Three Types of Cascading Styles

There are three main ways that you can use Cascading Styles in your Web pages:

Link a Web page to one or more External Style Sheets
Create an Embedded Style Sheet for a single page
Set up an Inline Style for individual page elements.

1. External Style Sheets

External Style Sheets are like a template for a text document or file. They contain style formatting information that tells how the text is to be displayed. For web pages, these templates or sheets can be linked with any number of HTML pages. This is a very efficient way of formatting an entire website just by creating one page or file.

Additionally, updates to the entire website are easily accomplished by just making changes to this one file If you want to change a style for a website, you only need to make one change in the external style sheet and the change will be reflected in all pages that are linked to that style sheet.

Using External Style Sheets not only helps you make changes to your website, it is also a way to establish consistency of appearance across a number of pages in your Web site.

Usually, an External Style Sheet is given the extension name of .css.
For example: Mystyles.css or Styles1.css.

Example of the Contents of a Simple External Style Sheet:

body {
background: #FFFFFF;
color: #0066FF;
font-family: times, serif;
font-size: 13pt
}
a:link {
color: red
}
a:visited {
color: yellow
}
h1 {
font-size: 26px;
font-family: Times New Roman, Times;
color: #003399;
text-align: center;
}

Two reasons for having a vertical type of layout for the text (as opposed to a horizontal layout) is that it makes it easier to visually scan down the page and find a particular item and it makes it easie to "cut and paste" sections of code when you want to create new items or change items.

Example HTML code for linking to an External Style Sheet:

HTML pages are pointed to the STYLES page using the LINK element. This statement is placed in the HEAD section of the HTML page. In the following example it tells the page to get it's STYLE information from the mystyle.css page.

1A. Imported Style Sheets - External

In addition to using an external style sheet by itself, you can add an imported style sheet to the external style sheet. An imported style sheet is a sheet that is imported into or combined with another sheet. This allows you to create one main sheet containing all the declarations that apply to an entire site using sheets that contain declarations for specific elements (or documents) that might require additional style declarations to be complete.

When you import partial sheets into the main sheet this gives you the ability to "pick and choose" from a number of style sheets in order to create a desired effect.

To import style sheets, use the @import notation inside the style element. The @import notations must come before any other declaration. If more than one sheet is imported, the style sheets will cascade in the order that they are imported. This means that the last imported sheet will override any previous imported sheets.

Example code to link an External Style Sheet and an Imported Style Sheet:

NOTE: If a rule in the imported style is in conflict with a rule declared in the main sheet, then the imported style sheet will be over-ridden.

2. Embedded Style

Picture of Writing Embededl Style Sheet Embedded style is the style attached to (embedded in) a single HTML page or document. The style information is specified using the STYLE element and is placed inside the HEAD elements. It applies to the entire page.

You would use an embedded style when you want to define styles for a specific page. This would happen if the style was already declared in the External Style Sheet and you needed to over-ride it or you simply need to declare a new style for just one page.

My recommendation is that you should include as many of your styles as possible in your External Style Sheet, unless you need to do it as an over-ride. The more you use External Style Sheet declarations, the easier your site maintenance will be because your styles will all be defined in one place and not scattered throughout the pages in your site.

Example code for an Embedded Style Sheet:

NOTE: The styling rules are written inside HTML comment notations:
Between . This hides the content from browsers without CSS support.

3. Inline Styles

Picture of HTML which can use Inline CSS Inline styles are used to apply cascading style sheet properties to individual elements on a page. The style is specified directly in the element start tag as a value of the STYLE attribute. It will be applied to only that specific occurrence of the element.

An inline style looks like this:

<P STYLE="text-indent: 10pt">Indented paragraph</P>

NOTE: If a page is Linked to an External Style Sheet, the inline styles on that page will over-ride style properties specified in the External Style Sheet.

Further References

The Complete CSS Guide by Web Standards Software and Learning. - This website has one of the best presentations on CSS information that I have found on the web. Good explanations and the information is very thorough. It covers pretty much all aspects of CSS. If you can spend some time here, you will learn a lot:

The World Wide Web Consortium (W3C) provides standards, specifications, and guidelines for technologies that are commonly used on the Internet. Here are some of their pages concerning CSS:

Zen Garden - This site is a great example of what can be done using CSS. They have static content which then has many different style sheets applied to it and you'll be amazed at the different looks that are rendered by the various styles.