Structure versus Design
The structure of a web page is the physical HTML elements (not the server controls) as opposed to the design which is the application of styles such as color, font size, or setting whether some text is bold. Cascading style sheets provide a mechanism for separating the structure of a page from its design. This is desirable because it removes duplication within the structure of a page. Fixing errors with styles that are declared inline with the structure of a page can be very time consuming: i.e. if a color=blue is declared on every td (table cell) within a page and the business decides that they all need to be red, the tag must be updated for every table cell in the page. Instead, if a style sheet is used to define that all td elements have color=blue, then the update only needs to be performed in one location.
Overriding Styles
Cascading style sheets get their name from the fact that they have a cascading inheritance model. If two style sheets or inline styles define style information upon the same element, the last style in the list will take precedence. What this means is that if a style sheet named global.css defines a style of color=blue on the td element, but an inline style on a page that includes global.css also defines color=red on the td element, then the td element will be rendered based upon which style came last in the page. If the global.css file is included before the inline style on the page, then the color=red style will be applied, otherwise if the global.css file is included after the inline style then the color=blue style will be applied.
Different style types
There are different style types that can be defined:
- Element styles are applied directly to certain html elements: i.e. td { color=red }
- Identifier styles are applied to elements with a particular id: i.e. #divContainer { color=red }
- Class styles are applied to elements with a particular class: i.e. .myClass { color=red }
Element Styles
Element styles are appropriate for situations where a particular style needs to be applied to all elements of a particular type. This can be used to satisfy requirements like "All table cells must have green text within them." The most typical use of element styles is for padding, margins, spacing, and other spacial based layout requirements.
Identifier Styles
Identifier styles are appropriate when controls with a particular identifier needs some aesthetic manipulation. This type of style application is used most rarely. Identifier based styles are quite restrictive to apply by virtue of the fact that they are only applied to elements with a particular identifier.
Class Styles
Class styles are applied to elements with a particular css class specified upon them. This is a very common form of style application because it allows a library of styles to be developed ahead of time and then leveraged during the development of the application. Developers of a page can then choose to use one of the styles from this library to apply design to their elements. If the library of styles is managed by a design department within the company, that department can retain control of the style information for that known class, allowing them to update the styles for the application without incurring additional work for the developers.
Shorthand Style Definitions
Certain styles can be written in shorthand. For example, consider the following definition for an all around margin of twelve pixels:
margin-left: 12px;
margin-top: 12px;
margin-right: 12px;
margin-bottom: 12px;
This can be rewritten in shorthand as:
margin: 12px 12px 12px 12px;
However, this can cause problems because not all browsers interpret the shorthand versions of the style definitions correctly. It is safest to define styles using the long-hand versions.