Cascading Style Sheets (CSS)

A Growing Dynamic Technology in Web Design

Cascading Style Sheets (“CSS”) are documents that control the layout of your website’s design. A CSS is just a file like any individual WebPage. This file has a .css extension.

Whether you have 2 pages or 200 pages on your website, a CSS allows you to make a change to just one file and have that change reflect throughout the entire website.

A website that does not utilize CSS technology will require manual updating of all the WebPages to make their design uniform. This might be feasible if you have 2 pages on your website.

But what if you have a large site with 200 pages? CSS just makes life easy! It’s a must for larger websites. A common question I often get from visitors is how to create frames on the side of a webpage.

A frame, or margin is an area on your WebPage you can block off to use for a menu or advertisements. Your website’s content typically stays between the frames or margins. CSS allows you to set these margins and make them look uniform from one page to another.

[Tip: Do not specify values and rather use percentages. For example, do not specify your left margin to be 2 inches or X amount of pixels. Rather, specify the size in terms of percentage of the entire screen.

An example might be to say left margin = 3%. This translates that you want 3% of your website’s screen view to be the left margin. The reason for this is because your website may look different to your visitors depending on the Internet browser they are using and the resolution settings on their monitors.

If you specify sizes in percentage terms, your website will look the same to everyone as percentages are usually relative and not specific.]

The Two Kinds of CSS:

You can create an Internal and an External style sheet for your website. An external style sheet is what will allow you to make mass changes by editing just this one file.

You will have to link all pages you want affected to the main external style sheet. The link is established by inserting a simple < link > tag within the page’s < head > tag.

Internal style sheets are exactly what they sound; internal to one particular WebPage. This is also established by inserting a short HTML tag within the page’s < head > tag. Your specifications within the tag will determine the unique design for that one particular WebPage.

The CSS code is a short HTML tag line followed by the properties you specify. You can have multiple properties (font, text, background specifications, etc) within the same tag. Always remember to include your specifications within the < head > tag of your CSS file and not in the < body > tag.

Many website operators often have multiple style sheets saved and often switch around their use to give their websites a fresh new look. To a visitor it may seem like months and months of work was done to makeover the website. In reality, it takes 10 minutes to revamp your website’s look through the use of CSS.

The goal of using CSS is standardization. Using CSS allows you to control the way certain elements (font color, size, links, and website background) of your website look. It brings an element of consistency to the entire website.

The discussion on this WebPage is a basic introduction to Cascading Style Sheets. If you’d like to learn more I recommend the CSS Zen Garden to further understand CSS and its benefits.

Here is another very good resource for a comprehensive discussion and tutorial selection on CSS.

I also highly recommend the following books from Amazon whether you are a beginner or a pro:

CSS: The Definitive Guide

This guide will provide you with a comprehensive guide to Cascading Style Sheet implementation, along with a thorough review of all aspects of CSS.

This new edition includes content on positioning, lists and generated content, table layout, user interface, paged media, and more.

This book is your indispensable guide to cutting-edge CSS developmentall you need to work your way up to CSS professional.

You will learn to:

• Plan, organize, and maintain your stylesheets more effectively.
• Apply the secrets of liquid, elastic, and hybrid layouts.
• Create flickr-style image maps, remote rollovers, and other advanced CSS features.
• Lay out forms using pure CSS.
• Recognize common browser bugs, and how to fix them.