An Introduction to CSS (Cascading Style Sheets)

An introduction to CSS (Cascading Style Sheet)CSS is an abbreviation and it stands for Cascading Style Sheets. Novadays, it goes hand in hand with HTML to form all the modern web pages (you should also include JavaScript to this lovely couple)

In the old dark ages of web design, there was only HTML and HTML was designed only to define the content, not the style. Like;

 

<p> I am a paragraph. The tags that enclose me describe what I am. Not how I look.</p>

 

In this example, <p></p> tags “define” that what they embrace is a paragraph. They tell nothing about how this paragraph will look.

In 1997, with the introduction of HTML version 3.2 (by the way, this was the first HTML version developed entirely by the World Wide Web Consortium- W3C) tags like <font> and color attributes emerged.

Now, the front-end developers had tags in their pockets to style web pages much easier than before. But there was a huge challenge; to be able to make a global change, let’s say “change the font color” of a particular website, they had to change each and every page one by one. It was a real time consuming and error-prone process.

To overcome this hassle, W3C introduced CSS (And still maintains and develop it. Here is the official page of W3C’s Cascading Style Sheet Homepage). Although it was introduced at the end of 1996, it hadn’t been widely used until the release of MS Internet Explorer 5 in 2000.

Think about this example; You are a web designer. You began to develop a website which consists of 245 pages. When you are just about to complete your gigantic monument, you suddenly realized that the fonts of the headers are too thin. You decided to change the headers’ fonts with bold ones. In the old days, what you had to do was to open each and every of those web pages in your favorite text editor and put <b> </b> tags around your headers. What a time consuming effort !

After CSS, instead of placing <b> tags all over your website, you can achieve your goal by creating a seperate .css file which tells the browser how to handle the headers (for our example bold headers). Like this;

 

h1 {
font-weight: bold;
}

 

With the introduction of CSS, two different abstraction level emerged : One for the content (HTML) and the other for the styling and design (CSS).

CSS codes are not embedded inside the HTML files, they are stored in external files with .css extensions instead. This way, one CSS file can be applied to many pages (or more than one CSS file can be applied to a single page) or even a complete website. If you want to make a global change to a website, all you have to do is to change a particular CSS file which provides the style formatting and design.

By using CSS files for your website’s style and design, you benefit from;

  • Seperation of content and style,
  • Easier modification of your website’s style and design,
  • Format and design consistency throughout your website.
  • Reduced bandwidth (less code = lean page)
  • Less storage space (less code = less storage space)
  • Faster page loading (less code = faster loading)

The current release of CSS version is 3. Unlike CSS 2, which is a large single specification, CSS 3 has four formal recommended modules. These are : Media Queries, Namespaces, Selectors Level 3 and Color. Because there are 4 distinct modules in CSS 3, there won’t be a single CSS 4 version. But all of the modules will be updated and have additional features seperately.

CSS changed the way to design and style webpages. It is absolutely a prerequisite for any web designer to comprehend CSS in details.

Tolga Ayan

Writes articles about WordPress, CSS & Related Web Technologies. Resident of Alpharetta, GA.

We'll be glad to hear your comments !