Have you ever taken on a remodeling project? Even something as simple as painting your bedroom walls can turn into a major headache. What if you could snap your fingers and instantly change the color of the walls in every room of your house?
Now think about your website — the online house for your business. By using a file called a Cascading Style Sheet (CSS), you can change the look of your entire website with just a few keystrokes.
What is a Style Sheet?
A style sheet, or to use its full name, a Cascading Style Sheet (CSS), is a specially formatted file that tells a web browser how pages of a web site should be “drawn.” The abbreviation CSS refers both to the file containing the formatting instructions and to the specific conventions and “language” used in the file. Using this language, a web designer can do a variety of things to control every aspect of site layout.
What Can I Do with CSS?
So what can you control in CSS? Here are just a few items you can define in minute detail:
- Formatting of section headings
- Default formatting for page content
- Background graphics on the website
- The visual appearance of links
- Placement of images
- Font colors
- Background colors
CSS Zen Garden is a great example of how you can control a site’s layout with CSS:
http://www.csszengarden.com/
Again, this is just a brief list of the more common uses. In reality, you can control the way any text or graphic element displays on your site using CSS. Which leads us to the “Cascading” part of the style sheet.
Why is it Called “Cascading?”
It’s called a Cascading Style Sheet because elements defined in a higher-level style sheet cascade down to lower-level style sheets. How would you use this cascade effect?
You would use this cascade effect if you had a website where you wanted consistency for major site elements such as the site navigation header, but you wanted some differences in the way sections of the site looked. For example, a site with multiple contributors might have a common header but each contributor can customize the background color and default fonts in their section.
The common header and other site-wide elements would be defined in a high-level style sheet. Each contributor would then have their own lower-level style sheet to control elements not common to the whole site. Any elements defined in the high-level style sheet would cascade down to the lower-level sheet. So for example, if the high-level sheet defines how H1 tags are displayed, the lower-level sheet doesn’t have to copy this definition — it cascades down from the high-level sheet.
In most cases, you can get away with using a single style sheet without worrying about the cascade feature. But in sites where it’s important for sections to be visually different, this cascading feature comes in handy.
Now that we’ve covered the cascading and the style features of CSS, let’s take a look at its advantages.
What are the Advantages of CSS?
The biggest advantage of CSS is the ability to change the look and feel of an entire website simply by changing the formatting in a single file. Whether your site has 5 pages or 500, a change to your CSS will instantly affect all relevant pages.
Pages that reference a CSS have cleaner-looking code because all the formatting stuff is hidden away in a separate file. These nice, clean files are easy for humans to read and, just as importantly, make life easy for search engines spiders that crawl your site. The spiders can quickly and easily index your headings, text and images without stumbling over formatting information.
When formatting information is contained in a single file or group of files, site maintenance becomes much easier. As previously mentioned, changing the appearance of the site becomes much easier. If content on a specific page needs to be changed, the web designer doesn’t have to scan past a bunch of formatting code to get to the section that needs editing.
So now we know how CSS helps with formatting and editing and how the cascading feature works. But when would you use CSS?
When Should I Use a Style Sheet?
You should use a separate style sheet any time you have a website with more than one page on it. If you have a single-page website, creating a CSS file is probably overkill. In this case you can just include the CSS code at the top of your page.
As soon as you get more than one page on your website, it’s time to pull the CSS out into a separate file. Yes, it takes a little bit of work up front but it will save you hours of time later on.
Summary
In this article we covered a high-level overview of cascading style sheets. You learned that you can easily change the look and feel of an entire website simply by updating a central CSS file. You also learned how the cascading effect works, and when it makes sense to use CSS. Now if only I could change the paint in my kitchen as easily as changing the background color of my website.
