AbleDesign - Tutorials
Web Design Tutorials - Advanced Design Considerations
Cascading Style Sheets (CSS)
Cascading Style Sheets, when used with discretion, can be a very powerful tool to assist in the clean and consistent presentation of your web site. Why do I say, "when used with discretion?" The major drawback to CSS is that it is not evenly supported across different browsers, and not supported at all in some older browsers. Thus, if you depend on CSS for complex formatting of your web site, you run the risk of it looking horrible to some visitors.
Ok then, what exactly is CSS? The name pretty much describes what it is (aside from the non-descriptive Cascading, which refers to the order in which CSS items are interpreted) -- a section of code that can be applied to individual or numerous pages (sheets), either externally or built into the pages, allowing you to easily format them (style). This is very useful for specifying the font you wish your site headers to be viewed in, such as Arial 14 point bold.
Below is an example of the CSS used for this page. This would be placed before the </HEAD> tag of your HTML page:
<style type=text/css>
<!-- // Hide
body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; }
td { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; }
a:link { text-decoration: none; font-weight: bold; color: #0000FF; }
a:visited { text-decoration: none; font-weight: bold; color: #491084; }
a:hover { text-decoration: underline; font-weight: bold; }
small { font-size: 8pt; font-family: Arial, Helvetica, sans-serif; }
.head { font-size: 18pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #990606; }
.subhead { font-size: 12pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #2A4272; }
// End Hide -->
</style>
Much of that is pretty self-explanatory, if you take a moment to look through it. font-family: is where you declare the font type for that area, such as throughout the page (body) or within tables (td). You can specify the font-size:, color:, and whether or not it is bold or links are underlined.
Of course, this only takes care of the one page it is included in the HEAD section of. What about for applying the same CSS across many pages or site-wide? Piece of cake! There are two basic approaches:
- Place the above CSS declaration section within a SSI file that is included in the page before leaving the server to be viewed.
- External Style Sheet
Option 2, using an external style sheet, is really pretty similar to the concept of SSI, just that the method of calling the style sheet is specific to CSS. If you have a style sheet named stylesheet.css at root level, you might call it like:
<HEAD>
<LINK REL=STYLESHEET HREF="/stylesheet.css" TYPE="text/css">
</HEAD>
The options with CSS are nearly limitless. This is a simple example of how it can be used quickly and easily in almost any situation. For a fairly extensive list of CSS information from the HTML Writers Guild, please take a look at:
CSS Frequently Asked Questions
A more complex and much less predictable use of CSS is to position elements on the page. CSS can take the place of standard table positioning and precisely position elements to exact pixel specifications. However, as alluded to previously, this runs into numerous potential browser and platform (i.e. mac vs. pc) pitfalls.
For further CSS reading, as well as numerous examples and bug workarounds, RichInStyle.com offers a wealth of information. About.com also offers several CSS tutorials from a variety of authors. Additionally, Webmonkey provides some well written tutorials to get you up and running with CSS.
