Web Publishing
Overview of Cascading Style Sheets
Cascading Style Sheets, or CSS for short, is a method designed to separate form from function in web page development. The idea is to store information that controls the style of a page (such as font size color, and placement of elements on a page) separately from the content of the page itself. This information can be used for one page or many. This means that by modifying one document, it is possible to change the style of an entire site. This makes it easy to create a uniform, consistent look.
Pages using Cascading Style Sheets may experience a lack of backwards-compatibility with existing browsers. Support for CSS did not start in earnest until version 4.0 browsers. Each browser supports CSS a little differently and you need to cross-test and double-code to get the intended results.
Advantages
Using Cascading Style Sheets gives the web publisher several advantages.
- Saves time formatting web pages.
- Easier to implement design changes.
- Specifying units of measure can help promote a professional look.
- Designer has more control of the appearance of the web site.
- Browsers that do not recognize CSS will still display the page (but it may not be attractive).
Types of Style Sheets
There are multiple types of style sheets including:
- Inline
Style definitions are created within the BODY of the HTML document and apply to that element only.
- Embedded
Style definitions are placed within the HEAD of the HTML document and applies to the full document. Works for the current file only. If needed for multiple files, the style sheet would have to be duplicated in each file (and updated).
- Linked (external)
The file contains only the style sheet information and can be referenced by multiple files using the <LINK> command. With one file, maintenance is simplified.
- Imported (external)
The file contains only the style sheet information and can be referenced by multiple files using the <@import> command. With one file, maintenance is simplified. With an imported style sheet, the HTML file can also use inline and embedded style sheets.
This collection of documentation for CSS contains information for creating embedded and external style sheets. The documentation also covers how to convert an embedded style sheet to a linked style sheet.
Cascading of Style Sheets
When multiple style sheets are used within a document, the order of inheritance is applied. In general, the order of inheritance is:
- !Important
- Inline
- Embedded
- Linked
- Imported
- Default browser styles (set by the user)
If there are two instructions that conflict with each other and they have equal hierarchy, the last instruction will be applied.
CSS and Text
The ability to efficiently format text helps promote consistency among your web pages. Basic text formatting includes color and size. Advanced formatting includes paragraph control. If you can format the text and paragraphs of your web pages without style sheets, you know almost everything you need to know for style sheets.
For additional information on text and paragraph formatting, refer to the Dreamweaver documentation.
CSS and Layout
Style sheets provide the ability to position elements on the screen. The W3C suggests the use of style sheets for layout to improve the accessibility of pages by those with disabilities. Due to various levels of support for CSS by browsers and different interpretation of the codes, this is not always feasible.
