Adjust type size
Larger | Smaller
To see a summary of the advantages of CSS, please
view this Acrobat PDF file (file size: 34KB)
Advantages of CSS
To see the ability of CSS to change instantly
the look of a web page, please select a theme from the pull-down list below:
By Karen A. Vagts
When Hypertext Markup Language (HTML), an authoring tool for use with the World Wide Web (WWW), was introduced in 1992, it initially was conceived as a basic communication protocol, devoid of much design. HTML capabilities for page layout, text formatting, and other aspects of visual design and presentation were limited and tedious to use – a designer’s despair! Moreover, design specifications had to be applied to each HTML element individually, making global changes impossible. And in applying formatting, particularly through use of the notorious <font> tag as well as various "hacks" and excessive use of slow-loading tables, HTML code could become exceedingly messy.
With the introduction of the first version of the Cascading Style Sheets (CSS1) standard circa 1996, web authors now had tools that resembled what they used with graphic design and page layout software. In addition, CSS provided other advantages for both producers and viewers of web page (see the Acrobat PDF file embedded on this page for a summary of these advantages).
Although its advantages were obvious to many, CSS was not immediately adopted. One reason for this was the slow and inconsistent way in which the various web browsers applied the CSS standard (which is published by the World Wide Web Consortium (W3C); to this day, popular browsers like Microsoft IE Explorer, Netscape, Firefox, and Opera all offer their own take on various aspects of CSS (which means that web authors can never achieve absolute uniformity of their designs across all computer platforms or browser software and their various versions). Recently, however, as the WWW matures and as more sites migrate to current W3C standards, CSS is becoming ubiquitous and is the preferred approach for most new sites being built.
Back to TopCSS is not that difficult to implement. It consists of a series of rules or specifications that describe the visual aspects and sometimes the behavior of an HTML tag. These rules replace the HTML tag attributes as well as the font tag used in pre-CSS HTML. With one exception (see below), CSS is not contained within the HTML <body> tag.
CSS operates much like styles in Microsoft Word or in popular page layout software. A style can be applied to a single tag (or element) or to multiple ones. If you then want to change the style specifications, simply revise the CSS rule and all elements affected by that rule are automatically updated; such updates can apply to a single web page or to an entire web site.
A typical rule – in this case the redefinition of a paragraph <p> tag is written as follows:
p {
font-family: Georgia, Times, serif;
font-size: 10pt;
line-height: 14pt;
font-weight: bold;
font-variant: small-caps;
color: #669933;
text-indent: -15px;
}
Once you have created a style such as the one shown above, your <p> tag simply appears like this in HTML:
<p>This is a basic paragraph!</p>
Compare that to how you would have to achieve the same affect without CSS (and certain attributes like text-indent and font-variant are only achievable with CSS):
<p><font face="Georgia, Times, serif" color="#669933" pointsize="10"><strong>This is a basic paragraph!</strong></font></p>
Clearly, CSS produces cleaner and more manageable HTML, especially if you have using the the same element frequently and also if you are applying other web standards such as XML, JavaScript, and server-side technologies.
Back to TopEach CSS rule consists of two parts:
You can apply rules to HTML tags using several methods:
<p class=”urgent “>This is a special paragraph!</p>
CSS offers great flexibility in how individual styles are specified and this can be used to make the organization of style sheets more efficient. With heading levels, for example, you can specify individual styles for each level. However, if the levels share common elements, you can write a single specification for the common attributes and then specify a separate style for a unique aspect of a heading:
h1, h2, h3, h4 { color: black; font-family: Verdana, san-serif;}Back to Top
h3 {font-style: italic; size: 125%;}
Like HTML, CSS is ASCII-based text, which can be easily produced in a basic text editor like Notepad (although software like Dreamweaver and TopStyle offer WYSIWYG capabilities).
Within a web site, you can place CSS in one or more of the following locations:
<link rel=”stylesheet” type=”text/css” href=”css/mystyles.css” media=”all” />External style sheets are used to apply the same styles to more than one web page or even an entire site and to separate entirely the form and content of web pages (particularly useful when using XML and other standards). You also can use a scripting language such as JavaScript to detect a user’s browser software and platform and apply an appropriate style sheet accordingly.
<style type =”text/css”>@import url(css/mysyles.css); </style>
<style type="text/css">
<!--
p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 9px;
font-style: italic;
color: #006633;
text-align: justify;
}
-->
</style>
<p style=”color: blue; font-weight: bold;”>We love CSS!</p>In general, however, inline styles are to be avoided, particularly if they are applied to more than one element. Much like the old pre-CSS use of the <font> tag, they clutter HTML and they cannot be modified globally. For the example above, it usually is more efficient to create a class style and then apply it to the element in question:
<p class=”bluebold”>We love CSS!</p>
Note that the style options shown above are not mutually exclusive. You can combine the various options according to your site’s need and you also can use more than one external sheet. For example, you might want to create separate sheets for different types of tags: formtags.css, tabletags.css, etc. And you can apply different style sheets for different media, e.g. computer screens, printers, handheld devices, or Braille readers.
Back to TopCSS is enormously powerful but sometimes conflicts among styles occur. You might, for example, have a situation where you have a tag redefinition selector, a class selector, and an inline style that simultaneously specify the font color for a <p> tag. CSS gives priority to certain rules according to what is called the cascade (or a selector’s specificity).
With the cascade, the more specific rules, such as an inline style, override a higher level rule such as browser defaults, imported and linked style sheets, and styles in the head tag. If two rules have the same origin in a document, there are other forms of specificity that control which rules take precedent (it is best to consult the W3C's web site to fully understand how the cascade works).
Another feature that interacts with the cascade is the principle of inheritance: With certain CSS properties, an element assumes the value of its “parent” – a higher level element which contains it – unless the “child” is assigned a style that overrides the parental properties. Thus, if you specify a text font color in a <body> tag, all paragraph <p> elements within the body tag (the parent) will reflect these attributes unless you assign different attributes to the paragraph tags. Even then, the resulting appearance may depend on the order in which the various tag specifications appear. Therefore, it behooves every serious web designer to become familiar with how CSS works; the payoffs of such familiarity, however, will be enormous.
Back to TopCSS seems here to stay. At present, however, we are only in the early stages of seeing its power. Because most web designers seek to make their designs work in a range of browsers and because browsers are slow to implement the newer versions of the W3C CSS specifications, most web authors are conservative in their use of CSS and stick to the CSS1 standard. This initial CSS specification focuses primarily on formatting and on providing alternatives to the old-fashioned approach of applying styles directly to tags. CSS2, which builds on CSS1, offers many more exciting possibilities, including support for different media style sheets; page layout tools; aural capabilities; and more support for internationalization. At present, members of the W3C are refining the specifications for CSS3, which some browsers already are starting to implement.
Back to TopThere are some excellent web sites and books that reveal the power of CSS and explain how to use them. Here are some good places to start:
