Styling HTML-based Documents

Michael Corrin, University of Toronto, Biomedical Communications

Introduction

HTML was originally designed to deliver the content and structure of a document; It was a structural markup language and it was good at what it did.

Figure 1 (click here to open and close the image): An example of markup done by hand on a story. If I were to send the lower image to a designer they would see my markup and be able to layout my document with the document structure I suggested in mind. By the way, this little widget works thanks to Javascript and a little CSS.

In the early days of the web, when an HTML document was published on the Web, the author had to accept that its final appearance on a WWW connected computer was out of her hands. How the document was rendered on screen was entirely up to the web browser. As the internet grew and its audience expanded beyond the technical and scientific set, a new group of users who were very concerned with controlling the appearance of their pages emerged. Graphics people saw endless possibilities for this new media, the only problem was that the tools to create what they wanted didn't exist yet.

Eventually, HTML (versions 3.2 and 4.0) became corrupted as user agent manufacturers and web gurus started building stylistic tools into the HTML language. "Suddenly, a structural language started to become presentational."1 and HTML documents went from clean to dirty, becoming unpalatable code stews filled with stylistic content mixed in with the true, meaningful document content. Why would anyone care?

The solution? Separate style and content with style sheets.

Stylesheets

"Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced."2

Many stylesheet languages are in use today. Here are a few examples:

Document Style Semantics and Specification Language (DSSSL)
A computer language for specifying stylesheets for SGML documents.
Extensible Stylesheet Language (XSL)
A computer language that allows one to describe how files encoded in the XML standard are to be formatted or transformed.
Cascading Style Sheets (CSS)
a computer language that allows one to describe how files encoded in HTML are to be formatted.

CSS

A CSS stylesheet is basically a list of rules on how a user agent (e.g., Safari or Internet Explorer or a Mobile Phone) is supposed to render HTML elements (for example <h1>) in an HTML document. CSS stylesheets are composed in plain text files and are given the .css suffix when saved, e.g., myCSSfile.css.

In 1996, the World Wide Web Consortium publishes the specification for CSS1.

In 1998, the World Wide Web Consortium publishes the specification for CSS2 and then CSS2.1. CSS2.1 is the current standard. The upgrade to CSS2 included the addition of aural styles and element positioning tools.

CSS3 is in development

Forming a CSS rule

A CSS rule

h1 {color : blue; text-size : 12px}

The components of a CSS rule are as follows.

Selector

Declaration

Declaration block

Question: What are we saying in the CSS rule found at the beginning of this section? We are telling the user agent that, unless the user agent finds a more specific CSS rule, all h1 elements in our HTML document should be rendered on screen as blue text with the font size set to 12 pixels. We'll get into what I mean by a more specific rule later in this document.

Applying CSS styling to an HTML document

CSS can be applied to an HTML document in one of, or in almost any combination of, the following four ways:

  1. Inline styles
    The CSS is placed directly within the start tags of individual elements within the HTML document.
    Example: <p style="color:#0000FF;">Hello styling!</p> where the styling rules to be applied to the element are defined within the style attribute of the element (p or paragraph). Inline rules have the highest priority in the cascade, but more on that later.
  2. Embedded styles
    Styling rules are placed in the <style> element which is always inside the <head> element of the HTML document.

    Example:
    <head>
    <style type="text/css">
    <!--
    p {
    color:#0000FF;
    }
    -->
    </head>
  3. In an external file linked to the HTML document using the <link> element
    The file is linked using a <link> element in the document <head>. Use this method or method 4 to define styles that apply site wide.

    Example:
    <head>
    <link href="myCSSfile.css" rel="stylesheet" type="text/css">
    </head>
    The CSS file itself is a text file with a .css suffix in its file name (e.g. myCSSfile.css).
    Its innards look like this:
    p {
    color:#0000FF;
    }
  4. In an external file imported in to the HTML document using the @import url(fileName.css) directive in the <style> element.

    <html>
    <head>
    <title>Using import</title>
    <style>
    @import url(myCSSfile.css)
    p {
    color:blue;
    }
    </style>
    </head>
    </html>

Important CSS concepts

Inheritance

An HTML document has a tree structure. The trunk is the <html> element. The <html> element branches and encloses the <head> and <body> elements. The <head> and <body> elements are both descendants of the <html> element. Because they are one branch down from the <html> element, the <head> and <body> elements can be described as children of the <html> element and the <html> element as the parent of the <body> and <head> element.

Why does this matter? If an element has a style property, such as color, that is not formally defined, and is the child of an element that has the same style property formally defined, the child element inherits the property value of its parent element.

Example: In the following example, the color property of the div element is given the value blue. The <p> element is a child of the <div> element. The color property of the <p> element is not directly defined in any style rule. If the color property of the <p> element is not defined what colour should the text in the <p> element display as in the user agent? The "Hello world" text in the <p> element should be blue. Why? Because the <p> element color property, having no explicitly stated value of its own, inherits the value of its parent element's color property value, which is blue.

<html>
<head>content in here...</head>
<body>
<div style="color:blue">
<p>Hello world</p>
</div>
</body>
</html>

Some stylistic properties (but not all) are inherited by child elements of parent elements with a defined stylistic property.An example of a CSS property that is not inherited by child elements is the border property.

Specificity

This is a very important CSS concept. Learn the rules of specificity in order to save yourself endless hours of frustration. If something is not rendering as expected, expect that it is specificity that is causing the problem.

In CSS, specificity is a set of rules that a user agent uses to guide its descision as to which style rule to apply when rendering an element where multiple selectors apply to the same element. Let us expand on this tongue-twister.

When an element within an HTML document has two or more selectors that apply to it in its style rule definitions, the user agent must always decide which rule will win and render the element accordingly. For example, in the following HTML fragment, the <p> element in the body of the document is selected by two style rules: The descendent selector, div p, and the simple selector, p. Both target the <p>Hello CSS</p> element but the user agent does not display the text as red and blue. It chooses one rule and goes for it. Which one wins and how does it decide?

...<style>
div p {color:blue;}
p {color:red;}
</style>
</head>
<body>
<div>
<p>Hello CSS</p>
<div>
</body>....

In the above example, the "Hello CSS" text should be displayed as the color blue. This was determined using the rules of specificity. In the above example, the user agent takes the following steps as it attempts to render the colour of the <p></p> element. The user agent begins by looking for any selectors that have declarations that apply to the color property of this element. Finding two that apply, it calculates specificity for each selector. The div p selector is made up of two elements: div and p. By the rules of specificity, these elements are each worth 1 specificity point and so this selector has a score of 2. The simple p selector has only a single element and it is worth 1 specificity point. The user agent compares specificity scores between competing elements and the selector with the higher specificity score wins. In this case div p wins 2 points to 1 over the simple p selector.

Here are the basic rules:

Specificity example - view the source code, examine it and try to apply the rules of specificity yourself.

Cascading

"CSS is based on a method of causing styles to cascade togehter, which is made possible by combining inheritance and specificity." 3

What happens when the battle of specificity doesn't get the job done? What if two rules have equal specificity for the same element? Enter the cascade.

The cascade is essentially the last measure that a user agent will use to decide a style winner and it works in a fairly simple way. The CSS code is read in a linear way reading from top to bottom and starting with the first external style sheet imported using the @import method and ending with the last line of code in the internal style rules. The last applicable rule encountered wins.

cascading example - view the source code, examine it and try to apply the rules of the cascade yourself.

External style sheets and the cascade

1) <link rel="stylesheet" href="CSS_cascade.css" type="text/css" />

If you use the <link> element to include CSS rules defined in an external stylesheet, you can place one or many <link> elements anywhere you want, as long as they are a child of the <head> element. If the external stylesheet is loaded using the <link> element is placed after the <style> element, the rules in the <link> element will have more weight than equivalent rules in the internal <style> declaration.

2) @import url(myCSSfile.css)

If you use the @import url(cssFile.css); in the <style> element to import an external stylesheet, you must place it after the opening <style> tag.

Example:
<html>
<head>
<title></title>
<style>
@import url(myCSS.css);
p {color:brown;}
</style>
</head>
...

If you place the @import url(cssFile.css) command after other rules in the <style> element, any rules within the external style sheet will be ignored by the user agent at render time.

Example of what not to do:
<html>
<head>
<title></title>
<style>
p {color:brown;}
@import url(myCSS.css);
</style>
</head>
...

Thus, if the second method of embedding external stylesheets is used properly, external style rules imported in the <style> element always have a lower priority than rules defined in the internal style declarations.

"User agents must first assign a specified value to each property based on the following mechanisms (in order of precedence):

  1. If the cascade results in a value, use it.
  2. Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent element.
  3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition." 4

Rendering engines

What is a rendering engine? It is a computer program that interprets HTML (+ CSS) code and tells the computer how it should be displayed on the screen. Major browsers are built on a foundation of four main rendering engines: Gecko (Firefox), Triton (IE), Presto (Opera) and Webkit (Safari).

Although a standard exists that describes the rules that user agents should follow when rendering HTML and CSS, most browsers come close to meeting these standards but don't quite get it correct.

non-conformity

Their behaviour does not necessarily conform to the standards suggested by the W3C.

Place some links here to sites describing quirks in different browsers rendering engines.

Summary

Why do we care about style sheets on the web?

  1. They help make pages accessible to a wider audience
  2. They make our lives as information designers easier and more efficient

References

  1. Eric Meyer. 2007. CSS: The Definitive Guide, Third Edition. O'Reilly Media: Sebastopol, CA.
  2. World Wide Web Consortium, http://www.w3.org/Style/ Accessed 2008-08-01.
  3. Eric Meyer. 2007. CSS: The Definitive Guide, Third Edition. O'Reilly Media: Sebastopol, CA.
  4. World Wide Web Consortium, http://www.w3.org/TR/CSS21/cascade.html Accessed 2008-07-01.

Further Reading