How Cascading Style Sheets Improve HTML

CSS (Cascading Style Sheets) was a technology recommended by the World Wide Web Consortium (W3C) in 1996. An easy way to understand the purpose of CSS is to view it as an addition to HTML that helps simplify and improve web page design. In fact, some CSS effects are not possible via HTML alone.

Another advantage of CSS is that it allows you to specify a style once, but the browser can apply that style many times in a document. For example, if you want some of the pictures displayed in your website to have a thin, blue frame around them, you can define this frame as a style in your CSS. Then, instead of having to repeat an HTML definition of the thin and blue frame — each and every time you want that particular frame — you can merely insert the CSS style as an attribute for each graphic element that you want framed.

Put another way, you use CSS to define general rules about how the elements in your web pages behave and how they look — where they’re located, their size, their opacity, and so on. Then you can merely refer to the rule’s name whenever you want to enforce it within your HTML page.

Here’s a CSS rule that defines a couple of qualities you decide to apply to your largest headlines, H1:

<style>
H1 { font-size:16pt color:blue;}
</style>

With this CSS rule in effect, any HTML code containing an H1 element is automatically rendered in 16-point type and colored blue: