Category Archives: Cascading Style Sheets

Murphy's CSS

I could have called this post Murphy’s Dreamweaver, Murphy’s Code, many things.

Last night, I presented on Web Standards and Dreamweaver to the Chicago Creative Coalition. It was both a challenging yet educational experience. I’ve been using Dreamweaver for 8+ years. However, since I’m a coder, I primarily develop web content in code view. The audience for this presentation was creative folks, very few though who create web sites on a regular basis. My goal was to illustrate the importance of adhering to a web standards approach when designing for the web. The tool for choice in this case, was the Dreamweaver WYSIWYG environment. It, and a surprising effect while creating a horizontal menu, would prove to create that Murphy’s moment. Continue reading

3 Comments

Filed under Cascading Style Sheets, Dreamweaver, Web Design

Giving the Full Presentational Power to CSS

Remember the days when <font> tags were the standard means of formatting our content? Our pages were polluted and bloated with them. I especially remember the kind of code authoring tools such as FrontPage would create:

<p><font face="arial"><font size="10pt">I especially remember the kind of code authoring tools such as FrontPage would create.</font></font></p>

I then remember when CSS was first announced by Microsoft (not that they created it). I remember the examples they used to show it’s power. Placing text anywhere on the page, even overlapping it. At that time, people like me thought it kool to be able to use these new tags in place of the numerous tags that littered our pages. I like to consider this the first generation of CSS usage. Here’s an example:

<div style="font-family:arial;font-size:13px;">I remember the examples Microsoft used to show it's power.</div>

The problem with this approach is that people started using <div> and <span> tags excessively. This was not necessary, as (X)HTML provides enough tags, or “hooks” into the code to properly manipulate the presentation of the content.

<p style="font-family:arial;font-size:13px;">I remember the examples Microsoft used to show it's power.</p>

This new found way to mark up the presentation was great … except, it was a new way to do the same thing. Our code was still as bloated with inline presentation code & attributes. So some leading designers started placing the CSS code in the head of the page.

<head>
<title>My Fascinating Page of Content</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family:arial, helvetica, sans-serif;
font-size:13px;
}
h1{
margin:0px;
font-family:
arial, helvetica, sans-serif;
font-size:18px;

}
...

This was a great step forward. However, it still added to the page size, and was a change management headache.

Then, people started thinking more efficiently. They started centralizing all their presentational styles in an external file. It made for easier site management and lighter pages.

<head>
<title>My Fascinating Page of Content</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">

...

CSS Best Practices

Note: The list below suggests a goal to move toward. The real world will always throw a curveball.

  • Always use an external styles file and either link or import the styles from the file. Avoid the lazy urge to implement inline styles. One way to use different styles for a given page is to give the page’s <body> tag an id. Then refer to the id in your styles. Same holds true for other page elements.
  • Design your pages and content semantically (structure with meaning). Avoid adding extra tags to hook styles to whenever possible.
  • Planning before implementation will always make for easier & effective styles usage.

Leave a comment

Filed under Cascading Style Sheets