Cascading Style Sheets (CSS)

Crafting Easy Site Wide Changes

Cascading Style Sheets (CSS)

How do you make it easy to change your site? One simple solution is to use cascading style sheets to control the display of your information. When the Web was created, the idea was to keep layout and information separate from one another. Using external style sheets allows you to change virtually every aspect of your site by making changes to one file. To do this, put the layout in a sheet called ‘yourchosenfilename.css’ and reference it in your other web pages. A code similar to the following would go in the head section of your pages.

For an example of how powerful CSS is, take a look at the CSS house. A couple of the more popular resources on the web about cascading style sheets are the CSS Zen Garden and W3 school’s CSS tutorial page. You may also want to view the official W3C CSS guidance page.

Effects of Change on Branding

On a daily, weekly, or monthly basis you can choose to change your font type, layout, colors…just about anything. You can do it in minutes and track the results. Some branding experts, however, such as Rob Frankel, believe that changing too frequently could hurt your brand.

Make sure you have a distinct idea of why and how you want to change before you start altering things. If you realize many things are completely broken, then a complete makeover might be in order, but typically it is best to change and test only one thing at a time so you know the exact effects of any change.

How CSS Saves Time

You can link each page of your site to an external style sheet to control the display. Many of the repetitive changes that would be made on every page can be done simply by changing one file. This may not seem like a big deal while creating page five or six, but if your site has 200 pages you will be glad that you used CSS!

CSS are not necessary for smaller sites, but are a great idea if you are building a large content-based site. They also can help to improve the content-to-code ratio.

Server Side Includes (SSI)

Server Side Includes is an Apache server technology that allows you to include pages or parts of a page within another page without the negative side effects of using a framed-based navigation system. To include another file inside of a page, include the following code where you want the included page to appear.

The use of SSI for common elements, such as navigation or advertisements, work well to allow you to control your entire site by making simple changes to a single file. Between CSS and SSI, you can save literally hundreds or thousands of hours in your site design or re-design.

SSI also lets you include the date last modified or current date in the page. This is often how many of those generic one page sites have the current date in their sales letters.

On my Search Marketing Info site (Search-Marketing.info), I use SSI for the page footer, navigational tabs, local left column navigation, and right-side page ads.

SSI Without Breaking File Paths

Webmasters often start out with a smaller site and later decide that they should start using SSI or a dynamic content management system. To use SSI, many people change their file paths from .html or .htm to .shtml or .shtm. The problem with doing this is that it can break inbound links. You can get around this by modifying your .htaccess file.