All you need to know about css3: 09/18/08

Thursday, September 18, 2008

Code of creating vertical css menus

Copy and Paste the following code in your html page. This code is tested in IE6, IE7 and firefox.

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

/* individual menu item styling */

#main-menu ul {

list-style: none;

}

#main-menu li {

list-style: none;

/*padding-bottom: 5px;*/

/*border-bottom: 1px solid #d9dbdc;*/

/*margin-bottom: 10px;*/

}

#main-menu a {

/*float: right;*/

display: block;

color: #231f20;

text-decoration: none;

border-bottom: 1px solid #d9dbdc;

padding: 5px 0px 5px 0px;

}

#main-menu a:hover {

/*padding-bottom: 5px;*/

display: block;

color: #231f20;

border-bottom: 1px solid #000000 ;

background-color:#33CC33;

}

/* menu item styling on mouse over */

#menu a:hover {

color: #6666CC;

background-color:#33CC33;

}

</style>

</head>

<body>

<div id="main-menu">

<ul>

<li><a href="#">Home</a></li>

<div></div>

<li><a href="#">About Us</a></li>

<div></div>

<li><a href="#">Services</a></li>

<div></div>

<li><a href="#">Products</a></li>

<div></div>

<li><a href="#">Consultation</a></li>

<div></div>

<li><a href="#">Contact Us</a></li>

<div></div>

<li><a href="#">Search</a></li>

</ul>

</div>

</body>

</html>

Printing in CSS

CSS2 introduced a mechanism for closer control over printing web pages that are styled using style sheets. In this section, we'll look at how this works.

There are two aspects to consider with printing. The page, and the contents of the page.

For the page, we need to consider what size it is, whether it is oriented as a portrait or landscape, what printing marks might be required, and what margin it has.

For the content we need to worry about where pages break, and what is done with widow and orphan lines of text (we'll explain these terms below).

In CSS2, the page properties are defined by the @page rule, while several new properties help control page breaking.

The @page rule

At the heart of printing in CSS2 is the @page rule. This is similar to the @media rule, which you can learn about in the section on Media.

The @page rule defines a context for printing. Essentially it describes the paper sheet that the web page is going to be printed on.

@page rules work very much like the standard statements of a style sheet, though they take properties specific to pages that no other statement can use, and can also have margins specified using the familiar margin properties.

The properties of a page can be applied to every page, or differently to left and right hand side pages. When printing for bound publications, the margins on the left and right hand sides are usually different to take into account the center binding.

To specify properties for every page, the @page rule has the form @page {/* properties declared here */}

To specify the properties for left hand side pages, the @page rule has the form @page:left {/* properties declared here */}

To specify the properties for right hand side pages, the @page rule has the form @page:right {/* properties declared here */}

Named pages

@page rules can be named, which, in conjunction with the page property we will see below, allows particular elements to be printed on particular kinds of pages (that is pages set up in a particular way). For instance, its easy to set up an @page rule for printing figures. Suppose we want to print any figures in landscape format. We can set up a named page like this

@page figures {

size: landscape

}

The name of a page is simply placed after the @page keyword and before the properties for the rule. Below we will see how the page property tells the browser which @page rule to use to print an element.

Page specific properties

There are two sets of properties associated with how pages will actually be printed.

those that relate to the printed page itself, that is the margin properties. These can only be applied to @page rules. Here we will refer to these as Page properties.

Those that relate to how the content is displayed within those pages. These properties are the page-break-before, page-break-after, widows and orphans properties. These can be applied to any elements. Here we will refer to these as Page break properties.

margin, margin-left, margin-right, margin-top, margin-bottom

What it does

Margins are the only general properties from CSS that can be applied to pages.

The margin properties set the top, left, bottom, right and all margins respectively.

Possible values

Media in CSS

An important assumption underlying CSS1 was that web pages were viewed using a personal computer with a monitor. But there are many more ways to access a web page than simply via computer and monitor. And each of these different media have their own characteristics. They may be monochrome, limited in size, they may be "aural" and read web page content aloud. They may be television based, like WebTV. And looking toward the future, we really have no idea what they will be like.

CSS2 provides a way to tailor a style sheet to the particular medium that is being used to display a page. Inside the same style sheet you can have different parts for printing, handheld devices, monitors and so on. Additionally, different style sheets can be imported depending on the medium used for browsing.

In this section we will take a look at how these work.

The @media rule

The @media rule is a subset of a style sheet specific to a particular type of medium, or group of media.

An @media rule specifies the medium or media to which it applies, then contains a number of statements, exactly like the statements we usually find in a style sheet. These statements apply only when a web page associated with this style sheet is being displayed using one of the media to which the @media rule applies.

@media rules are straightforward to construct. They comprise

the keyword @media

a list of media types, separated by commas

the statements to be applied to this group of media, contained inside curly braces "{" "}"

These statements are identical to the statements we have seen in previous sections.

For example, the following rule applies a white background and black text color to the body of page when it is being printed or when it is being displayed on a handheld device.

@media print, handheld {

background: white;

color: black

}

Types of media

CSS2 provides for the following media types, as described in the recommendation

all Suitable for all devices.

aural Intended for speech synthesizers.

braille Intended for braille tactile feedback devices.

embossed Intended for paged braille printers.

handheld Intended for handheld devices (small screen, monochrome, limited bandwidth).

print Intended for paged, opaque material and for documents viewed on screen in print preview mode.

projection Intended for projected presentations, for example projectors or print to transparencies.

screen Intended primarily for color computer screens.

tty Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.

tv Intended for television-type devices (low resolution, color, limited scrollability).

Media specific importing using @import

In addition to the media rule, CSS2 allows conditional importing of style sheets based on the current medium. This means that a style sheet will only be imported when a page is being displayed in a particular medium. This is particularly useful for low bandwidth media, like handhelds, which generally are wireless based. With an imported style sheet based on the medium, only the statements specific to the particular medium need to be downloaded.

To conditionally import a style sheet based on the current medium, create a standard @import rule, but add the names of the media that will cause the style sheet to be imported directly after the rule in a comma separated list.

For instance, to import a style sheet called monochrome.css when a page is to be printed or displayed on a handheld device you would create the following @import rule.

@import url(monochrome.css) print, handheld

For more on @import rules, see the section of on types of rules in CSS.

Hints and suggestions

Media specific importing essentially achieves the same outcome as using the @media rule described above. The difference is that if you use the @import rule the user agent does not even have to download the imported style sheet unless it is relevant. This will be a very powerful technique for designing for technologies such as handheld and mobile devices. It will be very important for these devices to support the @import rule.

Generated content in CSS

If you cast your mind back you might recall our golden style sheets rule, separate appearance from content. Now, suddenly we are talking about generated content. You might be thinking, doesn't this introduce content into our style sheets? What about the golden rule? Well, it's a good question, and this area is one of controversy among style sheets experts. I won't buy into that debate here, but I want to cover the issue of generated content in CSS2 in this section.

Firstly, note that some kinds of generated content already exist in CSS1. Think about bulleted and numbered lists. These add numbering or bullets, so they do generate content to an extent. CSS2 adds more powerful ways of generating content. Here we learn how.

There are two aspects to generating content with CSS2.

Firstly we need to say where the content is to be inserted

Then we need to specify what the content to be inserted is

Where is the content to be inserted?

To answer this question we use the two new CSS2 pseudo classes we saw a little earlier. The :before and :after pseudo classes are appended to selectors, and allow the insertion of generated content before or after selected elements. For example, you might want to put something before all headings of level 1. The pseudo element selector to do this is h1:before.

What content is to be inserted?

To do this we use a new property, content.

The content property allows us to define the content that is to be inserted before or after selected elements. Content can comprise

strings of text

images and other resources

counters

keyword defined elements

the result of the unique attr() function (don't panic - more on this below!)

Let's take a look at the content property itself in detail, then we'll look at each of these different types of content as well.

content

What it does

The content property specifies the content to be added before or after an element selected by the :before and :after pseudo classes. It can only be used with these selectors.

Possible values

As mentioned above content can comprise a list of

strings of text

counters

keyword defined elements

the result of the unique attr() function

Let's look at each of these values in turn.

Strings of text

What it does

Surprisingly, using this value will insert a string of text before or after the selected element.

Syntax

Say we wanted to generate the content "Chapter " before every heading level 1.

h1:before

{content: "Chapter "}

All you need do then is place the string of text you want to be generated between double quote marks.

counter and counters

What it does

counter values are more than a little involved. Think of them as super-charged versions of numbered lists. Counters have a name, and a style. You create a counter using the counter function, then use them in conjunction with the content property to insert markers into a document. This isn't quite as confusing as it initially seems.

There are two forms of the counter function, the counter form and the counters form.

The counter function has the form counter(identifier, list-style). The identifier is the name of the counter whose value you want to insert, while the (optional) list-style specifies what style of counter you want (for instance lower-roman.) These styles are the same as those for elements of type list-style. When the browser encounters a counter function, it determines the value of that counter at this point of the document, then inserts it into the document in the nominated style. How does it determine this value? See the section on the counter property below for more detail and examples.

The counters form is very similar, but allows for multiple counters to be inserted simultaneously. The form is counters(identifier, string, list-style). This returns all counters with the name specified by the identifier at this point of the document in the given list style, separated by the string. For more on this rather sophisticated aspect of CSS2, with examples, see the counters property below.

Keyword defined elements

What it does

At the moment, keyword values are limited to allowing the insertion of various types of quote marks.

open-quote places the open quote string as defined by the quotes property for the elements

close-quote places the close quote string as defined by the quotes property for the elements

no-open-quote does not insert any content, but increments the level of nesting of the quotes

no-close-quote does not insert any content but decrements the level of nesting of the quotes

Basically it works like this. You use the content property with a keyword value to define, for example, that there should be an opening quote before a certain element. You then use the quotes property to define what type of quote marks you want to appear. If you don't define a value for the quotes property, the default is up to the user agent. This means that it may put in some sort of quote mark just because you have given content the value of open-quote, but it may not be exactly what you have in mind.

The attr() function

What it does

The last possible value for content, and unique to the content property is the attr() function. This returns the value of a named attribute of the selected element. The returned value is then inserted as a string. For example, with a link, the title of the link could be inserted after the link in the following way.

a:after {

content: attr(title)

}

This might be used in conjunction with an @media rule to specify that only when printing a page, the URL should be inserted after the link.

@media print

{a:after{

content: attr(href)

}

}

How is content added?

Now, after that long diversion, where we looked at the possible values that the content property can take, let's go back to just a couple more things about the content property itself.

Content is added as inline, block or marker elements. However the statement that creates the content can set the display of the content to be a block, or other kind of element, rather than an inline element. For example

body:after {

content: "The End";

display: block;

margin-top: 2em;

text-align: center;

}

places the text string "The End" at the foot of the page as a block, rather than as an inline element.

Default values

If no content is specified, the default value is an empty string.

Is it inherited?

An element does not inherit the content property of the element which contains it.

quotes

What it does

The actual quotation marks that will be drawn are defined by the new quotes property. This property allows different quotation marks to be created for different elements (for example when quoting different languages the correct quotation marks for that language will be inserted automatically.)

The quotes property specifies the quote marks to be used for different levels of quotation. It is used in conjunction with a keyword value for the content property we saw above. When content takes a value of open-quote and close-quote, the open and close quotes inserted are those defined by the quotes property.

Possible values

quotes are defined as a list of pairs of strings. Each pair defines respectively the opening and the closing quotation mark. The pairs are separated by spaces, as is each element of a pair. For example the following statements create different quotes for different languages, including what should happen when quotes are nested.

/* Specify pairs of quotes for two levels in two languages */

q:lang(en) { quotes: '"' '"' "'" "'" }

q:lang(fr) { quotes: "«" "»" "<" ">" }

In English, according to this statement, first level quotes are double quoted, while second level quotes are single quoted. In French, first level quotes use "«" and "»" while second level quotes use "<" and ">".

Default values

If no value for quotes is specified, the default value is determined by the browser.

Is it inherited?

An element inherits the quotes property of the element which contains it.

Counters and counter properties

counter

Counters are sophisticated and powerful, and not surprisingly more than a little complex. But be not afraid, a little thinking and they are manageable. Here's how they work.

Counters are used exclusively by the content property to insert numbering (e.g. "1.5") before or after an element. You don't need to "create" a counter, just by referring to them they come into existence. For instance, let's suppose you created the simple rule below

h1:before {content: counter(chapter)}

This tells the browser to add the value of the counter called "chapter" before every heading of level one. But what value is that? Well, if we don't set the value using the properties we will discuss in a minute, the counter value will be 0. So every heading of level one will be preceded by a 0. We don't really want that. We want something along the lines of the first heading to be preceded by a 1, the second by a 2, and so on. To do this, we use the counter-increment property. This increments the value of a counter by a given value (you can jump up by 2, down by 1 (using the value of -1), as well as simply incrementing by one.)

To use counter-increment, name the counter you want to increment using the identifier for the counter, and then the value you want to increment by. (Again, simply using the property "creates" a counter with that identifier if it doesn't already exist). In the following example, we increment the value of the counter with an identifier "chapter" for each <h1> element.

h1 {counter-increment: chapter 1}

You can of course combine the two rules into this simple rule

h1:before {content: counter(chapter);

counter-increment: chapter 1

}

This increments the counter then adds it before the <h1> element. Note the special case that if you increment and use a counter in the same rule, it is incremented before being inserted even if the content property comes before the increment property.

What does this let us achieve? Well, now, instead of marking up the headings of each chapter in our HTML based document like this

<h1>1. Abstract</h1>

...

<h1>2. Introduction</h2>

We leave out the numbering and it is done automatically. This aids the editing and writing processes, because moving sections, subsections and so on, or deleting them, or inserting new sections doesn't necessitate re-entering every number! It's particularly useful where a document might be served up in pieces based on the user's needs, or the medium they are using.

Let's look at a more complex example, using subsections. Here we will also take a look at the counter-reset property. Any nontrivial piece of documentation will almost certainly be divided into sections and subsections. We've seen how to number the top level sections (we called them chapters), but what about subsections? The particular problem is resetting the counter at the beginning of a new subsection.

Here is what we do

h1:before {content: counter(chapter);

counter-increment: chapter 1

/* this is the same as the example above */

counter-reset: subsection 0

}

In this example, we reset the counter called subsection to 0 each time we start a new section (assuming the h1 is the start of a new section). Now we need to increment the subsection counter for each subsection (heading of level 2), then insert the subsection content so that our subsections are correctly numbered. Let's take a look.

h2:before {content: counter(chapter) "." counter(subsection);

counter-increment: subsection 1

}

This increments the counter called subsection, then inserts numbering of the form "2.5" before the text of the heading.

counters

The last thing we need to learn about counters is a little more involved again. Think about lists in HTML. These can contain other lists, which can contain others, and so on ad infinitum. It's not possible in advance to know how many levels there will be, so how do we take care of this situation? Fortunately those smart people at the W3C thought of this, and provide a solution. It's a little tricky, but not rocket science. Counters have a particular "scope". When a counter is created its scope is the level at which it was created, and all that level's children. However, where a counter of the same name is created inside the scope of the initial counter, then this is treated as a separate counter, which now takes over the counting. Confusing? Let's take a look at an example, taken from the CSS2 specification.

Here's the style sheet rule that creates the counter

  ol { counter-reset: item }  li { display: block }  li:before { content: counter(item) ". "; counter-increment: item }

And here is the HTML

  <ol>                 <!-- (set item[0] to 0          -->      <li>item         <!--  increment item[0] (= 1)   -->      <li>item         <!--  increment item[0] (= 2)   -->        <ol>           <!--  (set item[1] to 0         -->          <li>item     <!--   increment item[1] (= 1)  -->          <li>item     <!--   increment item[1] (= 2)  -->          <li>item     <!--   increment item[1] (= 3)  -->            <ol>       <!--   (set item[2] to 0        -->              <li>item <!--    increment item[2] (= 1) -->            </ol>      <!--   )                        -->            <ol>       <!--   (set item[3] to 0        -->              <li>     <!--    increment item[3] (= 1) -->            </ol>      <!--   )                        -->          <li>item     <!--   increment item[1] (= 4)  -->        </ol>          <!--  )                         -->      <li>item         <!--  increment item[0] (= 3)   -->      <li>item         <!--  increment item[0] (= 4)   -->    </ol>              <!-- )                          -->    <ol>               <!-- (reset item[4] to 0        -->      <li>item         <!--  increment item[4] (= 1)   -->      <li>item         <!--  increment item[4] (= 2)   -->      </ol>              <!-- )                          -->

Each <ol> "creates" a counter called "item". Every list item inside the <ol> increments the counter, then inserts the number before itself. However, when we get to an <ol> inside another, a new counter called "item" is created. The other ones don't go away, they simply remain unchanged until their scope is again relevant. Note that they all have the same name. You might think this is a recipe for disaster, but there is a good reason for this.

Here's one last string to the counters and content bow. Imagine you want to insert the "full" number for every list item (for example 2.5.1). With the counter function you can only insert the value for one named counter. In this case it would be the value for the counter named item at the level you are currently at. How do we get all of the counters with that name which are relevant at the level we are at? With the counters function. We saw this in the section on content above, but let's revisit it. It has the form counters(identifier, string, list-style), (where the list-style is optional) and it does exactly what we want. It returns every counter in the document relevant at the point it is called, separated by the string you give, in the style specified. What do I mean by "relevant at this point?" Remember that the scope of a counter is inside the element in which it is created, including all of its children. Basically, a counter is relevant inside any of the children of the element which created it.

To cut a long story short, it's as simple as counters(item, ".")

counter-reset

What it does

The counter-reset property sets the value of a named counter.

Possible values

counter-reset takes the name of the counter to reset. Counter names are identifiers, and comprise letters, numerals and hyphens. They cannot, however, begin with numerals or hyphens. It also takes an optional integer, to which it sets the value of the identified counter.

counter-reset can also take a list of identifiers and optional integers, to set the value of several counters simultaneously. This is no mere luxury. Because of cascading, the following will set only the counter named counter2.

h1 { counter-reset: counter1 -1 }

h1 { counter-reset: counter2 99 }

In order to reset both, the following must be used.

h1 { counter-reset: counter1 -1 counter2 99 }

counter-reset can also be set to none.

Default values

If no counter-reset is specified, the default value is none.

Is it inherited?

An element does not inherit the counter-reset property of the element which contains it.

counter-increment

What it does

The counter-increment property increments the value of a named counter by a certain amount.

Possible values

counter-increment takes the name of the counter to increment. Counter names are identifiers, and comprise letters, numerals and hyphens. They cannot, however, begin with numerals or hyphens. It also takes an optional integer, by which it increments the value of the identified counter. If no integer is specified, the counter is incremented by one.

counter-increment can also take a list of identifiers and optional integers, to set the value of several counters simultaneously. This is no mere luxury. Because of cascading, the following will set only the counter named counter2.

h1 { counter-increment: counter1 -1 }

h1 { counter-increment: counter2 99 }

In order to reset both, the following must be used.

h1 { counter-increment: counter1 -1 counter2 99 }

counter-increment can also be set to none.

Default values

If no counter-increment is specified, the default value is none.

Is it inherited?

An element does not inherit the counter-increment property of the element which contains it.

Values in CSS

A glance at any of the properties sections of this guide will tell you that different properties can have different kinds of value.

You probably don't really need to know all of the following, but we include it for completeness. You might like to treat it as a reference, or read through it now to get an understanding of the basic issues, then refer for more detail when you need to.

The major kinds of value are:

length

percentage

color

url

keyword

shape

Any given property will be able to take some appropriate subset of the values described below. Sometimes they will not be able to take all aspects of a given type of value, for example, not all properties that can take length values can take negative as well as positive length values.

Note that any property can also take the value inherit. This forces a selected element to inherit the given property from its parent, even when that property is not usually inherited.

Length values

Length values can be positive or negative, have a numerical value, and must be followed by a unit of measurement. Note that while length values can be either positive or negative, several properties cannot have negative length units.

There are two basic kinds of length unit, relative and absolute. As a rule of thumb, absolute units should be used only when the physical characteristics of the output device are known. This means that units like points and pixels should be avoided for monitors (because we cannot be sure of the logical resolution (Macintoshes default to 72 dpi, Windows to 96 dpi, or screen sizes). We discuss some implications of this for design and implementation of web pages in our real world CSS section of the guide. As a starting point though, you should try to use relative length values wherever it is at all possible.

It is worth learning a little bit about each of these, as there are benefits and pitfalls in the use of each. The links section of the House of Style has pointers to a number of interesting discussions about the use of different units. A very thorough and useful coverage of these issues is given by Tod Fahrner. This is a must read for those who want to use style sheets correctly. We also discuss the issue of the appropriate use of various units in more detail in our real world CSS section.

Percentage values

Instead of using a unit of measurement many properties can also take percentage values. You'll remember that an element is contained within another element (for example, a <paragraph> will be inside the <body>). Usually percentage values specify a percentage of the parent.

For example, specifying a width property with a percentage value means the width of an element will be the given percentage of the element which contains it. For instance, p {width: 75%} means that paragraphs will be 75% the width of their container. Often this will mean the body element.

Percentages are very valuable with positioning, as when a user resizes their window, the same basic layout can be achieved for the new window size.

The form of a percentage unit is a positive or negative sign (no sign means positive units), followed by a number, followed by the percentage sign: %. For example -25%, +15% or 15%.

Color values

Backgrounds, text and borders can be assigned colors. Color values can be specified in one of three ways:

color keywords

hexadecimal colors

rgb colors

Color keywords

There are 17 color keywords, which have the following values.

These keywords are

aqua (00ffff)

black (000000)

blue (0000ff)

fuchsia (ff00ff)

gray (808080)

green (008000)

lime (00ff00)

maroon (800000)

navy (000080)

olive (808000)

purple (800080)

red (ff0000)

silver (c0c0c0)

orange (ffa500)

teal (008080)

white (ffffff)

yellow (ffff00)

CSS2 introduced 26 keywords for system colors. These specify colors that the user interfaces of various operating systems such as the MacOS or Windows 98 use for drawing objects. These colors are

activeborder Active window border.

activecaption Active window caption.

appworkspace Background color of multiple document interface.

background Desktop background.

buttonface Face color for three-dimensional display elements.

buttonhighlight Dark shadow for three-dimensional display elements (for edges facing away from the light source). Shadow color for three-dimensional display elements.

buttontext Text on push buttons.

captiontext Text in caption, size box, and scroll bar arrow box.

graytext Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.

highlight Item(s) selected in a control.

highlighttext Text of item(s) selected in a control.

inactiveborder Inactive window border.

inactivecaption Inactive window caption.

inactivecaptiontext Color of text in an inactive caption.

infobackground Background color for tooltip controls.

infotext Text color for tooltip controls.

menu Menu background.

menutext Text in menus.

scrollbar Scroll bar gray area.

threeddarkshadow Dark shadow for three-dimensional display elements.

threedface Face color for three-dimensional display elements.

threedhighlight Highlight color for three-dimensional display elements.

threedlightshadow Light color for three-dimensional display elements (for edges facing the light source).

threedshadow Dark shadow for three-dimensional display elements.

window Window background.

windowframe Window frame.

windowtext Text in windows.

Hexadecimal RGB colors

For whatever reason, the original web palette (now sRGB) used hexadecimal numbers (base 16 not base 10 numbers, and if you don't know, don't worry about it) for specifying colors. In short, these RGB colors are specified as a combination of Red Green and Blue. There can be 256 different hues of each color, (from 00 to ff - that's 0 to 255 in human speak).

CSS allows you to specify colors using this method, in the following forms:

1) The # symbol, followed by three hexadecimal numbers in the range 00 to ff. For example, #ffcc11. This is the way HTML developers know how to specify color. In this example, the red value is ff, the green value is cc and the blue value is 11.

2) The # symbol followed by three hexadecimal numbers, this time using a single digit. For example, #fc1. This is the same number as the one in the previous example, not the same as #f0c010.

Decimal RGB colors

Because humans are generally more comfortable counting to base 10 than base 16, CSS lets us use decimal rgb values. The color gamut (the total range of colors) is exactly the same, we are just specifying it in a different way.

There are two forms of this value, a numerical and a percentage form. They are interchangeable.

1) The numerical form of the color value is the following rgb(255, 255, 0). There are three numerical values, in the range from 0 to 255, one each for red, green and blue.

2) The percentage form of the rgb color value replaces the values in the range from 0 to 255 with a percentage value from 0 to 100%. For example, the above value would be written rgb(100%, 100%, 0%).

To recap, the following values are all equivalent:

green

#00ff00

#0f0

rgb(0, 255, 0)

rgb(0%, 100%, 0%)

URL values

Background images and list item images are specified with a URL. This url can be either absolute (that is, the full URL, e.g http://www.westciv.com/gifs/main.gif) or a relative path. But relative to what? If you were to think about it for a moment, you'd realize that it must be relative to the style sheet. Otherwise, the style sheet would only work for web pages in the same directory as it is. The problem is that Netscape Navigator 4.x gets this wrong, and treats the URL as relative to the web page! This is rectified in Netscape 6, but needs to be kept in mind when working with Netscape 4. This bug can actually be used to advantage to "hide" style sheets from Netscape 4, but have them accessible to any other browsers.

URLs have a straightforward form:

url(the url)

So, Absolute URLs are written like this:

url(http://www.westciv.com/gifs/main.gif)

Relative URLs, similarly, are written:

url(../gifs/main.gif)

Keyword values

Many different properties can take keyword values. A keyword value is simply a single word that is translated into a numerical value by a browser. The keywords available for a specific property will be appropriate to that particular property.

Some keyword values are relative (to the parent element). For example

bold and bolder for font-weight

small and smaller for font-size

Shape values

The uncommon shape value (it is only used currently for the clip property, introduced as part of CSS2) defines a shape. At present, there is simply a rectangle shape.

The form of the rectangle shape is:

rect( top left bottom right )

Each of top, left, bottom and right can be either a length value, or the keyword auto. auto means, at least in the clipping context, that the value of this position of the clip is the same as that of the element itself.

This value is probably going to be redefined because it doesn't follow the same basic model as the box model of CSS1, where element positions are defined by a top and left corner, along with a width and a height.

In addition, further shapes are planned.

User interface properties in CSS

CSS2 introduced user interface properties, which allow the shape of the cursor to be set based on the object that it is hovering over, and to define the outline of an element. When the cursor is inserted in a field, and keystrokes will be directed to that field, it is said to have the focus. It is usual for some kind of outline to indicate this fact.

CSS2 also introduced a series of color keywords which refer to system values such as the color of window borders. You can learn more about these in the section on color values.

Lastly, CSS2 introduced the system font concept, which allows you to specify fonts based on those used by the system for various kinds of object, such as menu items and the default text for window items. For more on this, see the section on text style properties.

cursor

What it does

This property sets the shape of the cursor when the mouse is hovering over a selected element.

Possible values

The cursor can be specified as either one of several keyword values, or as a URL that points to a file of type .cur (a cursor resource file).

The possible keyword values for the cursor property, as spelt out in the CSS2 specification are

auto The browser determines the cursor to display based on the current context.

crosshair A simple crosshair (e.g., short line segments resembling a "+" sign).

default The platform-dependent default cursor. Often rendered as an arrow.

pointer The cursor is a pointer that indicates a link.

move Indicates something is to be moved.

*-resize Indicates that the edge is to be moved. * is replaced with N, S, E, W, NE, NW, SE, SW for each of the edges (north, south, east, west and so on).

text Indicates text that may be selected. Often rendered as an I-bar.

wait A cursor to indicate that the program is busy and the user should wait. Often rendered as a watch or hourglass.

help Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

Default values

The default cursor value is auto, which corresponds to the current way in which browsers draw cursors.

Is it inherited?

Child elements inherit the cursor of their parent elements. Remember, inherited properties can be overridden.

outline

What it does

This property sets the outline around an element, usually used to indicate that the element has the keyboard focus, that is it will receive keystrokes. Elements do not need to have the focus to have an outline, however, good user interface principles should be followed. As a general rule, users expect the outline to indicate that the outlined element has the focus.

This property is particularly helpful when designing forms for web pages.

Possible values

outline is a shorthand for three properties described below, outline-style, outline-width and outline-color. It takes a list of width, style and color values (as described for the individual properties below.)

Default values

The default value is the same as for each of the values described below.

Is it inherited?

Child elements do not inherit the outline of their parent.

outline-color

What it does

outline-color specifies the color to be used for drawing the outline around an element. Unlike a border, the color of each edge of an outline is the same.

Possible values

outline-color is specified by a color. We discuss color values in detail in our values section. In addition, the keyword invert can be used.

invert inverts each of the pixels in the border. This ensures that an outline is visible regardless of background color.

Default values

If no color is specified for the outline, the outline is invert, which means the outline will be the inverted color of the background.

Is it inherited?

The outline-color of an element is not inherited from its parent element.

outline-style

What it does

In addition to width and color, the outline of an element can have a style. There are several possible styles.

Possible values

Outline styles are specified using keywords.

The outline-style keywords are

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Default values

If no outline-style property is specified, the style of an outline is none.

Is it inherited?

Elements do not inherit the outline-style of their parent elements.

outline-width

Possible values

Outline widths can take either keyword values, or length values.

The keyword values that can be used are

thin

medium

thick

There is no specification for what these keywords mean, so different browsers will probably draw them as different thicknesses. The only guarantee is that thin is not thicker than medium which is no thicker than thick.

Length values are discussed in detail in our section on values. Using relative length values you can create borders that are in proportion with the size of an element, or its contents.

Default values

If no outline-width is set, the thickness of an outline is medium.

Is it inherited?

An element does not inherit the outline-width of its parent element.

Element type properties in CSS

If you have delved deeply into HTML, you will know that there are a number of different types of element. The main types are inline, block and list item. By default, all elements are one of these types. For example, a paragraph is a block element, while a link is an inline element. With CSS, your style sheet can redefine the display type of an element. So, if you wish, you can make a paragraph display as an inline element, or link display as a block.

In addition, you can specify the display properties for different types of element. For example you can set the type of bullet for a list item.

The element type properties are:

display

white-space

list-style-type

list-style-image

list-style-position

list-style

CSS 2 introduced a number of new properties which control how tables and their captions are drawn.

border-collapse

border-spacing

caption-side

empty-cells

table-layout

display

What it does

The display property determines how an element will be drawn on the page. We discuss the basic ways an element can be drawn (block, inline and list-item) more fully in the Type Selector section. There are also a number of more complex values that essentially mean you can make any element display as if it were one of the elements associated with tables.

Possible values

Ways of positioning

The CSS2 recommendation provides a model for how elements can be positioned. Essentially there are four different ways in which an element can be positioned on a page, with a couple of complicating factors.

Static positioning

Static positioning is easy. It's how pages are already laid out by a web browser. A web browser takes an HTML file, parses it into its elements, applies style from a style sheet (or if there is none, from a default style sheet) and then "flows" the elements onto the page. The position that an element, say a paragraph, has in this flow is its static position. We'll need to remember static positioning when we get to relative positioning below.

Absolute positioning

Absolute position is what we are all so excited about. In a nutshell, it lets a developer say where the top left hand corner of an element should be located with respect to its parent element. It is not with respect to the window. Don't get absolute positioning confused with relative positioning, which we'll look at below.

Fixed positioning

Fixed position is closely related to absolute position. When an element is absolutely positioned, it's positioned with respect to the element which contains it. When the page is scrolled, the element also scrolls. Wouldn't it be nice if we could position elements with respect to the top of the window, so that regardless of how the page is scrolled, the elements remain fixed? You guessed it, fixed positioning provides precisely this feature. With fixed positioning and the <object> element in HTML 4, we can do away with frames forever, yet gain all the advantages, with none of the disadvantages of the FRAME construct.

Relative positioning

Relative positioning is probably a little unfortunately named. Positioning relative to what? A lot of people jump to the conclusion that relative positioning is when you specify a position with respect to the parent element, and absolute positioning is when the position is specified with respect to the top left hand corner of the page. But as we have just seen, this is not how it works at all.

OK, so what is relative? In essence, relative positioning places an element with respect to where it would statically be positioned. When you relatively position an element, as a developer you are saying to a browser: "hey, take this paragraph, and put it 10 pixels down and 10 pixels to the right of where it would normally be."

There is another complicating factor. What if we have a relatively positioned parent element, with an absolutely positioned child element? By analogy with absolute positioning you'll probably guess that the absolutely positioned child element will be placed with respect to the top left hand corner of the parent element.

The issue of positioning isn't particularly difficult, I trust, but it is a bit tricky. I hope this irons out the issue of the different kinds of positioning available in CSS2. Below we'll look at how to put these into practice.

Positioning enables very sophisticated page layout, but as with any powerful technology, it is complicated at times.

The page layout properties are:

position

top

left

bottom

right

width

min-width

max-width

height

min-height

max-height

z-index

visibility

overflow

float

clear

clip

position

What it does

If you want to position an element you have to specify not just a set of coordinates that say where you want it to be, you also have to specify what these coordinates are with respect to. The position property is used to determine what the coordinates are with respect to, or how the element will be drawn. The actual position (the where) is specified using the top, left, bottom and right properties which we cover below.

Possible values

Elements can be positioned in one of four ways: statically, relatively absolutely or fixed. The value is specified by one of four keywords: static, relative, absolute and fixed.

These values are explained in detail above, but to recap:

When the position of an element is static, the browser will draw the element in the usual place. Essentially, this is the traditional positioning used with HTML.

When the position of an element is relative, it is placed with respect to its natural position, that is, with respect to where it would be if statically positioned.

For example, with a relative position, a top of 20px and a left of 20px (we'll look at the top and left properties very shortly), an element is placed 20px to the right and 20px down from where it would naturally, or statically be located.

With absolute positioning, an element is placed in a specified location with respect to its parent element. If the parent element is the <body>, the location of the element may appear to be with respect to the window. However, when the page is scrolled it should be apparent that it is not: the element will move so it is no longer (for example) 20px from the top of the window. However, it is in fact still 20px from the top of the <body>.

fixed positioning is different. Here the element really is positioned with respect to the window. This means if the page is scrolled, the element remains onscreen, fixed with respect to the top and left of the window.

Applications like Dreamweaver and GoLive create <div>s with absolute positioning, plus values for top and left, width and height, to build page layout. This is because, as you'll see in the browser support information on this page, for a long time this was the only way you could use CSS positioning and expect support in even the most recent browsers. The level of support, however, has improved.

Default values

When no position property is specified, an element has a static position.

Is it inherited?

An element does not inherit the position property of its parent.

Hints and suggestions

Take some time to consider the differences between the different types of positioning.

top

What it does

The top property specifies where the top of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

top is an offset from either

the top edge of the natural location of the element (for position: relative)

the top of the parent element (for position: absolute)

the top of the window (for position: fixed)

See position above for more on what the individual values mean.

Negative top values move an element up the page, positive top values move the element down the page.

For elements with a position: static, top has no effect.

Possible values

The top of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When the top is specified using a length value, the element is offset up or down the page with respect to a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When top is specified as a percentage value, the element is offset up or down the page by this percentage of the height of its parent element.

We cover percentage values in detail in our section on values.

Auto

A top of auto places the element with no offset up or down the page.

Default values

If no top is specified, the top of the element is auto.

Is it inherited?

An element does not inherit the top of its parent, however, an element may be affected by the positioning of its parent element.

Hints and suggestions

top specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

left

What it does

The left property specifies where the left of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

left is an offset from either

the left edge of the natural location of the element (for position: relative)

the left of the page or the left of the parent element (for position: absolute)

the left of the window (for position: fixed)

See position above for more on what the individual values mean.

Negative left values move an element leftwards along the page, positive left values move the element rightwards.

For elements with position: static, left has no effect.

Possible values

The left of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When left is specified using a length value, the element is offset to the left or to the right along the page from a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When left is specified as a percentage value, the element is offset to the left or to the right along the page by this percentage of the width of its parent element.

We cover percentage values in detail in our section on values.

Auto

A left of auto places the element with no offset leftwards or rightwards on the page.

Default values

If no left is specified, the left of the element is auto.

Is it inherited?

An element does not inherit the left of its parent. However, the left of an element can be affected by the position of its parent.

Hints and suggestions

left specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

bottom

What it does

The bottom property specifies where the bottom edge of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

bottom is an offset from either

the bottom edge of the natural location of the element (for position: relative)

the bottom of the parent element (for position: absolute)

the bottom of the window (for position: fixed)

See position above for more on what the individual values mean.

For elements with a position: static, bottom has no effect.

Possible values

The top of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When the top is specified using a length value, the element is offset up or down the page from a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When bottom is specified as a percentage value, the bottom edge of an element is offset up or down the page by this percentage of the height of its parent element.

We cover percentage values in detail in our section on values.

Auto

A bottom of auto places the element with no offset up or down the page.

Default values

If no bottom is specified, the bottom of the element is auto.

Is it inherited?

An element does not inherit the bottom of its parent.

Hints and suggestions

bottom specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

right

What it does

The right property specifies where the right edge of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

right is an offset from either

the right edge of the natural location of the element (for position: relative)

the right of the parent element (for position: absolute)

the right of the window (for position: fixed)

See position above for more on what the individual values mean.

For elements with a position: static, right has no effect.

Possible values

The right of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When right is specified using a length value, the right edge of the element is offset to the left or to the right along the page from a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When right is specified as a percentage value, the right edge of the element is offset to the left or to the right along the page by this percentage of the width of its parent element.

We cover percentage values in detail in our section on values.

Auto

A right of auto places the right edge of an element with no offset leftwards or rightwards on the page.

Default values

If no right is specified, the right of the element is auto.

Is it inherited?

An element does not inherit the right of its parent.

Hints and suggestions

right specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

width

What it does

Not surprisingly, this property specifies how wide an element will appear on the page.

Possible values

Padding properties in CSS

With cascading style sheets, any element can have padding. Padding is the space between the edge of an element (its border) and its contents. There can be padding to the left, top, bottom and right of any element. The padding properties are:

padding

padding-top

padding-left

padding-bottom

padding-right

padding, padding-top, padding-left, padding-bottom, padding-right

What it does

The padding properties set the size of the top, left, bottom, right and all paddings respectively.

Possible values

Padding can be specified as either a percentage, a length or using the keyword auto.

Padding can not take negative values. If you want to do this, you probably should be using the margin properties.

Percentages

A percentage padding value sets the affected padding to that percentage of the width of the parent element. For instance, a padding-right: 20% sets the width of the right padding to 20% of the width of the element which contains the element. This is true even for padding-top and padding-bottom.

Length values

We cover length values in detail in our section on values. Essentially though there are two types of length value. There are absolute values such as px. If you use one of these, the actual length of the padding will always be the same. You design much more flexible pages if you use a relative value, like em. If you use a relative value the size of the padding will always be proportional to the calculated size of the content of the element. This is to be encouraged.

Default values

If no padding value is specified, the padding of an element is 0. That is, there is no space between the edge of an element and the contents of the element.

Is it inherited?

An element does not inherit the padding property of the element which contains it.

Hints and suggestions

Padding can be used to achieve similar effects to the positioning properties and margins.

Margin properties in CSS

With cascading style sheets, any element can have a margin. A margin is the space between an element and the elements to its top, left, bottom and right. The margin properties are:

margin

margin-top

margin-left

margin-bottom

margin-right

margin, margin-top, margin-left, margin-bottom, margin-right

What it does

The margin properties set the size of the top, left, bottom, right and all margins respectively.

Possible values

Margins can be specified as either a percentage, a length or using the keyword auto.

Margins can be negative values.

Percentages

A percentage margin value sets the affected margin to that percentage of the width of the parent element. For instance, a margin-right: 20% sets the width of the right margin to 20% of the width of the element which contains the element. Note that this is true even for margin-top and margin-bottom.

Length Values

We cover length values in detail in our section on values. Essentially though there are two types of length value. There are absolute values such as px. If you use one of these, the actual length of the margin will always be the same. You design much more flexible pages if you use a relative value, like em. If you use a relative value the size of the margin will always be proportional to the calculated size of the content of the element. This is to be encouraged.

Default values

If no margin value is specified, the margin of an element is zero. That is, there is no space between an element and adjacent elements. Unfortunately most browsers do tend to set default margins on elements such as paragraphs. You can overcome this by specifically setting the margin for these types of element to 0.

Rather than relying on length values, or percentage values, keyword values can be used. Keywords have a similar effect to percentages.

The keywords which can be used to specify position are

top

left

center

right

bottom

Rather than go into laborious detail, here is the explanation from the recommendation

'top left' and 'left top' both mean the same as '0% 0%'.

'top', 'top center' and 'center top' mean the same as '50% 0%'.

'right top' and 'top right' mean the same as '100% 0%'.

'left', 'left center' and 'center left' mean the same as '0% 50%'.

'center' and 'center center' mean the same as '50% 50%'.

'right', 'right center' and 'center right' mean the same as '100% 50%'.

'bottom left' and 'left bottom' mean the same as '0% 100%'.

'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.

'bottom right' and 'right bottom' mean the same as '100% 100%'.

Default values

If no background-position is specified, this is the equivalent of a background-position of 0% 0%, that is, the top left of the background image is placed in the top left of the element.

Is it inherited?

An element does not inherit the background-position of its parent.

Hints and suggestions

The background-position property lets you create watermark effects by placing a single image in the center of an element, for example in the center of a page. It is a tricky, but powerful property.

Not every type of element can have a background-position, even though any type of element can have a background-image. Only block elements and replaced elements can have this property. For more on the different types of element, see Types of Element.

background

Percentages

Our section on percentages discusses percentage values in detail.

Percentage values for line-height are calculated as a percentage of the font-size of the element. So when a line-height is specified as a percentage value, a similar multiplication occurs to that which we saw above in Multiples. The factor of 1.2 we saw in multiples above translates as a percentage of 120%.

With a font size of 12pt, and a line-height of 200%, the resultant line height (space between baselines) is 12x2=24pt.

Lengths

Our section on values discusses length values in detail.

Rather than setting a multiple of the current font-size, length values nominate a specific value for the line-height. This value can be a relative value such as em or ex, or an absolute value such as pt or cm.

See the section on length values for more on the use of relative and absolute length.

normal

In addition, the line-height can be specified as normal. This overrides otherwise inherited values.

Default values

If no line-height value is specified or inherited, the line-height of an element is normal.

Is it inherited?

The line-height of an element is inherited from the element which contains it. There are however a couple of complicating factors to keep in mind. The following is entering the realm of trainspotters, so feel free to ignore it.

If a line-height is specified as a multiple, then a child element inherits the factor, not the resultant value. In our example above, we saw that a font-size of 10pt, with a line-height of 1.2 results in a distance of 12pts between the baseline of adjacent lines. Now, a child element would inherit a line-height multiple of 1.2, rather than a line-height value of 12pts. So, if a child element had an 8pt font size, the resultant line-height of that element would be 1.2x8=9pt, not the 12pt line height of the parent element.

On the other hand, if the line-height of an element is specified as a percentage or a length value, any child element inherits the value, not the multiple.

Hints and suggestions

As with other properties which can take relative and absolute values, take a look at our discussion of length values in the section of values for suggestions about when each type is appropriate.

vertical-align

What it does

Elements often appear on the same line, or lined up horizontally across a page. The vertical-align property gives control over how elements align vertically across the page.

Possible values

The font-size property lets you specify how large text appears on a web page. With HTML, you are restricted to 7 relative sizes that have no relationship with traditional type measurements such as points, ems, exs and picas. Nor do HTML text sizes even have any relationship with pixels.

CSS allows you to specify the size of font in any of these measures, and in a number of other ways.

Possible values

Length values

Hints and suggestions

You probably think of italic as a style (or cue), as this is the way that desktop publishing categorizes the effect. CSS in part uses more traditional typographical terminology and concepts, in addition to DTP. Italic is often thought of in the same breath as underlining, and other visual effects. The text-decoration property, discussed below, provides control over a number of these kinds of effect.

text-decoration

What it does

The text-decoration property enables you to specify a number of effects that might be thought of as styles. With text-decoration you can apply the following styles to text: none, underline, overline, line-through, blink.

An element can have either a text-decoration of none, or any number of the other styles.

Possible values

text-decoration can be either none, or a list of one or more of underline, overline, line-through, blink. If there is more than one value in the list, values are separated by spaces.

Default values

By default, the text-decoration of an element is none.

Is it inherited?

Technically, text-decoration is not inherited. In practice, it is.

Confused? If you aren't interested, assume that text-decoration is inherited. If you are interested in what I mean, read on.

text-decoration spans an entire element, and so affects child elements. Even though they don't strictly inherit the property, they will be affected by it.

The value underline for the property text-decoration has a special quality which makes it different to the other values for this property. When a parent element has the value underline, children of that parent should also be underlined, even when those children are given a text-decoration value of none.

Also when a child element inherits underline and the child is a different color from its parent then the underlining should be the same color as the parent, regardless of the color of the child.

Hints and suggestions

Many of what we might think of as styles (thinking in word processing terms) are lumped into this property. If you are looking for other related styles, you might look at font-weight for bold, font-style for italic, and font-family to specify the font in which an element appears.

text-transform

What it does

text-transform allows you to specify the capitalization of text. There are three types of capitalization, and as well you can specify that an element not be affected by text transformation.

Possible values

The text-transform property allows you to ensure that an element conforms to a specific type of capitalization. The three types of capitalization supported are

capitalize, where every word is capitalized, ie the first letter of each word is in capital letters

uppercase, where every letter is in uppercase

lowercase, where every letter is in lowercase

Regardless of the actual capitalization of the text in the source, the browser transforms the text to conform to the desired capitalization.

Alternatively, you can specify a text-transform of none. This ensures that inherited text-transform values have no effect.

Default values

By default, an element has a text-transform of none.

Is it inherited?

Elements have the text-transform value of their parent element.

Hints and suggestions

Many properties, among them text-transform, have a possible value of none. These values exist to let you override the effect of inherited values.