CSS: The True Language of Web Design: Part 1 | Part 2

Contributor: Molly E. Holzschlag, Communications Director
World Organization of Webmasters

Part 2: primary concepts and methods found in css

Learning backwards. It's a phenomenon common to human foibles-and Web development. But, as we strive to keep up or move ahead with the technologies we use to build the Web, sometimes we find that hindsight is indeed 20/20, giving us opportunity to clearly see where we've been and how we got here. Knowing our history can certainly help us serve our future with more innovative solutions.

In part 1, I described the importance of separating document presentation from document structure. This process helps streamline our Web documents and move us into a future where document management, portability, and accessibility all co-exist with innovative visual design. Of course, this means looking back at the way we've written our Web markup, and it also means that we need to focus our studies on presentational design-which in terms of markup means really learning CSS.

As most WOW members are already well aware, CSS is the broad term used to refer to the application of presentational properties to documents. In this case, think of a style as any kind of design characteristic: typeface, background, text, link colors, margin controls, and placement of objects on a page.

So why should you use style sheets if markup can do at least some of this work by itself? The developers of HTML originally intended for HTML to be only a markup language, responsible for the basic structure of a page, including body, headers, paragraphs, and a few specific items such as bulleted lists. Web designers and browser developers are the ones who have pushed and pulled at HTML to make it accommodate aspects of presentation, and as a result HTML and XHTML have inherited this legacy.

To gain some separation between HTML's original function as a structural markup tool but still offer a powerful addition to the designer's toolbox in terms of style, Cascading Style Sheets were developed. In fact, as of the HTML 4.0 recommendation, many of the style-oriented elements (such as <font>) were deprecated (considered undesirable and may not be present in future language versions) in favor of CSS.

CSS is not a difficult language per se. But it is complex. Now that you know a little about the history and rationale of CSS, it's time to learn backwards and discover what the concepts of CSS embrace in theory, and how that in turn becomes practice. In this article, you'll learn important topics such as cascade and inheritance, and various methods of delivering style to a document.

Style Methods

Style can be delivered to a document by a variety of methods including:

• Inline

This method allows you to take any tag and add a style to it. Using the inline method gives you maximum control over a precise aspect of a Web document. Say you want to control the look and feel of a specific paragraph. You could simply add a style="x" attribute to the paragraph tag, and the browser would display that paragraph using the style values you added to the code.

• Embedded

Embedding allows for control of a full document. Using the style element, which you place within the head section of a document, you can insert detailed style attributes to be applied to the entire page.

• Linked

Also referred to as an "external" style sheet, a linked style sheet provides a powerful way for you to create master styles that you can apply to an entire site. You create a main style sheet document using the .css extension. This document contains the styles you want a single page or even thousands of pages to adopt. Any page that links to this document takes on the styles called for in that document.

• Imported

This method works similarly to linked style except that it uses the @import rule. Although I won't discuss imported style in this column, I will in later columns when I discuss layout methods.

• User defined

These are style sheets that you can create to override any other style sheets. You can learn more about how to create a user defined style sheet via the external resources I've provided in the resources sidebar.

Let's move on to learn a bit about the way hierarchies and relationships in CSS work.

Cascade And Inheritance

One of the powers of style sheets is that there is a hierarchy of relationships. Cascade in this context refers to the order in which style is applied. Multiple sheets and types of sheets can be used, each one being applied one after another. This creates a hierarchy of application.

For example, you can combine inline, embedded, and linked styles, or any number of individual types of style sheets, for maximum control. Say you have a large site that you're controlling with a single style sheet. However, you have a page on which you want to alter some of the styles. No problem! You can simply place the modified style as an embedded sheet within the individual page. The browser will first look for the embedded style and apply that information. Whatever isn't covered in the embedded sheet the browser will seek out in the linked sheet.

You also can override both styles by adding an inline style. When all three forms are in place, the style sheet[nd]compliant browser looks for that style first, then the embedded style, and then the linked sheet; it reads the information in that order.

I've created a page with a link to a style sheet, an embedded sheet, and some inline styles, as you can see in Listing 1.

Listing 1: Linked, Embedded, and Inline Styles applied to the same page

In this case, one concept of cascade can be seen in action. The inline style takes precedence over the embedded style, and the embedded style takes precedence over the styles in the linked sheet. In a sense, the linked sheet becomes the default.

Another example of a cascade concept within CSS is the use of multiple external sheets in the same document:

The last style sheet in the list will first apply any styles that aren't in the middle one, and the middle one will then apply any styles that aren't in the first one. This is another example of cascade.

Another aspect of CSS is inheritance. This concept defines specific elements as being parents, and elements within those elements as children. Take for example the body element.

This element contains all other markup that affects the way the content of the page is displayed. Elements within the body are considered children of the body element.

This concept continues down the markup hierarchy, referred to as a tree. Think of it as a family tree, in fact. So, if you have a paragraph, the elements within that paragraph are the children of that parent, and so on. This system is referred to as containment hierarchy. Listing 1 shows how containment hierarchy works.

Inheritance claims that unless you specify differently, style will be inherited by the child of a parent. For example, if you write a style asking that a specific text color be applied to a paragraph, all tags within that paragraph will inherit that color unless you state otherwise. Of course, this is an ideal that is unfortunately not supported in many Web browsers.

I'm hope that readers will take time to send in their feedback about this article. What do you think of the content? Does it address your needs at this time? Please email me at molly@molly.com and let me know.


CSS: The True Language of Web Design: Part 1 | Part 2



Book Reviewed at AbleStable®

Cascading Style Sheets: The Designer's Edge by Molly E. Holzschlag