UQ Library CSS Tutorial

1. A Little History

This page in a text-only browser
[click to enlarge]

HTML and the Web were born in 1989, at CERN in Geneva. At that stage, browsers were text-only animals, so the HTML markup was used only to define the structure of a page and to create hyperlinks.

In 1993 the first graphical browser Mosaic was released by Sun, and about a year later a commercial version was developed by NCSA. All of a sudden, HTML could be used to control the look of web pages! Oh boy, how the web writers took to this! But there was a lot of controversy as to whether HTML should be used to control the look of a page, or the define the structure of the page.

In late 1994, the World Wide Web Consortium (W3C) was formed. They have become the defining body for HTML, and it was they who finally said that HTML will define the structure, and appearance can be controlled via "styles" or "style-sheets" — and "CSS" or "Cascading Style Sheets" are what we will be looking at "styles" throughout this tutorial!

If you want to read a little more on the early development of HTML, there is a good book chapter available at the W3C site - Raggett, D. Raggett on HTML 4. Chapter 2: a history of HTML. (Published in 1998, somewhat dated, but good for the early history of HTML!)

2. What is CSS?

Cascading Style Sheets (CSS) is a stylesheet language that can be used to define the way any XML document is presented. As HTML and XHTML can be regarded as subsets of XML, CSS applies here!

CSS allows you to divorce the content structure of the page from the way it is presented, its appearance. Applying different stylesheets to the same page can give a different look and feel in each case, but the content will remain unchanged (although we will find that stylesheets allow you to hide parts of the content according to how your page is being used).

The "Cascading" in the name refers to the way a complex set of rules applies priorities whenever stylesheets come into conflict, so that the outcome is always predictable. The simplest cascading rule, for example, is that (all else being equal) the last-defined style will normally take priority. As stylesheets are applied on a "furthest-first" principle, the nearest style definition will have the greatest weight and will normally override one that is further away. This will become clearer as we get into it!

3. Why use CSS?

Separating Content from Presentation

CSS allows the same content to be presented in different ways, depending on the requirements of the reader and/or the publisher.
[If you want to anticipate the class and see what this can mean, go and try the exercise here, but please return to this section when you've finished.]

Page reformatting

You can change a page's look and feel instantly by simply changing the stylesheet link to point to a different stylesheet.

Site-wide consistency

Using global stylesheets allows the same styles to be applied easily and consistently throughout a large website.

Bandwidth

As the stylesheet will be stored in the browser's cache, so it can be used on multiple pages without increasing download data transfer.

Flexibility

CSS can work hand in hand with content management systems to allow contributors to choose page design elements without having to understand how they are implemented.

4. A little revision

This tutorial builds on the Library's HTML tutorial, in which a number of style elements were introduced. Here are a few reminders, all of which were used in the HTML tutorial —

(These "in-line styles" were introduced in the HTML tutorial as direct replacements for various attributes to a number of tags. Now that we will be delving deeper into CSS, we will soon find that this method is not the best, and that it should be avoided if at all possible. Nevertheless, it provides a very convenient way of experimenting with the way styles work in a given instance so, at least for the first part of this tutorial, we will continue to work with in-line styles.)

5. Where can we put our styles?

So far, all the styles we have looked at are in the tags we need them to affect. This is the least powerful way of using styles. The three places to put your styles are:

1. in a separate file (which can be anywhere, even on a remote site!)

   Example:

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

2. in a <style> tag, which normally lives in the <head> section of your page. Although this is non-standard, you might find that it can actually live anywhere within the page, so long as it is sure to be loaded before it is first used (which is why it usually lives in the <head> section!) ... but be very careful when you work outside the rules, as the rules are likely to change.

   Example:

   <style type="text/css">

   [all the style declarations go in here]

   </style>

3. within the individual tags, the way we've seen already

1. External Stylesheets
2. Embedded Stylesheets
3. In-line Styles

6. CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

The selector is often the HTML element you want to style, but it can be an id or a class or something more complex. Multiple selectors can be given as a comma-separated list. (They can also include pseudo-classes, which we will meet later.)

Each declaration consists of a property and a value, and is closed with a semicolon.

The property is the style attribute you want to change, and is paired with the value you want to set it to.

Declaration groups are surrounded by curly brackets.

For those who are used to code specifications, here is the same thing expressed in that way:

selector [, selector2, ...][:pseudo-class] {
  property: value;
 [property2: value2;
  ...]
}

The exception to this syntax is the in-line style, but this is only because the selector is the tag in which it is situated. The exact in-line equivalent of the above style is as follows:

More on this soon!

7. What goes with what?

As a general rule, if a style property might be applicable to any tag, or any other division of your page, it probably is, and it's worth trying. But be careful about how it might apply.

Think of any tag pair (that is, the opening and the closing tag) as defining a block within your page. Some style properties apply to the content of the block, and others (specifically, some layout properties) apply outside the block.

Let's experiment with a block, which we will mark out with a border, and then apply a couple of positioning properties that we have met before.

Okay. The next thing to do is to see how styles can be used to control some elements of your page.

8. Positioning / spacing

We've already seen the effects of text-align, the most important values of which are left, right, center and justify.

When dealing with text, we might like to indent the first line of a paragraph (or other block). text-indent will do this. We can use any length unit (eg. em or px), or we can use a percentage (of the width of the current block).

For the last line, you can't indent, but you can apply an align effect different to the main body of the paragraph. For this, use text-align-last. You could, for example, right-align the last line for effect.

But you can do more than this. You can set margins or padding on any or all of the four sides. (Remember our experiment above — margin and padding effectively do the same thing, but margin applies outside the block it is applied to, and padding applies inside.)

9. Color and Border

Let's add a couple more styles into our armory!

We've already met color in our HTML class. To this we can add background-color, for which the colour codes are exactly the same.

And we've already used border, even though we havn't been introduced to it formally. border is a complex style, being a shorthand form for all these (in order):

1. border-width
2. border-style
3. border-color

10. The Embedded Stylesheet
    — a whole new new ball game

Up to now, all the styles we have been using are of the in-line type. We've been doing this to build up a small repertoire of styles to play with in this next step. There are lots more, but we now have enough to get on with!

With the in-line option, a style is associated with the particular tag (and its children) that it is placed in as the value of a style attribute. With an Embedded Stylesheet, you put your definitions in a special <style> ... </style> section in the <head> section of your web page. It's a bit more complex, but it's a lot more powerful!

The good news — the syntax of each individual style definition is exactly the same. The bad news — we now have to learn how to apply them to the particular tags we want!

Selectors are what we use to specify in the stylesheet what we want each style (or set of styles) to apply to. The simplest (and most general) of these it to use the tags themselves as our selectors.

Here is an example of an Embedded Stylesheet, in which we lay out styles for the <body>, <p> and <div> tags:

This stylesheet sets default behaviours for all <body> tags (there's only ever one!), <p> and <div> tags within the document.

• Your style definitions are placed between the tags <style type="text/css"> and </style>.
• You set out what is to be defined (the selectors) — it can be a comma-separated list if you want — and then list (with a semi-colon-separated list) all the applicable styles, placed within a pair of curly braces { ... }.
• It's not necesary, but it's probably a good habit to get into, to put a semi-colon at the end of the last style declaration within the curly braces. This means that if you decide to add another style to the list, the semi-colon is already there, so you won't forget it!
• You don't need to fully define the styles for a particular selector the first time you come to it. Sometimes a group of elements need the same set of styles, and then you can add (or override) with futher declarations later on.

11. More Selectors

Well, what we've got so far is okay if you want to define every similar tag in the same way. But that's seldom the case. How can we have different behaviours for different <p> tags (for example) in the same page? Here's where it starts to become a lot more powerful, but you pay for that power with increased complexity. So let's take it a step at a time.

Class selector

ID selector

12. Inheritance

Now that we are applying styles to whole swags of elements, we need to inderstand the principle of inheritance. It's quite simple! Any element that falls within the area of application of a styled tag inherits any of the styles of that tag that may be applicable to it, unless overridden by another style property and value. (The mechanics of this are detailed in the section on 'Specificity', below, but for now just be aware that, for example, if you set styles for a whole <table>, then anything within that table will inherit those styles.)

13. Anchors and Links

Quite a few selectors relate to links and their behaviour. We'll have a look at this now.

14. Specificity.

No discussion of Cascading Style Sheets would be complete without coming to terms with Specificity. It's one of the most crucial elements of CSS, and one of the hardest to understand. I make no apology for being long-winded here ... it was a choice of being long, simple and clear, or short, turgid and incomprehensible to all but computer nerds.

What is Specificity? CSS resolves conflicts between two or more property values competing to affect a given element by applying a set of 'weighting' rules, and these depend on how a given selector relates to the element in question, or in other words, how specifically the selector targets that very element.

Specificity is governed by a set of four numbers. Any rule relating to a given element will bump up one or more of these numbers in a very predictable way. The competition between CSS rules is decided by comparing these numbers from left to right until one is clearly ahead, and this is the rule that applies.

Okay. What are these numbers, and what affects them? Think of them as a set which starts at [0,0,0,0]. This is the default, and is the situation for the "universal selector" ( * - which matches any element) and inherited selectors.

What can bump up the first number?

This is tied to the HTML "style" attribute. If you use an in-line style, it has the highest specificity of all. So, if you have an in-line style, you can stop checking right here, as its rules will override anything defined elsewhere. (Except if someone has used an !important declaration anywhere in a rule governing the element you are checking, in which case all bets are off. This is why !important should be avoided except as a last resort, and even then you should go back and try to find a way of getting by without it!)

What can bump up the second number?

So, if the first number doesn't resolve your conflict, but the second number does, you can stop here. (But once again, the !important warning needs to be recognised.)

What are ID attributes?

Any CSS attribute in the form #content (i.e. text preceded by the # symbol) is an ID attribute. It relates to the HTML attribute (for any tag) of the form id="content".

How can you use this rule to your benefit?

If you need the specificity to be resolved at this level, add IDs until it is! If there are sufficient IDs already in your pages, use as many as you need. If there aren't, you could add IDs into your pages affecting the elements you need to control until you have enough to work with. Don't forget that each ID within a page must be unique, and that any given tag can only carry one ID, so you will need to be very selective about where you place your IDs. It might even be better to add surrounding <div> or <span> pairs just to carry the id=" " attributes.

An HTML warning about id:

The attribute name (which is slowly being phased out) and the attribute id refer to the same "name space". There are still a few things, in some browsers, that name is useful for — particularly, for the names of fields in forms, for which id does not (yet) work — and so sometimes you might want to use both. If you do, the value for each must be identical!

What can bump the third number?

What are attributes and pseudo-classes?

Any CSS attribute of the form .class (i.e. text preceded by the . symbol) is a class attribute. It associates with the HTML attribute of the form class="class". Other CSS attributes appearing in square brackets come in here. Note: [id=content], even though it refers to an ID, is not in the form #content so it won't affect the second number, but will be counted into the third. Pseudo-class attributes are :link, :visited, :first-child, :active, :hover, :focus, :lang

How can you use this rule to your benefit?

Once again, add sufficient attributes to achieve control.

What can bump the fourth number?

What are element names and pseudo-elements?

Any valid HTML element name is counted here. Pseudo-elements currently include :first-line, :first-letter, :before, :after

How can you use this rule to your benefit?

Once again, add sufficient attributes to achieve control.

Proximity

But now that we have gone through all four of the numbers, what happens if we still haven't resolved our conflict, if all the numbers come out the same? Here's where proximity becomes the decider. The last-declared rule will be the one that takes over.

The order of application, from first to last is:

1. The default rules (i.e. those built into the browser)
2. Rules declared in remote style-sheets, in the order they appear in those style-sheets, and then in the order in which the style-sheets themselves are called.
3. Rules declared within the page (normally in the head section) in the order thay are declared.
4. Rules in the "style" attributes of the elements being controlled, in the order they appear.

This ordering only applies after the weightings as calculated above are applied, so don't be surprised when a rule you think should be active because of its proximity seems to have no effect ... just check the weightings very carefully and you will usually find your answer.

But beware the !important !! It is a wild-card, overriding anything that might conflict with it. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or greater specificity value otherwise. You could think of it as adding a fifth specificity value to the left of all the others, and which can only have the values of 0 or 1. (It's a bit like Asimov's Three Laws of Robotics, where the first law overrides the second, the second overrides the third, and then you later discover a "zeroth" law which overrides them all!)

The number of selectors can very easily get out of control, particularly if you take my advice of adding sufficient selectors to achieve control in a given case. The important thing is to start off with the minimum number of selectors to achieve your ends, and to continually look at the selectors you use with the aim of keeping them to the absolute minimum.

You might like to try out a very useful CSS Specificity Calculator provided by Stephen Ball at the University of New Mexico, Los Alamos.

And if you're feeling really confident, try this little quiz: Nettuts+ Quiz #5: CSS Specificity and Cascading

Exercise

If you want another approach to specificity, try this article at Smashing Magazine: CSS Specificity: Things You Should Know, by Vitaly Friedman

15. Media types — Different styles for different page environments

A web page can be rendered in a number of ways. It may be displayed on a normal computer screen, or a TV screen, or on a teletype device, or a hand-held (small-screen) device, or sent to a printer, or even displayed in braille! You can specify what happens in any or all of these cases, by using a special stylesheet called for a specific media type, or by using @media rules within any stylesheet(s).

You can call specific stylesheets with rules for a particular environment using the syntax

or, within any stylesheet you can use "@media" rules like this:

  @media screen, print {
    body { line-height: 1.2 }
  }

Media types currently available for you to use include:

all

Suitable for all devices.

braille

Braille tactile feedback devices.

embossed

Paged braille printers.

handheld

Handheld devices (typically with small screen and limited bandwidth).

print

Paged material and for documents viewed on screen in print preview mode.

projection

Projected presentations.

screen

Color computer screens.

speech

Speech synthesizers.

tty

Media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).

Note: You should not use pixel units with the "tty" media type.

tv

Television-type devices (low resolution, color, limited-scrollability screens, sound available).

It is often useful, for example, to alter the presentation of a page to make it print-friendly. You can remove margins to the right and left, or even complete divisions that contain elements that only get in the way of printing. You can change fonts, colours, or remove interactive form elements. Effectively, you can produce a page that looks completely different, but which still contains the information that the user would want to print.

16. Different behaviour in different browsers

Life wasn't meant to be easy! You will find that the various browsers have different compliance with CSS standards. Much of the time, you make compromises so that your work will look as good as possible in all browsers. As usual, you should test your work in as many browsers as possible, and even in their various versions.

One issue is default browser behaviour. You won't be surprised to find that every browser has a slightly different system of default renderings. The good news is that a number of people have been working hard and have devised style-sheets that bring all browsers back to a common starting point. They are usually called "Reset" Stylesheets. If you call such a stylesheet before you start crafting your own styles, you can be fairly certain you are starting from a common base for all browsers. On the other hand, most of what is called will later be overridden by your own styles, so is it worth the overhead? The use of reset stylesheets has neen likened to using a sledgehammer to crack a peanut. You might find, however, is that it is a very small sledgehammer!

One way of handling it is to add the code from the reset stylesheet to the beginning of the first-called of your own stylesheets. Once you have finished your development, you have a couple of strategies:

• By inspection, delete any styles from the reset code that you have explicitly overridden later on
• Comment out the whole of the reset code, see what "breaks", and reinstate those specific parts of the code
• If there is no apparent impact on performance, just leave it all in place (the lazy way out!)

You can find various reset stylesheets at the following places:

A Killer Collection of Global CSS Reset Styles, by Jeff Starr

which includes:

Eric Meyer

Yahoo Developer Network

Less is more - my choice of Reset CSS, by Ed Eliot

17. More of the Down Side!

CSS still has a number of limitations, even though they are being worked on as the various standards are developed.

Poor layout controls for flexible layouts

CSS is still very much rooted as a styling language, not a layout language, which has forced a lot hand-coding of CSS to achieve fluid layouts. This hindering the creation powerful CSS-based WSYWIG editors. (Improving with CSS3, but still a long way to go!)

Selectors can't ascend

CSS offers no way to select a parent or ancestor of an element that satisfies certain criteria.

Vertical control limitations

Horizontal placement of elements is generally easy to control, but vertical placement is not. Simple tasks, such as centering an element vertically or getting a footer to be placed no higher than bottom of viewport, either require complicated and unintuitive style rules, or simple but widely unsupported rules.

Absence of expressions

You currently can't specify property values as results of simple calculations (such as margin-left: 10% - 3em + 4px;) — However, a working draft with a calc() value to address this limitation has been published by the CSS WG.

Lack of orthogonality (one property : one job)

Multiple properties often end up doing the same job. For instance, position, display and float specify the placement model, and most of the time they cannot be combined meaningfully.
In addition, some properties are not defined in a flexible way that avoids creation of new properties. For example, you should use the "border-spacing" property on table element instead of the "margin-*" property on table cell elements. This is because according to the CSS specification, internal table elements do not have margins.

Control of element shapes

CSS currently only offers rectangular shapes. (Although some browsers offer, for example, rounded corners, but this is through non-standard CSS technically in testing mode.)

No column declaration

While possible in current CSS 3 (using the column-count module), layouts with multiple columns can be complex to implement in CSS 2.1.

Cannot explicitly declare new scope independently of position

Scoping rules for properties such as z-index look for the closest parent element with a position:absolute or position:relative attribute. This odd coupling has two undesired effects: 1) it is impossible to avoid declaring a new scope when one is forced to adjust an element's position, preventing one from using the desired scope of a parent element and 2) users are often not aware that they must declare position:relative or position:absolute on any element they want to act as "the new scope".

Pseudo-class dynamic behavior not controllable

CSS implements pseudo-classes which allow a degree of user feedback by conditional application of alternate styles. Some pseudo-classes may have potential for abuse (eg. :hover used to trigger pop-ups), and there is currently no way of a client disabling them.

Inconsistent browser support

We've already mentioned this!

18. Strategy

Now that we have an armoury of resouces to use CSS with our web pages, we need to look at the best way to implement our site.

First up, we need to look at the design of individual pages. Presumably you have a standardised look and feel for your site, so this means that a single set of stylesheets should be able to be applied site-wide. A good place to keep them separate is in their own subdirectory, perhaps named /css, which you can link to from all your website.

Now we need to look at the pages themselves. There should be some common design areas that appear in every page (or at least most pages). If an area appears at most once in a page, it is a candidate for being given an id. If, on the other hand, it appears a number of times, it might be good to apply a class to it. Here is an idea of what I'm talking about:

To go with this, your stylesheet(s) should have:

• a general section, for declarations which apply generally
• a "header" section, with selectors of the form #header ...
• a "body" section, with selectors of the form #body ...
  (but only if they are not already covered by the general section)
• a "nav" section, with selectors of the form #nav ...
• a "content" section, with selectors of the form .content ...
• a "sidebar" section, with selectors of the form #sidebar ...
• a "footer" section, with selectors of the form #footer ...

Don't forget the inheritance rules, so in this simple example, all the specific selectors will inherit the general style declarations, and the nav and sidebar ids and the #content class will inherit both the general and the body styles because of where they sit in the page structure.

If you have any familiarity with Content Management Systems (CMS) like Drupal (which is being used by a number of sites on the UQ campus) or My Source Matrix, this section will be strikingly familiar. A CMS builds its pages using defined sections whose appearance is controlled via CSS.

19. Conclusion

This introductory exploration into Cascading Style Sheets has inevitably left a lot unsaid. It's a lot like shipbuilding, where the hull has been built and the vessel launched, but now the fitting-out needs to be done. This job is now up to you.

20. Some useful references and resources

W3C - the World wide Web consortium

Here's where to go to see the latest thinking about CSS (and other web-based technologies). The CSS Current Status page gives you an insight as to where CSS is right now and where it is going. But don't forget, it will be a long time (if ever) that these recommendations will be implemented in the browsers!

Wikipedia

The Cascading Style Sheets article on Wikipedia is a good summary, one of the more reliable articles on Wikipedia. It links to the W3C recommendations for CSS1, CSS2 and CSS2.1 (but not yet to CSS3).

http://w3schools.com/

w3schools.com — Web Building tutorials, references, and numerous examples.

http://www.webmonkey.com/

Webmonkey — Another site replete with resources, including good tutorials!

http://www.blooberry.com/indexdot/css/index.html

Index DOT CSS — Excellent reference site. List of styles, and which browsers support them. (Has not been revised for some time.)

47 CSS Tips & Tricks To Take Your Site To The Next Level, by Stephen Bradley

A good collection of useful examples, from novice standard to quite advanced. Also contains links to other good resources.

Veign is a website design and development company.

Veign just happens to have a couple of very good 'cheat sheets' for CSS available on its site. Their 'Reference' page can be found at www.veign.com/reference/

Firebug

Firebug is an add-on for Firefox that allows you to inspect your HTML code and examine the way your CSS is interacting with it. There is also a version, Firebug Lite, that is compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome.