Introduction

Here, we'll look at what CSS actually is, and why it's a perfect fit for HTML.

What is CSS?

CSS stands for Cascading Style Sheets. CSS is the standard language for defining styles on web pages. Although CSS is more widely known for its application in HTML documents, it can be used for defining styles for any structured document format (such as XML for example).

Styles are set using CSS properties. For example, you can set font properties (size, colors, style etc), background images, border styles, and much more.

CSS History

CSS has gone through some major changes since CSS level 1 became a W3C recommendation in December 1996. CSS1 describes the CSS language as well as a simple visual formatting model. CSS2, which became a W3C recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.

As of this writing, CSS3 is currently under development, and includes more advanced features such as animations, background gradients, multi-column layouts, border images, and more.

HTML vs CSS

It's not really "HTML vs CSS". In fact HTML and CSS are the best of friends! CSS is a supplementary extension to HTML. Here's what each does:

HTML: The purpose of HTML is to provide document structure and meaning. This is particularly true with the introduction of HTML5. You use HTML to specify what elements go on the page (eg, headings, paragraphs, tables, images, etc). Each of these elements (as well as their attributes and attribute values) have a certain meaning.
CSS: You use CSS to specify how those HTML elements look. But not just how they look, how they are presented. After all, you can use CSS to provide styles for speech output (for example, for users using a screen reader). So, you can write an HTML document without being concerned with its presentation, then use CSS to specify how it will be presented within any given context. Not only this, but you can change the CSS without having to change the HTML. In other words, you can "plug" a style sheet into an HTML document and the HTML document will immediately take on the styles of that style sheet.

Example

Before

Here's an example that uses HTML only. No CSS involved.

After

In this example, we add some CSS.

All we did was add the following code to the second example:

Go ahead and "cut & paste" the <style> tags and everything between them from the second example into the first example to see how it affects both examples.

So yes, you could create an HTML document without CSS, but it will probably look like it was created back in 1995!

Next we'll look at the CSS syntax.