CSS:Start

Main Page >> Website fundamentals >> Workbook >> CSS >> Getting Started

Introduction

Before we begin, I must point out that Cascading Style Sheets (CSS) is a massive topic – I could write several workbooks on this topic alone. This chapter will give you a basic overview of CSS, why it is useful, the various ways it can be used, and some simple CSS commands that should show the strengths of using CSS.

Want to see what CSS can do for your site? CSS ZENGarden

Why CSS?

Simple web sites consist of a few web pages. Complex, corporate sites consist of many hundreds of pages. In such a large organisation, on occasion, corporate logos and colour schemes change. When this happens, companies invest massive sums of money on "re-branding" – changing the entire look of everything used in the company that has its colours or logos. The cost involved is huge, but the time it takes to update all the tangible items that a company has is also overwhelming. A website with many hundreds of pages that needs to change the background image or colours on every page can take a massive amount of resource to accomplish.

What if all the colours, logos and formatting were stored in one document and all the web pages referenced that one document, so that all the colours are the same on every page, all the images are in the same place and the same on every page, and any time a change was required, you needed to update just one line in one file and the entire website was updated? The answer: Cascading Style Sheets.

This is one of the more powerful features of CSS, the ability to have an external document that controls all the formatting, and referring to that document in any page you create. This is called an External Style Sheet, and we'll look at this later in this chapter. Before we get to external sheets, let's have a look at some of the things CSS allows us to do.

Ready to move on?

If you're happy that you understand some of the fundamental concepts presented here, let's take a look at CSS:Basics

Related Pages

<categorytree mode=pages>CSS</categorytree>