CSS - Cascading Style Sheets - are a way of getting more value out of every line of HTML or XHTML, making your Web pages more attractive and easier to write. In addition, they make Web pages more logical and easier for a wide variety of software to deal with.

In this module, we'll look closely at CSS, what it is, what it's good for, what its drawbacks are, and how it relates to HTML. When we're done, you should have an appreciation for CSS and a general idea of how it works.

CSS - What is it?

Cascading Style Sheets

What is Style?

• Style as opposed to content.
• Style is the way a Web page looks, how it's laid out, what colors, fonts, and positioning it uses.

What kind of Sheet?

• A sheet of paper - well, a virtual sheet.
• A list of rules for how to style a page.

Why Cascading?

• A series of styles can be defined, one set forming the basis for the next.
• You don't have to put all your styles on one sheet - they can tumble down like waterfalls from the top down.
• The concept of the cascade is discussed in more detail in module X21c.

CSS is a standard of W3C, the World Wide Web Consortium, the same group that standardizes HTML. W3C always tries to gain consensus before making anything a standard (see module NG07c), so it has taken a number of years to reach the point where it is now - and it's still under development.

The CSS standard is released in stages, each stage called a "level" and offering somewhat different features.

CSS was designed to fix a number of problems with HTML:

• HTML was not originally a language for determining styles.
• As demand for styling HTML grew, tags were added in a disorganized way. The result is a hodge-podge of features that don't all follow the same rules
• HTML tags were originally designed to outline the structure of a document. They are now almost always used to control the appearance. This means you - or more importantly, Web-reading software - can't tell the structure of an HTML document by looking at the tags.
• Because HTML is forced to do things it wasn't originally designed for, it's more complex to design pages than it should be.
• There are stylistic features HTML can't produce at all.

Separation of structure from style: Styles say nothing about the structure of a document - they simply modify existing HTML structural features, giving designers the power to determine what any given tag looks like. That means designers can use HTML tags for their original, structural purposes, while determining quite independently what each part of the page will look like.

Adding new features: There are countless features available through CSS that have never been possible with HTML, and more are being added as newer levels of CSS are introduced.

Using CSS gives designers several advantages over using straight HTML:

• CSS has more features than HTML
• CSS is easy to use
• The same styles can be used on many pages
• Cascading provides lots of flexibility
• Files can be more compact
• Maintaining large Websites becomes simpler
• W3C is moving as fast as possible in this direction, so continued use of HTML in "deprecated" ways will become more and more difficult

No silver lining without a cloud, of course:

• The syntax is different from HTML's, and somewhat wordier
• Browser support has been spotty
• You can never please everyone - CSS doesn't provide all the features some designers would like

CSS is a design tool, and as such primarily affects designers. But though users may not be aware that a site uses CSS, they can still reap benefits from designers who use it.

• CSS-based sites are smaller, so downloading is quicker
• CSS has the potential for providing a choice of styles depending on the user's needs and devices
• Savvy users can customize their own styles sheets to overcome disabilities and individualize their experience

CSS and HTML are designed to work together:

• HTML is designed to provide structure
• CSS is designed to provide styling and presentation

Styles can be used in Web pages in three ways:

1. In-line CSS: a style is defined on a one-time basis for an individual block of text or imaging;
2. Internal style sheets: A set of style rules can be placed in the <head> area of a page;
3. Exernal style sheets: The style rules can be put in a separate file, and used by as many Web pages as you like.

Here's an example of an in-line style rule. This one defines the formatting of two different paragraphs:

In-line CSS simply puts the style "rules" in the individual HTML tags. This example shows two paragraph tags:

• First, a very simple rule italicizing the font in the paragraph. Here are a couple of questions to consider:
  • Why not use the <i> tag - much simpler!
    Answer: it's deprecated, and will be unavaliable in later versions of HTML.
  • Then why not use the <em> tag, which is not deprecated and produces italics anyway?
    Answer: <em> is a structural tag indicating that this portion of text is especially important. If the designer did not want to indicate that this text is "emphatic" (the meaning of the tag <em>) this technique allows a paragraph to be put in italics without implying emphasis.
• The second <p> tag has a more complex style rule governing the paragraph's font family ("typeface"), size, color, and background. (You can't do backgrounds at the paragraph level in plain HTML!) The purpose of this style rule is probably to make the license agreement as difficult to read as possible, since the details might discourage some potential buyers.

Defining the style in the <head> area allows you to save the effort of re-defining a style each time you need it. Here's a brief example (which doesn't work in Netscape 4.x) of CSS defined in the <head> area of a page:

The rules here are just the same as the ones above, but they have been moved to a special area within <style></style> tag pairs. This also illustrates two ways styles can be defined:

• In the first case, we used an existing tag, <em>, and stated a rule for how we want it displayed (font-style italic and color red). This will affect all the text between <em> and </em> tags in the body of the page.
  As you can see by looking at the first paragraph in the <body>, no modification is needed to the <em> tag, and the display (at right) comes out in red italics.
• In the second case, we've created a new class, which can be applied to any tag or HTML element, as appropriate. Note the dot "." in front of the class in the rule definition. This is the mark of a class.
  The class is applied to a paragraph by putting "class=whatever" in the <p> tag.

What are the main advantages of putting CSS in your head? What you define in the head can be used as often as you like in the body. You don't need to re-type the rule every time - just use the tags or mention the class in a tag. This is one reason why CSS saves space.

Also: don't like the way it looks? Change it in the head, and it's changed everywhere in the body. This is one reason why CSS saves time.

In most Websites, a style sheet is prepared as a separate file and either "linked" or "imported" into each page. Here are two examples built on the previous ones:

Linking

The link element is part of html; it goes in the head element. Since stylesheets aren't the only thing that can be linked, it's necessary to add attributes for the relationship and mime type as well as the location href.

Importing

The @import statement is part of the CSS language, so it goes inside a style element in the head of a document. If style rules are specified in the style element, they should come after the @import (though not all browsers enforce this rule). Netscape 4.x does not understand the import method.

With link or import, you can change the style sheet and have all the Web pages immediately show the results. Quite a time-saver for large Websites!