AbleStable®
go to Reviewsgo to Servicesgo to Registered Usersgo to Resource Centrego to AbleStable: Helpgo to About Us
go to AbleStable: Home Articles
go to Search

go to Exhibitions Centre
  Web Design: advice and help to improve your web site
go to Help
go to Resource Centre
go to Library
go to Articles
go to E-Books
go to Glossary
go to Reviews
go to Web Link
Library > Articles > Web Design > 015

E-mail this web page address to a friend or colleague
Enter their email address below (no record is kept of this action)

     

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

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Combination Style Sheet Example</title>

<link rel="stylesheet" href="mystyle_1.css" type="text/css" />

<style type="text/css">

<!--

p {
font: 13pt Verdana;
}

-->

</style>
</head>

<body>

<h1 style="font-family: Times; font-size: 22pt;">
A Midsummer Night's Dream</h1>

<p>Act I Scene I</p>

<p>Either to die the death or to abjure <br />
For ever the society of men. <br />
Therefore, fair <a href="hermia.html">Hermia</a>,
question your desires; <br />
Know of your youth, examine well your blood, <br />
Whether, if you yield not to your father's choice, <br />
You can endure the livery of a nun, <br />
For aye to be in shady cloister mew'd, <br />
To live a barren sister all your life, <br />
Chanting faint hymns to the cold fruitless moon. <br />
Thrice-blessed they that master so their blood, <br />
To undergo such maiden <a href="pilgrim.html">pilgrimage</a>; <br />
But earthlier happy is the rose distill'd, <br />
Than that which withering on the virgin thorn <br />
Grows, lives and dies in single blessedness.</p>
</body>
</html>

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:

<head>
<link rel="stylesheet" type="text/css" href="molly1.css" />
<link rel="stylesheet" type="text/css" href="molly2.css" />
<link rel="stylesheet" type="text/css" href="molly3.css" />
</head>

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



     
       
 
Authors background

Molly E. Holzschlag

Deemed one of the Top 25 Most Influential Women on the Web, there is little doubt that in the world of Web design and development, Molly E. Holzschlag is one of the most vibrant and influential people around. With over 25 Web development book titles to her credit, Molly currently serves as Communications Director for the World Organization of Webmasters.

As a steering committee member for the Web Standards Project (WaSP), Molly works along with a group of other dedicated Web developers and designers to promote W3C recommendations. She also teaches Webmaster courses for the University of Arizona, University of Phoenix, and Pima Community College. She wrote the very popular column, Integrated Design, for Web Techniques Magazine for the last three years of its life, and spent a year as Executive Editor of WebReview.com.

Find Molly's Web Site at www.molly.com. Molly Holzschlag can be contacted by emailing her at molly@molly.com
.

Although our contents are free to browse, copyright resides with the originators of all works accessed at AbleStable®, and unauthorised copying or publication of our site contents is strictly prohibited. 

AbleStable © 2002-2007
 
     
       

 All Material: AbleStable © 2002-2007
go to Frequently Asked Questionsgo to Feedbackgo to Press Centrego to Privacy Statement