CSS 2.1 Primer© Oxford Brookes University 2008
-- ii --
© Oxford Brookes University 2008
-- 1 --
© Oxford Brookes University 2008
Two aspects of any document are content and style. The content gives the information to be presented and the style defines how the information is presented. Most publishers have a House Style that is a consistent way of presenting information. The same information printed by two publishers may look quite different. This Primer describes the basic features of Cascading Style Sheets (CSS for short) which is the primary styling language used with XHTML.
XHTML's main role is to markup the content. What is needed is the ability for publishers to have control of style. In the context of the Web, the publisher can be the organisation that owns the Web site but it can also be the person viewing the information. It is only by having a clear separation between content and style that this can be achieved. So in this Primer we shall use XHTML in most of the examples as a means of defining the content and CSS to define the style.
CSS is a World Wide Web Consortium (W3C) Recommendation. That means that all the W3C Members (which includes all the main browser manufacturers) have agreed to support it in their products. That does not necessarily mean immediately as each has its own production schedule for enhancements to its products but long term all should support all of the features. CSS first became a W3C Recommendation in 1996 (called CSS 1) and there was a significant update in May 1998 (called CSS 2). Not all of the facilities in CSS 2 were implemented by all manufacturers. A new version is under development called CSS 2.1 that corrects some errors found in CSS 2 and either removes or makes optional those features not supported. It also adds some features that people required (particularly for XML) that were not in CSS 2.
CSS 2.1 is currently (August 2008) a Candidate Recommendation waiting for at least two major browsers to implement every feature.
With the ever increasing use of the Web by a large variety of devices, there is a need to profile facilities in specifications like CSS so that a device with limited capabilities can support a consistent subset. Towards this goal, CSS 3 will be divided into a set of modules with profiles aimed at devices like mobile phones, PDA, televisions etc. This work goes under the general heading of CSS 3. Some modules are near completion while others still have significant work to be done on them. It is still under development and will not be considered further in this Primer. This Primer aims to describe the main facilities available in CSS 2.1
XHTML allows a Web page to be laid out and there is some guidance to browsers as to how to represent each element. Thus, h1 should be larger than h2 and em should be emphasised by some method but that is as far as it goes.
The aim of Cascading Style Sheets (CSS) is to give the page developer much more control on how a page should be displayed by all browsers.
A style sheet is a set of rules that controls the formatting of XHTML elements on one or more Web pages. Thus, the appearance of a Web page can be changed by changing the style sheet associated with it. There is no need to make detailed changes within the Web page to change how it looks.
Some of the advantages of using style sheets are accessibility, different styling can be provided for different users dependent on their requirements. Separating style and content is good design and will normally produce a better and more consistent web site. As one style sheet can be used for a whole web site, it normally means that the overall size of the web site is smaller and the downloads required for each page can be decreased by up to 40%. Allowing browsers to make overall decisions on styling often means that the rendering time by the browser is also shorter. We shall see how styling can radically effect a page's layout and this allows important information to appear early in the XHTML markup of the page even if the design requires it to appear later. This can be of use to search engines.
A set of Web pages may use a common style sheet. A Web page may have its own style sheet that refines the information in the common style sheet. Readers may define their own style sheet indicating their preferences. Thus style sheets cascade and decisions need to be made as to which style sheet is in control when there is a conflict. But more of that later.
A style sheet rule consists of two parts. A selector that defines which XHTML elements are controlled by the rule and a declaration that says what the required effect is. Thus a simple rule is:
h1 { color: blue }
This says that all h1 elements in a page should be displayed in blue. The selector is h1. color is the property that is to be changed, blue is the value that the property is changed to and color: blue is the declaration.
XHTML elements in the body of the document fall into two main types:
-- 2 --
© Oxford Brookes University 2008
Block-level elements can usually have inline elements as children but not vice versa. XHTML expects browsers, by default, to present a block-level element by terminating the previous element and effectively start the block-level element on a new line with spacing between it and the previous one. On the other hand, the expectation is that the browser will display inline elements in the same horizontal direction as the previous text possibly changing some aspects of the rendering. For example:
<h1>My Title</h1> <p>This is a paragraph that I am using to illustrate a <em>block-level</em> element with some <em>em</em> elements in it showing how <em>inline</em> elements are handled.</p> <h2>My Sub-title</h2> <p>And this is the start of my next paragraph . . .</p>
h1, h2 and p are block-level elements while em is an inline element. A browser might display this content something like Figure 1.1. The dashed borders have been added to show the extent of the block-level p elements and the dotted borders show the extent of the inline elements.
This is a paragraph that I am using to illustrate a block-level element with some em elements in it showing how inline elements are handled.
And this is the start of my next paragraph . . .
Figure 1.1: Block level and Inline Elements
The body of an XHTML page contains text marked-up using block-level elements (h1, p, ul, div etc). Each block-level element has an area which contains the content. For a p element, this is the area that contains the whole paragraph while for h1 it is often an area consisting of a single line of text. CSS provides facilities for controlling where that area is placed relative to other areas.
The inline elements often inherit the style of the block-level element that they are part of but can be given special styling appropriate to the inline element. For example:
Some XHTML elements behave like block-level elements but have some additional properties. Lists and tables, for example, are special types of elements that have their own unique styling.
There are four ways of linking a style sheet to an XHTML page:
Initially, while you are experimenting, the simplest method is to use the XHTML style element to add a style sheet to an XHTML page. The style element, consisting of a set of rules, is placed in the document head.
When you have decided on your house style, it is likely that you will move to having the style sheet external to an individual page and either linked in or imported.
The facilities provided by style sheets are much as you would expect:
-- 3 --
© Oxford Brookes University 2008
Note that XHTML defines elements as block-level and inline as this gives it an easy way of expressing the rules of markup such as the follwing inline elements can be children of any block-level element. There is no requirement that a style sheet has to present block-level elements starting on newlines nor do inline elements have to continue on the same line as previous text. Many innovative web page designs change the presentation of the amrked-up page significantly.
To achieve these effects, the Web browser has to know what to do with style sheets. Really old browsers will not have this capability but IE6/7, Opera 9, Firefox 2 and Safari all have good support for most of CSS 2.1 and are committed to full support in the future. XHTML Editors often have Style Sheet additions and separate Style Sheet Editors exist. Visit the W3C CSS Web Page [1] for all the latest information.
This Primer will not tell you everything about CSS. If you get to the position where you really need to know precisely what happens in some subtle situation, you need to consult the formal specification that can be found on the World-Wide Web Consortium's web site [5].
To make it as easy as possible to relate the specification to the Primer, the order of presentation here is similar to the order in the Specification.
Let us assume initially that we wish to define a style sheet by adding a style element to a page. The page will look something like:
<html>
<head>
<style type="text/css">
h1 {font: 12pt/14pt "Palatino"; font-weight: bold; color: red}
h2 {font: 10pt/12pt "Palatino"; font-weight: bold;color: blue}
p {font: 10pt/12pt "Times"; color: black}
</style>
<body>
. . .
</body>
</html>
The set of rules are contained between <style> and </style>. Ignore the type attribute, for now. The reason for this will be come clearer later. For now let us concentrate on the rules. As stated in the introduction, each rule consists of two parts: a selector that defines what XHTML elements are controlled by the rule and a declaration that says what the required effect is. The selectors above define three rules that apply to all h1 elements, all h2 elements and all p elements respectively. We shall show how we can be both more selective (control a subset of h1 elements) or control a set of elements (a block of different XHTML elements) later. Initially let us look at the declarations. Each declaration consists of the name of a property and the value to be assigned to it. So the simplest style rule is:
selector { property: value }
To set several properties in a single rule requires the individual declarations to be separated by semicolons:
selector { property1: value1; property2: value2; property3: value3 }
Sections 4 to 8 define the CSS properties that can be set. The general format for each sub-section is for the title to give a descriptive name followed immediately by the syntax definition (in BNF style) for the property declaration. For example:
font-weight: <value>
This says that the name of the property is font-weight and <value> is assigned to it. In the CSS specification, the possible values of <value> are defined. In this Primer, sometimes only a sample of the possible values are given to give an idea of what is possible rather than exhaustively list them all.
In BNF, the notation could be written:
<font-weight> ::= font-weight: <value>
-- 4 --
© Oxford Brookes University 2008
This style is used if, for example, the definition of <value> needs to be given separately.
Some of the syntax definitions can be quite complicated. The notation used is as follows:
| Notation | Meaning |
|---|---|
| <Abc> | A value of type Abc. Some of the more common types are discussed later. |
| abc | A keyword that must appear exactly as written. |
| X Y Z | X must occur then Y then Z in that order. |
| X | Y | Xor Y must occur. |
| X || Y || Z | X, Y or Z or some combination in any order. |
| [ Abc ] | The square brackets are used to group items together. |
| ST* | ST is repeated zero or more times. ST can be a bracketed set of items. |
| ST+ | ST is repeated one or more times. |
| ST? | ST is optional. It can either appear once or not at all. |
| ST {A,B} | ST must occur at least A times and at most B times. |
Four values ( <length>, <percentage> , <color>, <url>) are used by many of the rules. They are explained in this section.
<length> ::= [ + | - ]? <number> <unit>
A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviation that indicates the unit (this can be left out if the value is 0). There are no spaces in the middle of a length value.
Both relative and absolute length units are supported in CSS. Relative units give a length relative to another length property. The relative length units are:
| Unit | Meaning |
|---|---|
| em | Historically width of letter M, but in CSS it equals the font height (if font is 12pt then 1em=12pt) |
| ex | x-height: the height of the letter x which varies between fonts (a 12pt Times Roman 'ex' will be bigger than a 12pt Baskerville 'ex') |
| px | pixels: in CSS the pixel is equal to one pixel on a normal computer display. So if the output is to go to a 1200dpi laser printer, the browser will take 1 pixel to mean about 12 laserprinter pixels. |
CSS recommends that the pixel unit px should be regard as the smallest unit of resolution. So if you were reading information on the display at arms length distance away, it should be approximately 0.28mm or 1/90th of an inch. Consequently, a measurement of 12pt and 15px should be about the same.
The absolute length units are:
| Notation | Meaning |
|---|---|
| in | inches |
| cm | centimetres |
| mm | millimetres |
| pt | Printing industry point; originally there was 72pt to a French inch which was larger than an English inch! Postscript and CSS define 1pt=1/72in |
| pc | picas; 1pc=12pt |
-- 5 --
© Oxford Brookes University 2008
Lengths such as pt and in are converted to pixels using the user agent's guess. So which units should you use in defining a Style Sheet? There is no real correct answer as it depends on what is the main output device and whether you would like to change the whole Style sheet by just applying a single change. In the Lie and Bos book [4}, a strong recommendation is made to use ems. If the user has set the browser up to use 10pt type for displaying Web pages, then setting the h1 font size to 2em will ensure that the font-size is 20pt in size. If another user sets the browser normal font size to be 12pt, the h1 element will have a 24pt font size.
The x-height of a font is critical to legibility. A 12pt font with a small x-height will be less readable than one with a larger x-height. Inches and millimetres depend on the browser knowing the size of the display being used. If I have a portable with a small display and attached to it is a much larger screen, what is an inch. Well the browser has to make a decision with some help from the user.
In summary, absolute units are not really absolute and relative units are not always relative. The only real recommendation that can be made is be careful if you plan to mix units and especially if you mix absolute and relative ones.
<percentage> ::= [ + | - ]? <number> %
A percentage value is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value.
Percentage values are relative to other values, as defined for each property. Often the percentage value is relative to the element's font size but it might be the width of the page.
<color> ::= <keyword> | # <hex> <hex> <hex> | # <hex> <hex> <hex> <hex> <hex> <hex> | rgb ( <int> <int> <int> ) | rgb ( <percentage. <percentage > <percentage> )
A color value is a keyword or a numerical RGB specification. The original set of keyword colours was aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. These have been enhanced as a result of the requirements from other specifications. The set of keywords with the corresponding RGB values given in Appendix C are likely to be supported by a browser.
RGB colours can be defined in one of four ways:
The following examples all specify the same colour:
pre { color: red }
h1 { color: #foo }
p { color: #ff0000 }
h2 { color: rgb(255,0,0) }
h3 { color: rgb(100%, 0%, 0%) }
Values outside the range are clipped. So, for example, integer values have a maximum of 255 and everything above that will be changed to 255. Similarly 120% is interpreted as 100%.
<url> ::= url( <whitespace>? [ ' | " ]? <characters in url> [ ' | " ]? <whitespace> )
A URL value is of the form:
url(xyz)
where xyz is the URL. The URL may be quoted with either single (') or double (") quotes and may have whitespace before the initial quote or after the final quote.
Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the XHTML source. Some examples are:
body { background: url("circle.gif") }
body { background: url("http://www.clrc.images/monkey.gif") }
-- 6 --
© Oxford Brookes University 2008
font-family: [<family-name> | <generic-family>] [ , [ <family-name> | <generic-family> ] ]* <family-name> ::= serif | sans-serif | cursive | fantasy | monospace
The font to use is set by the font-family property. Instead of defining a single font, a sequence of fonts should be listed. The browser will use the first if it is available but try the second and so on. The value can either be a specific font name or a generic font family.
Good practice is to define one or two specific fonts followed by the generic family name in case the first choices are not present. Thus a sample font-family declaration might look like this:
p { font-family: "New Century Schoolbook", Times, serif }
Any font name containing spaces (multiple words) must be quoted, with either single or double quotes. That is why the first font name is quoted but Times is not.
The first two requests are for specific fonts New Century Schoolbook and Times. As both are serif fonts, the generic font family listed as a backup is the serif font family. In this case, Times will be used if New Century Schoolbook is not available, and a serif font if Times is not available.
Some example fonts are:
See also the font property which lets the user define a set of font properties in a single command..
font-style: normal | italic | oblique
The font-style property has one of three values: normal, italic or oblique (slanted). A sample style sheet might be:
h3 { font-style: italic }
p { font-style: normal }
Italic and oblique are similar. Italic is normally a separate font while oblique often bends the normal font.
font-variant: normal | small-caps
Normally, upper case characters are much larger than the lower-case characters. Small-caps are often used when all the letters of the word are in capitals. In this case the upper case characters are only slightly larger than the lowercase ones. An example is:
p { font-variant: small-caps }
For example, the text Elephant with font-variant set to small-caps would appear as Elephant.
-- 7 --
© Oxford Brookes University 2008
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
The font-weight property sets the weight of the font to values like normal and bold. It also has values bolder and lighter which are relative to any inherited font -weight. Block-level elements are displayed with default values inherited from the body or div element that surrounds it. It is also possible to define absolute font-weights. Values range from 100 to 900 with normal being 400 and bold being 700 approximately. If that much control is not possible, some of the weights may be grouped together (for example, 100, 200 and 300 may all look the same) and if the specified weight is not available, an alternative value will be chosen. Some examples are:
h1 { font-weight: 800 }
h2 { font-weight: bold }
h3 { font-weight: 500 }
p { font-weight: normal }
font-size: <absolute-size> | <relative-size> | <length> | <percentage> <absolute-size> ::= xx-small | x-small | small | medium | large | x-large | xx-large <relative-size> ::= larger | smaller
The font-size property sets the size of the displayed characters. The absolute-size values are small, medium and large with additional possibilities like x-small (extra small) and xx-small. Relative sizes are smaller and larger. They are relative to any inherited value for the property. The length value defines the precise height in units like 12pt or 1in. Percentage values are relative to the inherited value. Some examples are:
h1 { font-size: large }
h2 { font-size: 12pt }
h3 { font-size: 5cm }
p { font-size: 10pt }
li { font-size: 150% }
em { font-size: larger }
The guidance is that the medium font should be around 10pt so, in this case li and em might be similar in size.
font: [ <font-style> || <font-variant> || <font-weight>]? || <font-size> [ /<line-height> ]? || <font-family> ]
The font property may be used as a shorthand for the various font properties, as well as the line-height. For example:
p { font: italic bold 12pt/14pt Times, serif }
specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points. Note: The order of attributes is significant: the font weight and style must be specified before the others.
color: <color>
The color property sets the foreground colour of a text element. See Section 3.4 for color values. For example:
h1 {color: blue }
h2 {color: rgb(255,0,0) }
h3 {color: #0F0 }
background-color: <color> | transparent
-- 8 --
© Oxford Brookes University 2008
The background-color property sets the background colour of an element. For example:
body { background-color: white }
h1 { background-color: #000080 }
The value transparent indicates that whatever is behind the element can be seen. For example if the background to the body element was specified as being red, a block-level element with background-color set to transparent would appear with a red background.
background-image: <url> | none
The background-image property sets the background image of an element. For example:
body { background-image: url("/images/monkey.gif") }
p { background-image: url("http://www.cclrc.com/pretty.png") }
h1 { background-image: none }
When a background image is defined, a compatible background colour should also be defined for those users who do not load the image or to cover the case when it is unavailable. If parts of the image are transparent, the background colour will fill these parts. For example:
<div style="background-image:url('wall.png')">
<p>An item</p>
<p>Another</p>
<p>And third</p>
</div>
Figure 5.1 shows what might be the result depending on the font-size and other properties specified for the div.
Figure 5.1: List with background-image
A good rule of thumb is that background images should be used when the information supplied by the image is just styling. The img element is a more suitable markup if the image is content important to the understanding of the page.
background-repeat: repeat | repeat-x | repeat-y | no-repeat
If the background image does not fill the whole element area, this description specifies how it is repeated. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. Setting background-image to repeat will repeat the image in both x and y directions. For example:
div { background-image: url(/images/monkey.gif) }
div { background-repeat: repeat-x }
In the above example, the monkey will only be tiled horizontally as shown in Figure 5.2.
Figure 5.2: Monkey tiled horizontally
-- 9 --
© Oxford Brookes University 2008
background-attachment: scroll | fixed
The background-image may be pasted on to the screen of the display in which case, when the elements that it is associated with move, they will be on top of a different part of the image. The alternative is that the background image is attached to the element, in which case, when the element moves, the background stays the same. The background-attachment value of scroll indicates that the background moves with the content, while fixed indicates it is fixed. For example, the following specifies a fixed background image:
body { background-image: url("monkey.jpg") }
body { background-attachment: fixed }
This tends to be mainly useful if the background image is attached to the body element. If the page is very long and the user has to scroll down the page to see the bottom, the background will remain fixed if background-attachment is set to fixed. For most other uses, the default value of scroll makes more sense.
background-position: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
The effect of the background-image (especially when it is repeated) will depend significantly on the origin of the image relative to the display (in fixed attachment) and relative to the element (in scroll attachment).
The background-position property gives the initial position of the background image relative to the display or element depending on the attachment mode.
The easiest way to assign a background position is with the keywords:
The background position defines a point on the image that coincides with a position on the area it is to be mapped onto. So top left says that the top left of the image coincides with the top left of the area and so on.
Percentages and lengths may also be used to assign the position of the area and background image.
When using percentages or lengths, the horizontal position is specified first, followed by the vertical position. Thus 20% 50% specifies that the point 20% across and 50% down the image is placed at the point 20% across and 50% down the area.
If only the horizontal value is given, the vertical position is assumed to be 50%.
The keywords are interpreted as follows:
| Notation | Notation | Notation | Meaning |
|---|---|---|---|
| top left | left top | 0% 0% | |
| top | top center | center top | 50% 0% |
| right top | top right | 100% 0% | |
| left | left center | center left | 0% 50% |
| center | center center | 50% 50% | |
| right | right center | center right | 100% 50% |
| bottom left | left bottom | 0% 100% | |
| bottom | bottom center | center bottom | 50% 100% |
| bottom right | right bottom | 100% 100% |
background: [ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
The background property is a shorthand for the background-related properties. Some examples are:
body { background: white url(http://www.clrc/xyz.gif) }
p { background: url(../backgrounds/lion.png) #F0F000 fixed }
h1 { background: #0F0 url(grass.jpg) no-repeat bottom left }
div { background: white url('monkey.jpg') repeat scroll 0% 50%}
-- 10 --
© Oxford Brookes University 2008
A value not specified will receive its default value (see Appendix B). For example, the first two rules above will have the background-position set to top left. The result of the fourth example is shown in Figure 5.3. As the image covers the complete area, the white background will only be seen if the user chooses not to download the image.
Figure 5.3: Monkey tiled and position center vertically
word-spacing: normal | <length>
The word-spacing property defines additional spacing between words. Negative values are permitted which allows the letters to be closed up or even overlap. Word spacing may be influenced by alignment. See Section 3.2 for a definition of <length>. For example:
p { word-spacing: 0.4em }
h1 { word-spacing: -0.2em }
h2 { word-spacing: normal }
letter-spacing: normal | <length>
The letter-spacing property defines additional spacing between characters. Negative values are permitted. A value of normal will still allow justification to take place. A setting of 0 is defined as preventing justification. For example:
h {letter-spacing: 0.2em }
p {letter-spacing: -0.1cm }
Here are two examples of the effect of additional word spacing and letter spacing.
This is a sentence where space has been added between words using word-spacing
And this is one with added letter-spacing
text-decoration: none | [ underline || overline || line-through || blink ]
The text-decoration property defines how text is decorated. One or more settings can be made. For example:
h3 { text-decoration: underline blink }
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
The vertical-align property defines the vertical positioning of an inline element (such as some text or even an image) relative to the current baseline. It could be used to produce x2. The letter x in this case would be called the parent and the power 2 would be called the child.
The value may be a percentage of the element's line-height property. It specifies how much the element's baseline is raised above the parent's baseline. Negative values are permitted.
-- 11 --
© Oxford Brookes University 2008
The other values are given in the following table.
| Notation | Meaning |
|---|---|
| baseline | aligns baselines of element and with the parent's baseline |
| middle | aligns vertical midpoint of element with parent's baseline plus half the x-height (height of letter "x") of the parent |
| sub | subscripts the element |
| super | superscripts the element |
| text-top | aligns tops of element and top of parent element's font |
| text-bottom | aligns bottoms of element and bottom of parent element's font |
| top | aligns top of element with tallest element on the line |
| bottom | aligns bottom of element with lowest element on the line |
Each font will have well-defined values for the aspects of the font defined above to aid it in achieving the various effects required for vertical alignment.
The vertical-align property is also useful for aligning images. Some examples are:
em { vertical-align: 10% }
img { vertical-align: middle }
text-transform: capitalize | uppercase | lowercase | none
The text-transform property allows text to be transformed by one of four properties:
| Notation | Meaning |
|---|---|
| capitalize | capitalizes first character of each word |
| uppercase | capitalizes all characters of each word |
| lowercase | uses small letters for all characters of each word |
| none | leaves characters as defined |
Examples:
h1 { text-transform: uppercase }
h2 { text-transform: capitalize }
For example, the text-transform property allows an organisation to define a house style for its documents irrespective of author preferences. The authors can have their own view of whether titles should be capitalized or not but the corporate house-style that is applied to all documents could use the text-transform property to insist on a particular style.
text-align: left | right | center | justify
The text-align property defines the horizontal alignment of text. For example:
h1 { text-align: center }
h2 {text-align: left }
h3 {text-align: right }
p {text-align: justify }
text-indent: <length> | <percentage>
The text-indent property defines the amount of indentation that the first line of the element has. A percentage refers to the parent element's width. A common use is for indenting paragraphs. For example:
p { text-indent: 5em }
Negative values can be used to move the first line of the text out into the margin by the amount specified.
line-height: normal | <number> | <length> | <percentage>
The line-height property defines the spacing between baselines of two adjacent lines of text It can be defined in points, inches, centimetres, or even pixels. When the value is a number, the line height is calculated by multiplying the element's font size by the number. Percentage values are relative to the element's font size. Negative values are not allowed.
-- 12 --
© Oxford Brookes University 2008
The line-height property could be used to double space text:
p { line-height: 200% }
If the font-size is 10pt, the following rules all have the same effect:
p { line-height: 1.2 }
P { line-height: 1.2em }
P { line-height: 120% }
A value of normal is usually set to between 1.0 and 1.2
Block-level elements such as h1, p, ul have an area that contains the content of the text in the element. CSS provides control of how that content is placed on the page. CSS allows the core content to be surrounded by padding, a border and a margin as shown in Figure 7.1
Figure 7.1: Box Model
The padding has the same background as the element, the border can be set to have a different background while the margin is always transparent so that the background of the parent element shows through.
If the next item below also has a margin, the top margin of the next element will be immediately below the border of the first element. Properties associated with margins, borders and padding can be set differently for the top, right, bottom and left sides (for example, their width). If all four are set by a single property (for example, margin), it is possible to specify between 1 and 4 values (notation {1,4} ). The four values are defined in the order top, right, bottom and left. If less than 4 are specified, the rule is as follows. If only one value is given, it applies to all sides. If 2 or 3 are given, the missing values are the same as the opposite side.
margin-top: <length> | <percentage> | auto
margin-right: <length> | <percentage> | auto
margin-bottom: <length> | <percentage> | auto
margin-left: <length> | <percentage> | auto
margin: [ <length> | <percentage> | auto ] {1,4}
The first four properties set one of the margins while the last property is a shorthand that can set all four in the order given above. The length can be given in points, inches, centimetres, or pixels. Percentage values are relative to the width of the parent element. Negative margins are permitted so that overlapping can be achieved.
The following rule would set no bottom margin for the document:
body { margin-bottom: 0 }
-- 13 --
© Oxford Brookes University 2008
Other example might be:
li { margin-left: 50% }
ul { margin-bottom: 2em }
p { margin-right: 1in }
body { margin: 1em 1in 2em 1in }
The last example sets the margin-top to 1em, the margin-bottom to 2em and the right and left margins to 1 inch.
padding-top: <length> | <percentage>
padding-right: <length> | <percentage>
padding-bottom: <length> | <percentage>
padding-left: <length> | <percentage>
padding: [ <length> | <percentage>] {1,4}
Padding is defined in much the same way as the margin. The main difference is that negative padding is not allowed. An example is:
h1 { background: red }
h1 { padding: 1em 1in }
The padding would also be coloured red.
border-top-width: thin | medium | thick | <length>
border-right-width: thin | medium | thick | <length>
border-bottom-width: thin | medium | thick | <length>
border-left-width: [ thin | medium | thick | <length>
border-width: [ thin | medium | thick | <length> ]{1,4}
The general rules for defining borders are much as for margins and padding. However, negative borders are not allowed. The assumption is that the browser will make thin borders smaller than medium ones and thick ones larger than medium ones. No other guidance is given.
border-color: <color> {1,4}
The border-color property sets the colour of the border. The four border parts (top, right, bottom, left) can be set to different colours. An example is:
p { border-color: black red black red}
This would set the border as a solid black line top and bottom and red at the sides.
border-style: [ none | dotted | dashed | solid |
double | groove | ridge | inset |outset ] {1,4}
The border-style property sets the style of the border and must be specified for the border to be visible (the default is none). For double, two lines are drawn and the width is between the outer edges of the two lines. Groove, ridge, inset and outset produce various 3D effects normally associated with buttons on a display.
border-top: [ <border-top-width> || <border-style> || <border-color> ] border-right: [ <border-right-width> || <border-style> || <border-color> ] border-bottom: [ <border-bottom-width>|| <border-style> || <border-color> ] border-left: [ <border-left-width> || <border-style> || <border-color> ] border: [ <border-width> || <border-style> || <border-color> ]
The first four properties are a shorthand for setting the width, style, and colour of one part of an element's border.
The border property is a shorthand for setting the same width, style, and colour to all four border parts. Examples of border declarations include:
h2 { border-top: dotted 3em }
p { border-right: solid blue }
li { border-left: thin dotted #FF0000 }
h1 { border: medium blue double }
In the following example:
-- 14 --
© Oxford Brookes University 2008
<style type="text/css">
ul { margin: A B C D }
ul { padding: E F G H }
ul { border: medium solid black; background-color: red }
li { margin: a b c d }
li { padding: e f g h }
li { border: medium solid black; background-color: blue }
</style>
.....
<p>The possible values of the list are:</p>
<ul>
<li>first list element</li>
<li>second list element</li>
</ul>
<p>And this is where the next paragraph will be placed
The user has control of all the values shown in Figure 7.2.
Figure 7.2: List Parameters
Note that the two margins in the middle are collapsed to a single margin.
width: <length> | <percentage> | auto height: <length> | auto
These two properties apply to both block-level elements and replaced elements such as images. The width or height can be specified and the aspect ratio maintained by setting the other one to auto. If both are specified precisely, the scaling will not maintain the aspect ratio. If both are specified as auto, the intrinsic size of the image is used. For example:
img {width: 100px}
img {height: auto}
Percentage values for width refer to the parent element's width. Negative values are not allowed. Users should be aware that scaling by arbitrary amounts can severely degrade the image quality as can changing the aspect ratio so some care should be taken when using this property.
float: left | right | none
The float property allows the user to wrap text around an element. If left is specified, the element floats to the left and the text wraps around to the right and vice versa. The float property is discussed in more detail in the Layout Chapter.
clear: none | left | right | both
The clear property can be used by box-level elements to ensure that a previous floating element is not adjacent to one of its sides. A value of left applied to an element such as h1 would ensure that any images with float set to left defined above it in the page would not appear to its left. The element would effectively move below the image (by adding addtional space above the h1 element). For example:
h1: {clear: left }
The value right ensures that it is does not overlap with any images floated to the right. The value both is equivalent to setting both left and right. The property can also be used by inline elements.
-- 15 --
© Oxford Brookes University 2008
display: block | inline | list-item | run-in | inline-block | none
table | inline-table |table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption
CSS when used with XHTML has a good knowledge of which elements are inline elements and which are block-level. Even for elements defined by the user using div and span the type of element is known. The only thing not known is whether it is a list element which has different inheritance rules from normal paragraphs. If CSS is used with XML, the elements have no concept of inline and block-level and there needs to be a mechanism to define which elements are inline and which are block-level.
The display property describes how an element is displayed by giving an element one of four values:
| Notation | Meaning |
|---|---|
| block | defines the element as being a new rectangular area positioned relative to other adjacent areas. H1 and P would normally displayed as a block. |
| inline | defines the element as a new area on the same line as the previous content. |
| list-item | same as block except a list-item marker is added which can appears outside the box |
| run-in | can be inline or block depending on the context |
| inline-block | added in CSS 2.1. Acts as a block-level element but flows as though it was an inline box (like an image) |
| none | no display at all |
An example of run-in is:
h3 {display: run-in; font-size:14pt}
<h3>A Run-in Title:</h3>
<p>A following paragraph</p>
This would be displayed as:
A Run-in Title: A following paragraph
The h3 element still retains its hierarchy in the parse tree so p is still its following sibling. The only major browser to implement it so far is Opera.
Elements are given default display values by the browser, based on suggested rendering in the XHTML specification.
Examples could be:
p { display: block }
em {display: inline }
li {display: list-item }
img {display: none }
The display property allows the normal settings to be changed.
white-space: normal | pre | nowrap | pre-wrap | pre-line
The white-space property defines how spaces within an element are displayed. This property takes one of five values:
| Notation | Meaning |
|---|---|
| normal | White-space between tags and characters is reduced to a single space. Break lines as necessary |
| pre | Additional spaces and line breaks are preserved. Justification is suppressed |
| nowrap | Collapses white-space as in normal but suppresses line breaks |
| pre-wrap | Does not collapse white-space, preserves line breaks and breaks lines as necessary |
| pre-line | Collapses white-space, preserves line breaks and breaks lines as necessary |
-- 16 --
© Oxford Brookes University 2008
Examples could be:
pre { white-space: pre }
p { white-space: normal }
Only the first three are well supported in the major browsers. This is partly due to the rather confused definition in CSS. There are basically three independent decisions that need to be made:
This means there should be 8 possible values to pre.
| Value | Collapses white-space? | Automatically breaks long lines? |
Line breaks are preserved? |
|---|---|---|---|
| normal | Yes | Yes | No |
| pre | No | No | Yes |
| nowrap | Yes | No | No |
| pre-wrap | No | Yes | Yes |
| pre-line | Yes | Yes | Yes |
| ? | Yes | No | Yes |
| ? | No | Yes | No |
| ? | No | No | No |
Why are not all possibilities catered for? The answer is poor design in CSS bundling three independent properties into one! Also, the model is based on the assumption that the writing direction is left to right. Once the text becomes bi-directional (English text within Hebrew text for example) the concept becomes even more confused.
Somewhat connected with white space handling is what happens when a tabcharacter is encountered. Whitespace is defined as spaces, newlines and tabs. If white-space:pre is set, the browser should convert tab to multiple spaces where last one is a multiple of 8
12345678901234567890123456789012345678901234567890 a b c d e f g
Characters should be at positions 1, 9, 17, 25, 33, 41, 49
Unfortuantely IE gets it wrong whereas both Mozilla and Opera are correct.
Soft Hyphens are supported in CSS 2.1. These allow words to be split across lines at positions specified by the person who defined the text. For example:
<p>This line contains ab­ra­ca­da­bra ab­ra­ca­da­bra ab­ra­ca­da­bra ab­ra­ca­da­bra several times</p>
This line contains abracadabra abracadabra abracadabra abracadabra several times
The word abrcadabra can be broken at the positions defined by the soft hyphen character and a hypen included. Unfortunately the feature is not supported in Firefox but is in IE and Opera.
-- 17 --
© Oxford Brookes University 2008
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | armenian | georgian | none
Not all of these values are supported by the major browsers at this point in time (August 2008).
The list-style-type property specifies the type of list-item marker to be used for ordered and unordered lists, and is used if:
Some examples are:
li { list-style-type: square }
ul { list-style-type: decimal }
ol { list-style-type: lower-alpha }
The first displays small squares, the second 1, 2, 3, etc and the third a, b, c, etc.
list-style-image: <url> | none
The list-style-image property defines the image to be used as the list-item marker when image loading is turned on. It replaces the marker specified in the list-style-type property. For example:
ul { list-style-image: url("arrow.gif") }
li { list-style-image: url("triangle.png") }
list-style-position: inside | outside
This property defines where the marker is displayed relative to the list item. For inside, the lines will wrap under the marker instead of being indented while for outside it will not. An example is:
ul { list-style: outside }
ol {list-style: inside }
where the first would produce:
* List item 1 extending to second line of list item * List item 2 extending to second line of list item
and the second would produce:
1. List item 1 extending to second line of list item 2. List item 2 extending to second line of list item
list-style: [ <list-style-type> || <list-style-position> || <list-style-image> ]
The list-style property is a shorthand for the list-style-type, list-style-position, and list-style-image properties. For example:
li { list-style: square inside }
ul { list-style: circle url(triangle.png) outside}
ol { list-style: upper-alpha none }
-- 18 --
© Oxford Brookes University 2008
So far, individual rules have been applied to all elements of a specific type. While that may be appropriate for something like h1, it is less so for something like p as frequently a sub-set of the paragraphs in a document may require specific styling. Within XHTML, a number of facilities are provided to allow more specialised control. These are described in this section.
The elements of a specific type can be grouped into classes by the XHTML class attribute. For example:
<h1 class="firstsection"> Section One Heading </H1> .... <h1 class="secondsection"> Section Two heading </H1> ... <h1 class="thirdsection">Section Three Heading </H1> ...
The selector in a style rule need not be an element type but can be qualified by a class name. So for example:
<style>
h1.firstsection {font: 15pt/17pt; color: red}
h1.secondsection {font: 15pt/17pt; color: green}
h1.thirdsection {font: 15pt/17pt; color: blue}
</style>
Similarly, in a document written by two people you might have:
<style>
p.mytext {font: 14pt/16pt; color: red}
p.histext {font: italic 12/14pt Times; color: green}
</style>
<body>
<p class="mytext"> This is a paragraph that I wrote.</p>
<p class="histext"> This is a paragraph that my partner wrote.</p>
</body>
In such an example, it is feasible that the other author also would have added headings and other features. Classes can be applied to different elements so the document could also contain:
<h1 class="histext"> His Title </h1>
In this case, the selector can just consist of the class name:
.histext { font-size: small; color: green}
In this case, the histext class may be used with any element.
It is good practice to use classes to break up the content of a document into a semantically meaningful breakdown and consider how it should be styled later.
XHTML allows several class names to be associated with a single element and each can be used for specifying styling. This allows the same element to be categorised in more than one way. For example:
<p class="mine code">x=y</p> <p class="his ref"> [16]</p> <p class="mine ref"> [18]</p> <p class="his code">y=3</p>
-- 19 --
© Oxford Brookes University 2008
Here the paragraphs are categorised on both their type and their author. Styling could be defined by:
.mine {color: red}
.his {color: green}
.code {font-family: Courier}
.ref {font-style:italic}
If there is a conflict between the two classes in the styling required, the normal precedence rules apply (see Section 12).
Several class selectors acan be specified in a single rule. In this case, they are read from left to right. For example:
<style type="text/css">
p.mine.long {font-size:12pt;color:red}
p.his.long {font-size:10pt;color:blue}
p.mine.short {font-size:16pt;color:brown}
p.his.short {font-size:18pt;color:green}
</style>
A paragraph must contain a class attribute with both class names (possibly more) before it satisfies ths rule.
This example works fine in Firfox 2, Opera 9 and IE7 but not in IE6. Multiple class selectors is one feature of CSS 2.1 not implemented until IE7.
The id attributes in XHTML are similar to classes in that they give another level of naming but in addition id attributes are unique and are associated with a single element. Thus it is possible to write:
<p id="abc123">Text quotation</p>
Each id attribute has a unique value over the document. The value consists of an initial letter followed by letters, numbers, digits, hyphens, or periods. The letters are restricted to A-Z and a-z.
The text above could be selected by:
#abc123 { text-transform: uppercase}
Contextual selectors allow a finer specification based on the context of the element type. For example, emphasised sections within a h1 element might be displayed differently from emphasised sections that appear within other headings. Contextual selectors consist of two or more simple selectors following each other. These selectors can be assigned properties and they will take precedence over simple selectors so for example:
h1 em { color: green }
p em { color: red }
div p em { background: blue }
The emphasised text within an h1 element would be green while those in paragraphs would be red unless the paragraph resided within a div element in which case the emphasised text would have a blue background.
The selector only requires the second element specified to be a descendant of the first and not an immediate child. To insist that the second element is a child of the first element requires:
h1 > em { color: green }
p > em { color: red }
div > p > em { background: blue }
Adjacent selectors allow you to influence the styling of an element dependent on its nearest neighbour. For example:
h3 + p {color:red}
. . .
<h3>A Title</h3>
<p>A Paragraph</p>
<p>Another Paragraph</p>
This would render the first paragraph after the h3 heading in red. Adjacent selectors are supported by Opera and Firefox but not IE6 or IE7.
If the same rule applies to a set of elements, they can be grouped together. For example, all of the headings could be given the same font and colour by:
h1, h2, h3, h4, h5, h6 {color: red; font-family:sans-serif }
-- 20 --
© Oxford Brookes University 2008
To match any element, it is possible to replace the element name in the selector by the symbol *. In most of the examples used so far, there is no real use for the universal selector as omitting the name implies all possibilities. Where it is useful is within contectual selectors. For example:
div * li {color:red }
Within any div element, list items will be red independent of whether they are within ul or ol lists.
It is possible to do a selection based on whether an element has an attribute and whether that attribute has a specified value. The possibilities are illustrated below.
h1[class] { color:blue }
h1[class = "main"] { color:red }
h1[class ~= "main"] { color:green }
h1[class |= "main" ] {color:brown}
h1[class="main"][id="fred"] { color:yellow }
The first example will set to blue all h1 elements that have a class attribute. All h1 elements that have the class set exactly to main will be red. Those h1 elements that have main as part of the class value will be green. Those that have main as the start of a hyphen separated class value. Finally, the one that has id set to fred as well will be set to yellow.
Attribute slectors are well supported in Opera and Firefox but only partial support exists in IE6 and IE7.
Comments are denoted within style sheets with the same conventions that are used in C programming. A sample CSS comment would be:
p {color: green } /* A comment for this rule */
The two XHTML elements div (for division) and span (for span over) can be used in conjunction with the class attribute to define new XHTML elements. For example:
<div> class = "newh1"> A Different Kind of Title </div>
effectively defines a new XHTML element newh1. A selector of the form:
div.newh1 { color: green }
would specify how this new element would appear. The span element acts in much the same way as div but is an inline rather than a block-level element.
It is possible to define quite complex selectors so we need to know what the parsing rules are for such selectors. Let us assume E is any element then a simple selector is of the form:
An exampe of a simple selector is:
E#fred:hover[class="abc"]
The rules for constructing more complex selectors are:
For example:
div.fred ol > li p + p :first-line
This selects a p element whose immediate sibling before it is a p element. They must be descendants of an li element that is a child of an ol element and the ol element must be a descendant of a div element of class fred. And it only applies to the first line of that p element!
Note that the div.fred way of writing class selectors is only available for XHTML and not XML in general. Similarly the #fred selection of an element with id set to fred
-- 21 --
© Oxford Brookes University 2008
Pseudo-classes and pseudo-elements are similar to classes and elements but are special in that they are automatically defined by a CSS-supporting browser. Rules for pseudo-classes or pseudo-elements take the form
selector:pseudo-class { property: value }
selector:pseudo-element { property: value }
Pseudo-classes are assigned to an anchor element to allow links to be displayed differently depending on whether they are visited or active links. A visited link could be displayed in a different colour and font size, for example. An active link is a link that is being followed at the moment by the browser. Normally, this would only be visible if the browser was displaying a hierarchy of pages. Examples might be:
a:link { color: red }
a:active { color: green; font-size: 140% }
a:visited{ color: blue; font-size: 60%; text-decoration: none}
The third rule would remove the underline from links that had already been visited.
Some browsers provide user support for how links should be displayed. In consequence, the styling of links may not be as useful as might be thought. The effect proposed by the stylesheet may not appear.
Many typographic styles start by capitalising or making bold the first line of text in an article. CSS provides support for this via a first-line pseudo-element. For example:
p:first-line { text-transform: uppercase; font-weight: bold }
might display the paragraph:
<p> When computers first were used in office automation, they were ineffective. </p>
with the first few words that appear on the first line set in capitals.
The first-letter pseudo-element is used to create effects on the initial letter of an element. For example:
p:first-letter { font-size: 32pt; font-weight:bold }
p:first-line { text-transform: uppercase; }
would have the initial letter as a font size of 32pt and the first line capitalised:
The first few words given in an article printed in the Economist. Their style is to increase the size of the first letter and capitalize the first line.
content: normal | none | [ <string> | <url> |
counter(<identifier> [, style]?) | counters( <identifier>, string [, style]?)
attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+
Two pseudo-elements exist to allow information to be added before or after a specific element. Such information is called generated content. For example:
p.note:before {content:"Note: "}
p.note:after {content:" (end of Note)"
. . .
<p class=note">A paragraph</p>
-- 22 --
© Oxford Brookes University 2008
The two pseudo-elements :before and :after are used to add content to the document to be presented that does not appear in the original XHTML. In this example paragraphs of class note have the string Note: added before the paragraph and the string (end of Note) added after the paragraph. This would generate a paragraph looking like:
Note: A paragraph (end of Note)
The possible sources for the generated content are:
An example of generated content that has always been there in XHTML is the decoration for lists (bullets or numbers) and this facility allows users both to tailor that decoration and produce decoration for their own uses. It is possible to point to a resource thus allowing a large block of content or even an image to be inserted. While there is good support for the facility in Firefox and Opera, the facility is not supported in IE. Generating content greatly widens what can be accomplished with CSS 2.1 and the lack of support in IE is a major omission.
The main points concerning counters are:
li:before {content:counter(listcounter) }
would display the current value of listcounter before each li elementFor example:
<style type="text/css">
ol {counter-reset: listcounter 4}
li {display:block}
li:before {content: counter(listcounter) ": "; counter-increment: listcounter 2}
</style>
. . .
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
This should result in:
6: First Item 8: Second Item 10: Third Item
Two other examples to illustrate how the facility could be used are:
p {counter-increment: par-num}
h1 {counter-reset: par-num}
p:before {content: counter(par-num, upper-roman) ". "}
. . .
img:before {content: attr(alt) }
-- 23 --
© Oxford Brookes University 2008
In the first, the property counter-reset resets the value of the variable par-num to zero. Each p causes the variable to be incremented and output before the paragraph. Consequently, all the paragraphs are numbered in each major section starting each time from 1.
In the second example, the img element has the value of its alt attribute output before the image. For a text-only browser, it would be possible to remove the image and replace it with the alt text. For example:
img { width: 0 !important;
height: 0 !important }
img:before { content: "[" attr(alt) "]";
color: yellow !important;
background: red !important;
margin: 0 0.33em !important }
The image is reduced to zero size and the alternative text is presented in yellow on a red background.
<link rel=<stylesheet> href= <url> type="text/css" [title=<string>]? [ media="<media>"]? > <media> ::= [ <medium> [,<medium>]* ] <medium> ::= [ print | screen | projection | braille | embossed | handheld | aural | all ] <stylesheet> ::= [stylesheet | alternate stylesheet]
To link to an external style sheet, the author creates a file containing the appropriate style rules and uses the link command as above. Convention is to name the file with a .css file extension. It allows the same style sheet to be used for any number of pages. More than one stylesheet can be provided for each media. One is defined with the stylesheet attribute set to stylesheet and the others set to alternate stylesheet. Both Netscape 6 and Opera 7 allow you to select which style you want from the View menu.
If the style sheets are called mystyles.css and myaltstyles.css and are located at:
http://cclrc.ac.uk/
the style sheets would be added by:
<head> <title>Title of page</title> <link rel="stylesheet" href="http://cclrc.ac.uk/mystyles.css" > <link rel="alternate stylesheet" href="http://cclrc.ac.uk/myaltstyles.css" > </head>
Other examples of link are:
<link rel="stylesheet" href="style.css" type="text/css" media="screen"> <link rel="stylesheet" href="another.css" type="text/css" media="screen, print"> <link rel="stylesheet" href="aural.css" type="text/css" media="aural">
The <link> tag is placed in the document head. The optional type attribute is used to specify a media type. The type text/css specifies a Cascading Style Sheet. This allows browsers to ignore style sheet types that they do not support. Configuring the server to send text/css as the Content-type for style sheets files is also sensible.
Internet Explorer registers the Internet Media (MIME) type for style sheets, so it is not necessary for the user to register the "text/css" type on the server.
External style sheets should not contain any XHTML tags. The style sheet should consist merely of style rules. For example:
p { color: red }
in a file could be used as an external style sheet.
The <link> tag has an optional media attribute, which specifies those media to which the style sheet should be applied. Possible values are:
-- 24 --
© Oxford Brookes University 2008
| Value | Meaning |
|---|---|
| for output to a printer | |
| screen | for presentation on computer screens |
| projection | for projected presentations |
| braille | for presentation on Braille tactile feedback devices |
| embossed | for paged braille printers |
| handheld | for small monochrome screens (phone, PDA) |
| projection | for overhead data projectors |
| tv | for low resolution devices with limited scrolling |
| tty | for limited devices with fixed width characters |
| aural | for aural presentation |
| all | for all output devices (the default) |
Multiple media are specified through a comma-separated list or the value all.
The rel attribute is used to define the relationship between the linked file and the XHTML document. By setting rel="stylesheet" a style sheet is specified.
A single style sheet may also be provided by multiple style sheet links:
<link rel="stylesheet" href="main.css" title="House"> <link rel="stylesheet" href="tables.css" title="House"> <link rel="stylesheet" href="forms.css" title="House">
In this example, three style sheets are combined into one "House" style that is applied as a default style sheet. To combine multiple style sheets into a single style, one must use the same title with each style sheet.
External style sheet are best used when the style is to be applied to many pages. Thus an external style sheet could be used by an author to change the look of an entire site by changing the house style sheet. Most browsers should cache an external style sheet thus avoiding a delay in page presentation once the style sheet has been cached.
<style type="text/css"> [title=<string>]?[ media = <media> ]? <rules> </style>
To embed a style sheet in an XHTML document,a <style> </style> block needs to be added at the top of the document, between the <html> and <body> tags. The <style> tag has an attribute, type which specifies the Internet Media type as text/css (allowing browsers that do not support this type to ignore style sheets). The <style> tag is followed by any number of style definitions or rules and terminated with the </style> tag.
The following example specifies styles for the <body>, <h1>, <h2>, and <p> tags:
<html>
<style type="text/css">
body {font: 10pt "Times"}
h1 {font: 15pt/17pt "Palatino"; font-weight:bold; color: maroon}
h2 {font: 13pt/15pt "Palatino"; font-weight:bold; color: blue}
p {font: 10pt/12pt "Palatino"; color: black}
</style>
<body>
...
</body>
</html>
Another example is:
<style type="text/css" media="screen"
body { background:url(grass.gif) red; color: black }
p em { background: yellow; color: black}
.note { margin-right: 1in; margin-left: 1in }
</style>
The style element is placed in the document head. The type attribute is used to specify a media type in the same way as the link element. Similarly, the title and media attributes may be specified with styling.
-- 25 --
© Oxford Brookes University 2008
Embedded style sheet are normally used when a document has a unique style.
A style sheet may be imported using the import statement. This statement may appear in a .css file or inside the style element. For example:
<style type="text/css" media="screen">
@import url(http://www.clrc.ac.uk/ralstyle.css);
@import url(/stylesheets/local.css);
p {background: yellow; color: black }
</style>
All @import statements must occur at the start of the style sheet. Any rules specified in the style sheet override rules in the imported style sheets so in our example, if an imported style sheets contains a P definition, paragraphs would still have a yellow background.
The order in which style sheets are imported is important as it determines how cascading takes place. If the ralstyle.css imported specified that em elements be displayed in blue and the local.css style sheet specified that em elements be shown in yellow, the second rule would define that the em elements should be in yellow.
Imported style sheets can be modularised in a number of ways. For example, a site might define separate style sheets for each element. It might have a simple.css style sheet for rules such as body, p, h1, and h2 and an extra.css style sheet for less common elements such as code, blockquote, and dfn. There might be a tables.css style sheet if table elements are to be used. Which style sheets are included in XHTML documents will depend on the need.
Style may be inlined using the style attribute associated with individual elements. For example:
<p style="color: red; font-family: 'New Century Schoolbook', serif"> </p>
Only this paragraph is styled by this style attribute, specifically in red with the New Century Schoolbook font, if available. Note that New Century Schoolbook is contained within single quotes in the style attribute as double quotes are used to contain the style declarations. Inlining styles mix content with presentation. It is recommended that this is used only as a last resort. They also apply to all media, as there is no method for specifying the medium for an inlined style.
Initially, it is probably a good idea to use just one method of specifying style sheets. However, if you want to have a corporate style that can be changed when justified it might well be sensible to link to the corporate style and embed the style local to the page. Similarly, the reader may well have his preferred style linked in rather than specify it for each document.
Inheritance has been implicit in some of the examples used already. Selectors which define a broad class of elements will be inherited by a narrower selector. For example, a colour defined for the body of a document will also be applied to text in a paragraph as the paragraph is part of the body. Properties defined for all paragraphs will also apply to paragraphs of a sub-class if not overwritten.
Style sheets can be defined for each page. The style sheet for a page can include a style sheet imported from another page. Readers can specify their own style sheet. When multiple style sheets are used, the style sheets may all want to control the same selection. Therefore, rules are required to specify which style sheet rule will take precedence. The precise rules are quite complicated but are approximately as follows:
In the example above, it is assumed that the author has started with some general style sheet that is imported. This has been followed by the local house style sheet for the company. The author has defined some generic style that is probably linked in to each page of a set and finally there may be some specific styling for the individual page. Within the page some special effect may be required on just one element or part of an element to make a specific point. An author's style sheet takes precedence over a reader's which takes precedence over a browser's. As the author becomes more specific, that style takes precedence over less specific ones.
For some situations, it is important that the reader's preferences take control (for example, a person with limited vision might want to increase the font sizes; somebody using his mobile phone might want to decrease them!). Thus, browsers need to have an ability to turn off the author's style or to change these precedence rules between author and reader.
The relative ordering can be changed by insisting that a particular style is more important than its place in the hierarchy suggests. For example, the company may insist that some aspects of the house style must be adhered to under all circumstances. The priority of a particular style rule can be enhanced by the !important attribute. For example:
h1 { font-size 16pt !important;
background: maroon !important }
-- 26 --
© Oxford Brookes University 2008
A browser must define all the relevant properties for all elements. This is achieved as follows:
The style sheets come from three different origins:
The precedence rules for the three origins is quite simple:
So the order is:
The author may have defined the styling for the document by linking to a style, including a style element at the head of the document (and this may import style sheets). Finally the author may have defined a style attribute for a specific element. The rules as to which takes precedence here is:
Note that precedence here is between rules of equal specificity. More specific rules will always take precedence over less specific ones whatever the source.
This allows us to remove rules of the same specificity if variants come from several sources. At the end of the prioritising, only one is retained.
To define which is the most specific rule, we need to check through the rules of different specificity. Here the rules are:
Specifity can be expressed numerically as:
-- 27 --
© Oxford Brookes University 2008
For example:
h1#abc {color:red}
#abc {color:green}
#def {color:blue}
<h1 id="def" style="color:pink">
<h1 id="abc" >
Element with id abc will be coloured red (101 versus 100) and the element with id def will be coloured pink.
And here is a third example with many style rules:
<div class="a"> <p class="b">An example <em class="c">emphasised</em> a lot</p> </div>
| Selector | Value |
|---|---|
| div.a p.b em.c {color:cyan} | 33 so wins |
| .c {color:brown} | 10 |
| div.a em {color:yelllow} | 12 |
| p.b em {color:blue} | 12 |
| p.b em.c {color:green} | 22 |
To ensure that an element inherits a value of a property from its parent, the only way to be sure is to have the most specific rule that wins the above cascade defining the property as having the value inherit. A common mistake is to have a document as follows:
<style type="text/css">
ul { color:red }
li { font-size:12pt }
</style>
<body>
<p>The possible values of the list are:</p>
<ul style="font-size:14pt">
<li>first list element</li>
<li>second list element</li>
</ul>
</body>
The font-size of the list elements will be 12pt and not 14pt. The only way for the 14pt to be inherited by the list elements is if there are no styling rules for list elements that apply to this list or you force inheritance.
<style type="text/css">
ul { color:red }
li { font-size:inherit }
</style>
<body>
<p>The possible values of the list are:</p>
<ul style="font-size:14pt">
<li>first list element</li>
<li>second list element</li>
</ul>
</body>
In this case, the font-size of the list items will be 14pt as the style rule has specified inheritance. The colour of the list items will be red as no colour is specified for the list item and there is a colour it can inherit from the ul element.
-- 28 --
© Oxford Brookes University 2008
Here is a longer example:
p {color:black}
p.notes {color:inherit; font-size:12pt}
h4 {color:inherit}
div.first {color:red}
div.second {color:blue}
div.third {color:brown}
<div class="first">
<h4>First Header</h4>
<p>Paragraph number one</p>
<p class="notes">Paragraph number two which is a note</p>
<p>Paragraph number three</p>
</div>
<div class="second">
<h4>Second Header</h4>
<p>Paragraph number one</p>
<p class="notes">Paragraph number two which is a note</p>
<p>Paragraph number three</p>
</div>
<div class="third">
<h4>Third Header</h4>
<p>Paragraph number one</p>
<p class="notes">Paragraph number two which is a note</p>
<p>Paragraph number three</p></div>
In this case, the heading and the note paragraph inherit their colour from the div element (red, blue or brown) while the first and third paragraphs will be black in each case.
Unfortunately, neither IE6 or IE7 supports inheritance in style rules yet although both Firefox 2 and Opera 9 do.!
A property may have value of inherit and be !important. This forces inheritance thus allowing properties to flow from the body element:
User/Reader's Style Sheet
body {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent !important;
}
The user's !important take precedence so all elements will inherit black as the colour. the background of the body element will be white and all elements will have transparent background. The effect is black text on a white background whatever the author's stylesheet says
A frequent requirement in page design is to have a multi-column layout which uses up the space available in a desired way. For example, the page could define left and right columns containing navigational information and a central column containing the main content of the page.
-- 29 --
© Oxford Brookes University 2008
The possible methods we have avalable for defining the position of the next block-level or inline element are:All 3 methods are well supported by browsers and give a number of different ways to achieve a multi-column layout. Two possibilities are:
In both approaches, the sizes of columns can be defined as a specific width or some fraction of the total width available. Frequently, the navigational columns are given a precise width (200px say) with the remaining width available to the main central content area.
Design issues arise when you want to provide backgrounds to the individual columns and a frequent solution is to use a background image that does not cover the whole width of the area and is not repeated in the X-direction thus making an area appear to have a smaller width than it actually has.
A second problem that occurs when floating content is that the floated content must appear before the non-floated content. This usually means that the navigational columns appear in the document before the main content. If, for accessibility or searching reasons, the main content is required to appear before the floated information, it is possible to achieve this but it does require a more complex design. One method that will be described is the use of negative margins.
To recap on the float property:
float: left | right | none clear: none | left | right | both
Elements in CSS can be floated left or right. Particularly useful for images but applies to a set of elements contained within a div element as well. For example
div (float:left; width:10%; border: 1px dotted black}
p {margin-left:12%; border:1px dashed black}
...
<div>
<h3>A title</h3>
</div>
<p>A paragraph that appears to the right of the title</p>
This would be displayed as:
A paragraph that appears to the right of the title
Clearly, the same effect can be achieved but with the floated area going to the right. Whether the item being floated is a block-level or inline element gives subtle differences. The possibilities are:
This is where we have:
<div><span></span> <div></div> Possibly floated <span></span></div>
-- 30 --
© Oxford Brookes University 2008
Suppose we have the following markup:
<div style="width:500px;font-size:6pt;border:1px solid black"> <span style="font-style:italic">After breakfast they went round to see Piglet and Pooh explained as they went that Piglet was a very small animal who did not like bouncing and asked Tigger </span> <div class="float" style="border:1px dotted black;width:300px; height:60px;font-size:8pt"> This whole paragraph comes from one of the books of A A Milne that includes as well as these characters Christopher Robin, Owl and Eeyore</div> <span style="font-style:italic;font-weight:bold"> who had been hiding behind trees said that a Tigger was only bouncy before breakfast and that as soon as they had had breakfast they became quiet and refined.</span> </div>
There are three possible floating values for the class named float for the central div element. First is that the normal flow is defined:
If the div element is to be floated left, the rules are (similar rules for float:right):
Floating left gives us:
The div's position is as before but as it has been taken out of the normal flow, any following markup will appear as though it does not appear apart from acting as a blocked area that subsequent content cannot flow into. Thus the following span continues where the span before the div completes. The result is similar for the float right except that now the position of the div has moved to the right. It still appears at the same height on the page as before:
-- 31 --
© Oxford Brookes University 2008
This is where we have:
<div><span></span> <span></span> Possibly floated <span></span></div>
Suppose we have the following markup:
<div style="width:500px;font-size:6pt;border:1px solid black"> <span style="font-style:italic">Of course they can. Tiggers can do everything. 'Can they climb trees better then Pooh?' asked Roo, stopping under the tallest Pine Tree, and looking up at it. 'Climbing trees is what they do the best,' said Tigger. </span> <img class="float" src="tigger.gif" width="140" height="115" alt="Tigger" style="margin:2px;border:black solid 1px"/> <span style="font-style:italic;font-weight:bold"> 'Much better then Poohs.' 'Could they climb this one?' 'They're always climb trees like that,' said Tigger. 'Up and down all day.' 'Oo Tigger, are they really?' 'I'll show you,' said Tigger bravely, 'and you can sit on my back and watch me.' For all the things which he had said Tiggers could do, the only one he felt really certain about suddenly was climbing trees. .</span> </div>
If the image is not floated, it appears as part of the inline text which must adjust the spacing between lines to accommodate it:
'Much better then Poohs.' 'Could they climb this one?'
'They're always climb trees like that,' said Tigger.
'Up and down all day.' 'Oo Tigger, are they really?'
'I'll show you,' said Tigger bravely, 'and you can sit
on my back and watch me.' For all the things which he
had said Tiggers could do, the only one he felt really
certain about suddenly was climbing trees. .
Here the line on which the image appears is moved down significantly.
If the image is floated to the left or to the right it is as though the next piece of text had to appear on the next line. Once this position is established, the image is floated left or right.
'Much better then Poohs.' 'Could they climb this one?'
'They're always climb trees like that,' said Tigger.
'Up and down all day.' 'Oo Tigger, are they really?'
'I'll show you,' said Tigger bravely, 'and you can sit
on my back and watch me.' For all the things which he
had said Tiggers could do, the only one he felt really
certain about suddenly was climbing trees. .
-- 32 --
© Oxford Brookes University 2008
This explains why when you float to the right it does not appear higher up as you might expect.
'Much better then Poohs.' 'Could they climb this one?'
'They're always climb trees like that,' said Tigger.
'Up and down all day.' 'Oo Tigger, are they really?'
'I'll show you,' said Tigger bravely, 'and you can sit
on my back and watch me.' For all the things which he
had said Tiggers could do, the only one he felt really
certain about suddenly was climbing trees. .
As before the text in the span following the image flows as though it appears immediately after the first span but with the image just acting as an obstruction to the flow creating an area into which the text cannot flow.
This is where we have:
<div><div></div> <div></div> Possibly floated <div></div></div>
Suppose we have the following markup:
<div style="width:500px;font-size:6pt;border:1px solid black"> <div style="font-style:italic">Piglet was a very small animal who did not like bouncing.</div> <div class="float" style="border:1px dotted black;width:300px;font-size:8pt"> This paragraph comes from A A Milne book </div> <div style="font-weight:bold;font-style:normal">A Tigger was only bouncy before breakfast and that as soon as they had had breakfast they became quiet and refined.</div> </div>
If the div is not floated, the three divs appear underneath each other:
If the div is floated left, it will appear in the same position but now the following div will appear on the same level as the middle div with the floated div just acting as an obstruction. Once it has passed the obstruction it starts using the whole width available to it:
A similar effect occurs when the div is floated right:
A common use for floating content is to include images within some text:
<div style="margin:2pt;border: 1px solid black;width:500px"> <p style="margin: 0pt 40pt 0pt 40pt"> <img class="float" src="microscope.png" />The following image is a good example of how you can ...</p> <div>
Note we have added a margin to the p element. If we float the image right, the rules stated above apply which is why the image appears before the text of the paragraph:
-- 33 --
© Oxford Brookes University 2008
The following image is a good example of
how you can
have the inline image of a microscope so that it floats to the right of the following text by
associating the float: right property with the image of the microscope and letting the text carry on to the
left of the image as we see here! Note that the text flows around the bottom of the image once the text is past it.
This may take longer than we think depending on the width of the page at the time! If it does not do it then you need
to add more and more text to the paragraph until it does. If you are going to have a full width page
this may take time.
Adding a margin around the image before floating it left improves the presentation:
The following image is a good example of
how you can
have the inline image of a microscope so that it floats to the right of the following text by
associating the float: right property with the image of the microscope and letting the text carry on to the
left of the image as we see here! Note that the text flows around the bottom of the image once the text is past it.
This may take longer than we think depending on the width of the page at the time! If it does not do it then you need
to add more and more text to the paragraph until it does. If you are going to have a full width page
this may take time.
Justifying the text in the paragraph will improve the presentation still further:
The following image is a good example of
how you can
have the inline image of a microscope so that it floats to the right of the following text by
associating the float: right property with the image of the microscope and letting the text carry on to the
left of the image as we see here! Note that the text flows around the bottom of the image once the text is past it.
This may take longer than we think depending on the width of the page at the time! If it does not do it then you need
to add more and more text to the paragraph until it does. If you are going to have a full width page
this may take time.
Suppose we have images floated left or right or both:
<div style="margin:2pt;border: 1px solid black;width:500px"> <p> <img style="float:left src="microscope.png" /> <img style="float:right" src="microscope.png" />The following image is a good example of how you can ...</p> <h3>A New Section</h3> <div>
This might appear as:
The following image is a good example of
how you can
have the inline image of a microscope so that it floats to the right of the following text by
associating the float: right property with the image of the microscope and letting the text carry on to the
left of the image as we see here! Note that the text flows around the bottom of the image once the text is past it.
This may take longer than we think depending on the width of the page at the time! If it does not do it then you need
to add more and more text to the paragraph until it does. If you are going to have a full width page
this may take time.
-- 34 --
© Oxford Brookes University 2008
However, if the text in the paragrpah is much less, you would have:
The following image is a good example of
how you can
have the inline image of a microscope so that it floats to the right of the following text by
associating the float: right property with the image of the microscope...
The clear property gives the designer the ability to force the following heading to clear the images to the left, right or both:
clear: none | left | right | both
By adding the property clear:both to the h3 element, the presentation would become:
The following image is a good example of
how you can
have the inline image of a microscope so that it floats to the right of the following text by
associating the float: right property with the image of the microscope...
Generating a two or three column layout with floats is relatively easy. The problems with both are similar so we will illustrate them with the simpler two column layout.
Suppose we have a set of links for navigation that we wish to appear on a page together with the main content of the page:
<div id="container" style="margin:2px;padding:2px;border: 1px solid black;width:500px">
<div id="navigation" style="border: 1px dotted black;">
<ul>
<li><a href="a.htm">Link A</a></li>
<li><a href="b.htm">Link B</a></li>
<li><a href="c.htm">Link C</a></li>
<li><a href="a.htm">Link D</a></li>
<li><a href="b.htm">Link E</a></li>
<li><a href="c.htm">Link F</a></li>
</ul>
</div>
<div id="main_content" style="border: 1px dashed black;">
<h3>Main Heading</h3>
<p>The content of the page</p>
<p>After breakfast they went round to see ...
</p>
</div>
</div>
-- 35 --
© Oxford Brookes University 2008
Adding float:left to the navigation div and removing the bullets on the list items would produce:
The content of the page
After breakfast they went round to see Piglet and Pooh explained as they went that Piglet was a very small animal who did not like bouncing and asked Tigger who had been hiding behind trees said that a Tigger was only bouncy before breakfast and that as soon as they had had breakfast they became quiet and refined.
One problems that is immediately obvious is that there is probably a need for padding to improve the two column effect. If the text in the main content is longer that the navigation then it flows underneath it. If you imagine that the two areas were different colours then the main content area encloses the navigation. If the main content is shorter than the navigation section, the main content background only appears down part of the navigation.
The way to keep the two areas separate, is to give the navigation area a width and give the main content a left margin that is greater than that width:
#navigation {width:100px}
#main_content {margin-left 105px;padding:4px}
The content of the page
After breakfast they went round to see Piglet and Pooh explained as they went that Piglet was a very small animal who did not like bouncing and asked Tigger who had been hiding behind trees said that a Tigger was only bouncy before breakfast and that as soon as they had had breakfast they became quiet and refined.
If the content on the left is not as long as the navigation block:
The content of the page
After breakfast they went round to see Piglet...
Adding a div of almost zero height to follow the main content and that clears both left and right will ensure that the main content is at least as long as the navigation:
The content of the page
After breakfast they went round to see Piglet...
The question still remains as to how you get the left and right columns to have different backgrounds and that is as long as the longest area, in this case the main content. Well the answer is you cheat! What we do know is that the enclosing div is as long as both the navigation and the main content. We cannot add a background colour which is different on the left side from the right but we can add a background image and a background colour to the container. So if the navigation is, say, 100px wide, adding, say, a background-color of yellow to the container and a 1px high, 100px wide grey image replicated in the Y-direction but not the X, the effect is a grey background on the left and a yellow background on the right and both will be the same length.
Achieving a three-column layout is pretty similar but you have the two navigation areas floated left and right and the main content has both left and right margins. You also may need to add another container if you want the three columns to have different background colours.
-- 36 --
© Oxford Brookes University 2008
The only drawback with the layout just described is that the main content that is not floated must appear last if the navigation is to appear at the top of the page. If for accessibility reasons or to improve your Google rating, you want the main content to appear first in the page, there is a way round it by using negative margins.
Suppose we have:
<div id="container" style="margin:2px;padding:2px;border: 1px solid black;width:500px">
<h2>Header</h2>
<div id="main_content" style="border: 1px dashed black;">
<h3>Main Heading</h3>
<p>The content of the page</p>
<p>After breakfast they went round to see ...
</p>
</div>
<div id="navigation" style="border: 1px dotted black;">
<ul>
<li><a href="a.htm">Link A</a></li>
<li><a href="b.htm">Link B</a></li>
<li><a href="c.htm">Link C</a></li>
<li><a href="a.htm">Link D</a></li>
<li><a href="b.htm">Link E</a></li>
<li><a href="c.htm">Link F</a></li>
</ul>
</div>
<h2>Footer</h2>
</div>
The content of the page
After breakfast they went round to see Piglet and Pooh explained as they went that Piglet was a very small animal who did not like bouncing
Suppose we now add the following styling to the main content:
width: 100%;float: left;margin-right: -200px;
The content of the page
After breakfast they went round to see Piglet and Pooh explained as they went that Piglet was a very small animal who did not like bouncing
If the main content had a positive margin, the area it could be rendered in would be decreased. If the main content area has a negative margin then it can effectively be rendered into an area outside its width. By floating the main content left, there is space for the navigation block to be rendered next to the main content. The only problem is that the main content is being rendered outside its area on top of the navigation block.
-- 37 --
© Oxford Brookes University 2008
We solve this by having an additional div around the content which has a right margin.
The content of the page
After breakfast they went round to see Piglet and Pooh explained as they went that Piglet was a very small animal who did not like bouncing
A full description of the technique can be found at http://www.alistapart.com/articles/negativemargins.
position: static | relative | absolute | fixed | inherit
The normal flow for the position of a block-level element is to position it immediately after the previous element. We have seen that for images and content contained within a div, it is possible to move them out of the normal flow by allowing them to float to the left or right.
For each block-level element, it is possible to define the position of that element using one of the values given above:
Here is an example;
<div style="margin:2px;padding:2px;border: 1px solid black;width:500px"> <h3>Static</h3> <p>This is the first paragraph</p> <p>This is the second paragraph</p> <p>This is the third paragraph</p> <p>This is the fourth paragraph</p> <p>This is the fifth paragraph</p> <p>This is the sixth paragraph</p> </div>
If the position property for the elements have been set to the value static, the result would be:
This is the first paragraph
This is the second paragraph
This is the third paragraph
This is the fourth paragraph
This is the fifth paragraph
This is the sixth paragraph
Using the same text but positioning the elements relatively, we would have something like:
<div style="margin:2px;padding:2px;border: 1px solid black;width:500px"> <h3>Relative</h3> <p style="position:relative;top:0pt;left:30pt">This is the first paragraph</p> <p style="position:relative;top:0pt;left:60pt">This is the second paragraph</p> <p style="position:relative;top:0pt;left:90pt">This is the third paragraph</p> <p style="position:relative;top:0pt;left:120pt">This is the fourth paragraph</p> <p style="position:relative;top:0pt;left:150pt">This is the fifth paragraph</p> <p style="position:relative;top:0pt;left:180pt">This is the sixth paragraph</p> </div>
-- 38 --
© Oxford Brookes University 2008
For each element, you need to work out what its original position would be and then position the element relative to that position:
This is the first paragraph
This is the second paragraph
This is the third paragraph
This is the fourth paragraph
This is the fifth paragraph
This is the sixth paragraph
A more complicated example would be:
<div style="margin:2px;padding:2px;border: 1px solid black;width:500px"> <h3>Relative</h3> <p style="position:relative;top:70pt;left:30pt">This is the first paragraph</p> <p style="position:relative;top:40pt;left:60pt">This is the second paragraph</p> <p style="position:relative;top:10pt;left:90pt">This is the third paragraph</p> <p style="position:relative;top:-20pt;left:120pt">This is the fourth paragraph</p> <p style="position:relative;top:-50pt;left:150pt">This is the fifth paragraph</p> <p style="position:relative;top:-80pt;left:180pt">This is the sixth paragraph</p> </div>
For each element, you need to work out what its original position would be and then position the element relative to that position. In this case those calculations are a bit more complicated!
This is the first paragraph
This is the second paragraph
This is the third paragraph
This is the fourth paragraph
This is the fifth paragraph
This is the sixth paragraph
If the positions are defined absolutely, then these positions are with respect to the div that contains the elements.
<div style="margin:2px;padding:2px;border: 1px solid black;width:500px;height:120pt;position:relative"> <h3 style="position:absolute;top:90pt;left:250pt">Absolute</h3> <p style="position:absolute;top:60pt;left:50pt">This is the first paragraph</p> <p style="position:absolute;top:60pt;left:170pt">This is the second paragraph</p> <p style="position:absolute;top:0pt;left:170pt">This is the third paragraph</p> <p style="position:absolute;top:0pt;left:50pt">This is the fourth paragraph</p> <p style="position:absolute;top:30pt;left:110pt">This is the fifth paragraph</p> <p style="position:absolute;top:90pt;left:110pt">This is the sixth paragraph</p> </div>
This is the first paragraph
This is the second paragraph
This is the third paragraph
This is the fourth paragraph
This is the fifth paragraph
This is the sixth paragraph
As you can position any set of elements anywhere on the page, this gives a number of advantages:
-- 39 --
© Oxford Brookes University 2008
One question that does arise is what happens when two elements are positioned to occupy the same area. In the simplest case, the element that appears later in the document is drawn over the one that appears earlier. However, elements can have a z-index property added that can change this default ordering. In this case, the element with the largest z-index value is drawn last.
The basic layout we want to achieve is something like:
Each area is contained in a div element with the centre one defined as position:relative
The three centre columns are defined as:
The result would be as follows:
The content of the page
After breakfast they went round to see Piglet and Pooh explained as they went that Piglet was a very small animal who did not like bouncing and asked Tigger who had been hiding behind trees said that a Tigger was only bouncy before breakfast and that as soon as they had had breakfast they became quiet and refined.
The end of the content in the centre of the page.
Adding the appropriate margin settings makes achieving a 3-column layout relatively simple. Getting different backgrounds on each column correct is a bigger problem but can be done by adding containers appropriately.
There are quite a few major styles for web design:
-- 40 --
© Oxford Brookes University 2008
overflow: visible | hidden | scroll | auto clip: rect(<shapeval> , <shapeval> , <shapeval> , <shapeval> ) | auto shapeval: <length> | auto
Conside this example of some absolutely positioned pre elements inside a bordered div.
Some overflow:visible text that is longer than the box that has been supplied
The size of the absolute positioned box may not be large enough for the contents. Properties to control what happens are:
The usual rule is that if an image is content, use the img or object tag and only use background images for styling not content
However, what if you need to use styled text because, for example, it is the company logo.
The challenge is to replace the text by the logo and various solutions exist. We consider two of them:
For example:
#container {background:url('../icons/smbrookes.gif')
top left no-repeat;
width:80px;height:40px}
#logo {display:none}
<h3 id="container"><span id="logo">Oxford Brookes University</span></h3>
<p>The university is a great place to study</p>
The pros and cons of this approach are:
A second approach is:
#container {font-size:40px;
padding:40px 0 0 0;
overflow:hidden;
background: url('../icons/smbrookes.gif')
top left no-repeat;
height:0px;width:80px;}
<h3 id="container">Oxford Brookes University</h3>
<p>The university is a great place to study</p>
-- 41 --
© Oxford Brookes University 2008
A third approach is to use a negative text-indent:
#container {text-indent:-500px;
background: url('../icons/smbrookes.gif')
top left no-repeat;
height:40px;width:80px;}
<h3 id="container">Oxford Brookes University</h3>
<p>The university is a great place to study</p>
Styling of tables in CSS is complicated by the fact that there are two different models available:
The first only allows one border to appear while the second allows multiple borders. The second is the default. Suppose we have the table:
<table title="Membership of W3C" summary="Test Table"> <caption>W3C Membership</caption> <thead> <tr> <th>Type</th><th>Americas</th><th>Europe</th><th>Pacific</th><th>Total</th> </tr> </thead> <tbody> <tr><th>Full</th><td>62</td><td>29</td><td>17</td><td>108</td></tr> <tr><th>Affiliate</th><td>240</td><td>123</td><td>47</td><td>410</td></tr> <tr><th>Total</th><td>302</td><td>152</td><td>64</td><th>518</th></tr> </tbody> </table>
If the style sheet is:
table
{
border-collapse:separate
}
td {border:solid blue 2pt}
th {border:solid red 1pt}
-- 42 --
© Oxford Brookes University 2008
The result would be:
| Type | Americas | Europe | Pacific | Total |
|---|---|---|---|---|
| Full | 62 | 29 | 17 | 108 |
| Affiliate | 240 | 123 | 47 | 410 |
| Total | 302 | 152 | 64 | 518 |
By changing the styling to:
td {border:solid blue 2pt}
th {border:solid red 1pt}
table {border:dotted green 3pt; border-collapse:separate;}
the result becomes:
| Type | Americas | Europe | Pacific | Total |
|---|---|---|---|---|
| Full | 62 | 29 | 17 | 108 |
| Affiliate | 240 | 123 | 47 | 410 |
| Total | 302 | 152 | 64 | 518 |
Figure 14.1: Table Properties
By setting the border to collapse results in:
td {border:solid blue 2pt}
th {border:solid red 1pt}
table {border:dotted green 3pt; border-collapse:collapse;}
-- 43 --
© Oxford Brookes University 2008
The result becomes:
| Type | Americas | Europe | Pacific | Total |
|---|---|---|---|---|
| Full | 62 | 29 | 17 | 108 |
| Affiliate | 240 | 123 | 47 | 410 |
| Total | 302 | 152 | 64 | 518 |
Rows and columns can be styled individually and there is a well-defined algorithm that states which takes precedence (see Figure 15.1). Cells take precedence over rows and so on.
An example styling columns and rows is:
<style>
td {border:solid blue 2pt}
th {border:solid red 4pt}
table {border:dotted green 3pt;border-collapse:collapse;background-color:white}
colgroup.a {background-color:yellow}
tr.three {background-color:white}
col.col1 {background-color:navajowhite}
tbody.second {background-color:powderblue}
colgroup.b {background-color:lime}
tr.two {background-color:pink}
th.grand {background-color:yellow}
</style>
<table>
<colgroup class="a" ><col class="col1"/><col class="col2" /></colgroup>
<colgroup class="b" span="3" />
<thead>. . .</thead>
<tbody class="first">
<tr class="two">
<th>Full</th><td>62</td><td>29</td><td>17</td><td>108</td>
</tr>
</tbody>
<tbody class="second">
<tr>
<th>Affiliate</th><td>240</td><td>123</td><td>47</td><td>410</td>
</tr>
<tr class="three">
<th>Total</th><td>302</td><td>152</td><td>64</td><th class="grand">518</th>
</tr>
</tbody>
</table>
The result is:
| Type | Americas | Europe | Pacific | Total |
|---|---|---|---|---|
| Full | 62 | 29 | 17 | 108 |
| Affiliate | 240 | 123 | 47 | 410 |
| Total | 302 | 152 | 64 | 518 |
-- 44 --
© Oxford Brookes University 2008
While CSS was primarily designed to style XHTML, the way it is defined means that it is capable of styling any XML document. Nothing in CSS specifies the set of elements that it is capable of styling so that a rule like:
paragraph { font-size: 12pt }
is valid and could be applied to an XML document containg the element paragraph.
One problem that needs to be solved is specifying how the style sheet is specified to the XML file. The method used for such operations is the Processing Instruction:
<?xml-stylesheet type="text/css" href="URL" ?>
This should appear after the XML declaration and before the root element. The Processing Instruction can point to an embedded style sheet:
<?xml-stylesheet type="text/css" href="#stylesheet" ?> - - - <style id="stylesheet"> - - - </style>
is allowed.
Given an XML file such as:
<?xml version="1.0"?> <?xml-stylesheet type="text/css" href="ie.css"?> <books> <book> <title>XML IE5</title> <author>Alex Homer</author> <price>27.49</price> </book> . . . </books>
This could be styled by defining a file ie.css containing:
books {background-color:navajowhite;display:block}
book {margin:5pt;display:block}
title {font-size:20pt;color:red;font-weight:bold;display:inline}
author{font-size:18pt;color:blue;display:inline}
price {display:none}
Styling XML is somewhat different from styling XHTML as you cannot assume that the browser is aware of any default behaviours. In particular, it does not know which of the XML elements should be presented as block-level or inline. In consequence, each XML element must have a rule that declares whether to display it as block or inline or something else.
-- 45 --
© Oxford Brookes University 2008
The example above could have been written with the stylesheet embedded:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="#stylesheet"?>
<embedded>
<style id="stylesheet">
<!--
books {background-color:navajowhite;display:block}
book {margin:5pt;display:block}
title {font-size:20pt;color:red;font-weight:bold;display:inline}
author{font-size:18pt;color:blue;display:inline}
price {font-size:16pt;color:green;display:none}
-->
</style>
<books>
<book>
<title>XML IE5</title>
<author>Alex Homer</author>
<price>27.49</price>
</book>
. . .
</books>
</embedded>
The style sheet rules have beeen included as a comment to ensure no XML processing takes place on them.
If the full range of XHTML facilities are to be used, it will be necessary to specify all the possible display types. the complete list is:
| Value | Meaning | Like HTML |
|---|---|---|
| inline | inline element | em |
| block | block level element | p |
| list-item | list item | li |
| none | No display | None |
| run-in | Allows for run-in headers | None |
| compact | Header in margin | None |
| marker | ||
| table | Table | table |
| inline-table | Table does not start on a newline | None |
| table-row-group | Groups one or more rows | tbody |
| table-header-group | Groups one or more rows at head | thead |
| table-footer-group | Groups one or more rows at foot | tfoot |
| table-row | A row of cells | tr |
| table-column-group | Groups several columns | colgroup |
| table-column | A column of cells | col |
| table-cell | Table cell | th, td |
| table-caption | Caption | caption |
To display the book file as a table would require something like:
books {background-color:navajowhite;display:table;}
book {margin:5pt;display:table-row}
book *{display:table-cell; padding:5px;}
This would work correctly in both Opera and Firefox but not IE.
-- 46 --
© Oxford Brookes University 2008
None of the browsers are perfect. Of the major browsers, IE6 is probably the worst and latest Firefox is the best, but all have faults. IE7 cures most of the odd errors found in IE6 that needed work arounds. Browsers, in general, ignore rules that they don't understand so an approach to work around browser errors is to find a way of implementing these that only the errant browser understands. For example:
/* A legal CSS comment \*/ Some CSS commands /* another legal comment*/
IE on the Mac recognises \* as an escape character so does not end the comment. All CSS commands between these two comments are therefore ignored by IE on the Mac
* html div {
width: 130px;
w\idth: 100px;
}
Only IE6 believes that HTML is not the root element. This declaration is therefore ignored by Opera and Firefox. All IE6 browsers will set the width to 130px. Only IE6 in Quirks mode recognises the second width declaration.
If you want to find out about IE, Opera and Firefox bugs and work arounds, visit www.positioniseverything.net
This is a constantly changing scene as browsers fix work-arounds. The main reason for mentioning them here is that you may see odd rules mentioned here on existing sites. The safe approach is to only use features supported by all major browsers in XHTML Standards mode.
Within a style sheet it is possible to define rules that only apply to a specific media by using the @media rule. Some examples are:
@media print, handheld { body { font-size: 10pt } }
@media screen { body { font-size: 12pt } }
@media projection{
body { font-size: 16pt }
p { font-size:10pt}
. . .
}
The first rule only applies if the media is print or a handheld device. The second applies if the output is the display. The third shows how a set of styling can all be defined for a specfic media by enclosing them in a single @media rule. The possible media types are listed below.
Media such as print and aural have styling specific to that media.
Printing devices have the concept of a page. For outputting to such devices there is a need to control the size of a page and when a page break occurs.
size: <length>{1,2} | auto | portrait | landscape
-- 47 --
© Oxford Brookes University 2008
The size property together with margin allows the author to define the characteristics of the page:
@page {size: 8.5in 11in; margin: 2cm}
@page:left {margin-left: 4cm; margin-right: 3cm}
@page:first {margin-top: 10cm}
The property @media has the pseudo-elements left, right and first associated with it to allow specific styling for the first page and left and right pages.
page-break-before: auto | always | avoid | left | right page-break-after: auto | always | avoid | left | right page-break-inside: avoid | auto orphans: <integer> widows: <integer>
Some examples are:
h1 {page-break-before: always}
p {page-break-inside: always; orphans: 2}
The property orphans specifies the minimum number of lines of a paragraph at the bottom of a page. The property widows specifies the minimum number of lines of a paragraph at the top of a page. Between them they help to provide some control over when a page break should appear. For ensuring that chapters start on new pages and similar requirements, the propert page-break has the following possibilities:
Internationalisation is often called I18N as there are 18 letters between I and N in InternationalisatioN. Two key issues are the choice of character codes used in the markup and specifying the language used in the text. The latter is useful for linguistically sensitive searching (search French documents if the search is for a French word) and language-specific display properties. For example, voice browsers do a much better job if they know the text is in French. There are also some very specific language dependent punctuation conventions. Questions are marked up differently in some languages. There are different conventions for specifying the decimal point and the date. A date like 03/02/01 means different dates in the USA and UK, and it would appear as 2001-111-2 in Bulgarian! Tick in Japan means incorrect, 0 means Correct.
Layout may also have to change dependent on the language. For example, the same text in German is longer than the English equivalent.
Finally, the text direction may not be left-to-right and what are the conventions when right-to-left text is embedded in some left-to-right text?
An XML Processor is required to read UTF-8 and UTF-16 encodings, where UTF stands for UCS Transformation Format and UCS stands for Universal Character Set.
UTF-8 is a variable length encoding of Unicode using 1 to 4 bytes per character. The ASCII set of characters can be encoded as a single byte per character with most non-ideographics encoded as 2 bytes.
UTF-16 uses 2 bytes minimum per character. Other encodings may be used for XML in which case the XML declaration at the head of the file is required. For XHTML it can be specified in a meta element.
ISO/IEC 10646, the ISO standard is practically the same as Unicode and the Unicode Consortium is the organisation that defines the ISO/IEC standard now.
For European languages, you could use:
<?xml version="1.0" encoding="iso-8859-1" ?>
ISO-8859 is the old ECMA standard that predates Unicode and is a subset of Unicode. ISO-8859-1 (often called Latin 1) covers all the characters used in the Western European Languages except the euro sign (€)! Microsoft Windows supports Latin-1 plus some extensions including the euro.
-- 48 --
© Oxford Brookes University 2008
Other possibilities are:
If page is XHTML and transmitted as text/html a possible approach would be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"> <html> <head> <title>Internationalisation</title> <meta http-equiv="Content-type" content="text/html;charset=utf-8"/> </head>
When choosing an encoding, try and use an encoding that supports all the characters used (for example, français) and use escapes (hexadecimal form) if not possible.
It is wise not to use entity references such as if you anticipate XML processing of the XHTML, such as using XSLT.
The primary Language of a document can be defined by:
<meta http-equiv="Content-Language" content="en" />
The second is less well supported.
Language of a specific piece of text defined should be defined by a lang attribute on the specific markup. Some possible examples are:
lang="ISOLangCode" lang="ISOLangCode-ISOCountryCode" xml:lang="ISOLangCode" xml:lang="ISOLangCode-ISOCountryCode"
The lang attribute can be added to most elements and it can be inherited so a lang attribute on the html element applies to whole document unless redefined. The XML namespace also has a lang attribute that can be used. A belt and braces approach is possible for XHTML:
<p lang="fr" xml:lang="fr">Ce paragraphe est en français.</p>
Some example language tags are:
| Tag | Form | Meaning |
|---|---|---|
| en | language | English |
| de-AT | language-region | German as used in Austria |
| es-419 | language-region (UN M.49) | Spanish as used in Central and South America |
| de-CH-1901 | language-region-variant | German as used in Switzerland, orthography of 1901 |
| sr-Cyrl | language-script | Serbian as written in Cyrillic |
| sr-Cyrl-CS | language-script-region | Serbian as written in Cyrillic as used in Serbia and Montenegro |
| sl-Latn-IT-rozaj | language-script-region-variant | Slovenian as written in Latin as used in Italy, Resian dialect |
-- 49 --
© Oxford Brookes University 2008
For a multi-lingual document, it is appropriate to markup as:
<p lang="en">This paragraph is in English.</p> <p lang="fr">Ce paragraphe est en français.</p> <ul title="Titre en français" xml:lang="fr"> <li>Texte en français.</li> <li lang="fr-ca">Texte en québécquois.</li> <li lang="en">Second text in English.</li> </ul>
This would allow a text-to-audio browser to use appropriate pronunciation.
Quotation marks are presented differently in different languages. In consequence, CSS allows different representations to be defined via the quotes property:
quotes: { [<string> <string>]+ }
For example:
q: {quotes: '%' '*' '-' '+'}
q:before {content:open-quote}
q:after {content:close-quote}
The quote element (q) has the quotes to be used defined and these are added before and after the quoted text.
<q>This is a quote with <q>another inside</q> it</q>
The output should be:
%This is a quote with -another inside+ it*
None of the browsers currently get it correct.
Setting the appropriate quotation marks for an XHTML document:
:lang(fr-ca) { quotes: '« ' ' »' }
:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > q { quotes: '« ' ' »' }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A' }
The first two define quotes to use for French Canadian and German while the second two ensures quotes use the marks of the enclosing text language.
A piece of French "à l'improviste" in the middle of English should use English quotation marks.
dir= "ltr" | "rtl"
The dir attribute specifies the direction of text:
A sentence can be bi-directional, for example anEnglish sentence that contains a Hebrew or Arabic phrase that contains an English quotation.
<q xml:lang="he" dir="rtl">להוביל <em dir="ltr">: a Hebrew Phrase</em></q>
Hebrew characters appear with first character first but are rendered right to left
-- 50 --
© Oxford Brookes University 2008
<bdo dir= xml:lang=/>
This specifies bidirectional override. It is used, for example, if the characters in the rtl text have already been inverted.
<p dir="ltr">An example: <bdo dir="ltr">tfel ot thgir morf swolf txet sihT</bdo></p>
An example: tfel ot thgir morf swolf txet sihT
Bidi override is well supported by Opera, IE and Firefox
Some useful references are:
-- i --
© Oxford Brookes University 2008
There are some useful Web sites relevant to CSS:
-- ii --
© Oxford Brookes University 2008
| Name | Value |
|---|---|
| absolute-size | xx-small | x-small | small | medium | large | x-large | xx-large |
| absolute-unit | mm | cm | in | pt | pc |
| bdstyle | none | dotted | dashed | solid | double | groove | ridge | inset | outset |
| bdwidth | thin | medium | thick | <length> |
| bkposition | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] |
| color-def | <color-name> | <rgb> |
| color-name | aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white | yellow | orange |
| fontdef | <font-name> | <generic-family> |
| font-name | Any font name, in quotes if multiple words |
| fntsize | <absolute-size> | <relative-size> | <length> | <percentage> |
| fntweight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| generic-family | serif | sans-serif | cursive | fantasy | monospace |
| integer | <digit>+ |
| length | [ +|- ]?<number><unit> |
| mgwidth | <length> | <percentage> | auto |
| number | <digit>+[ .<digit>* ]? |
| pdwidth | <length> | <percentage> |
| percentage | <number>% |
| relative-size | larger | smaller |
| relative-unit | em | ex | px |
| rgb | #<hex><hex><hex> | #<hex><hex><hex><hex><hex><hex> | rgb(<number>, <number>, <number>) | rgb(<percentage><percentage><percentage>) |
| shapeval | <length> | auto |
| string | String of characters in quotes |
| styleoflist | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none |
| unit | <absolute-unit> | <relative-unit> |
| url | url(<quote>? <text> <quote>? ) |
-- iii --
© Oxford Brookes University 2008
In each definition:
| Property Name | Possible Values |
|---|---|
| background | [ <color-def> | transparent ] || [ <url> | none ] || [ repeat | repeat-x | repeat-y | no-repeat ] || [ scroll | fixed ] || <bkposition> |
| background-attachment | scroll | fixed |
| background-color | <color-def> | transparent |
| background-image | <url> | none |
| background-position | <bkposition> |
| background-repeat | repeat | repeat-x | repeat-y | no-repeat |
| border | <bdwidth> || <bdstyle> || [ <color-def> | transparent ] |
| border-bottom | <bdwidth> || <bdstyle> || [ <color-def> | transparent ] |
| border-bottom-color | <color-def> | transparent |
| border-bottom-width | <bdwidth> |
| border-collapse | collapse | separate |
| border-color | [ <color-def> | transparent ] {1,4} |
| border-left | <bdwidth> || <bdstyle> || [ <color-def> | transparent ] |
| border-left-color | <color-def> | transparent |
| border-left-width | <bdwidth> |
| border-right | <bdwidth> || <bdstyle> || [ <color-def> | transparent ] |
| border-right-color | <color-def> | transparent |
| border-right-width | <bdwidth> |
| border-spacing | <length> <length>? |
| border-style | <bdstyle> {1,4} |
| border-top | <bdwidth> || <bdstyle> || [ <color-def> | transparent ] |
| border-top-color | <color-def> | transparent |
| border-top-width | <bdwidth> |
| border-width | <bdwidth> {1,4} |
| bottom | <length> | <percentage> | auto |
| caption-side | top | bottom |
| clear | none | left | right | both |
| clip | rect(<shapeval> , <shapeval> , <shapeval> , <shapeval> ) | auto |
| color | <color-def> |
-- iv--
© Oxford Brookes University 2008
| Property Name | Possible Values |
|---|---|
| content | normal | none | [ <string> | <url> | counter(<identifier> [, style]?) | counters( <identifier>, string [, style]?) attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ |
| counter-increment | [<identifier> <integer>? ]+ | none |
| counter-reset | [<identifier> <integer>? ]+ | none |
| cursor | [ <url> ,]* | [auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | progress | se-resize | sw-resize | s-resize | w-resize| text | wait | help | progress] |
| direction | ltr | rtl |
| display | inline | block | list-item | run-in | inline-block | table | inline-table |table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none |
| empty-cells | show | hide |
| float | left | right | none |
| font | [ normal | italic | oblique ] || [ normal | small-caps ] || <fntweight> ]? <fntsize> [ / [ normal | <number> | <length> | <percentage> ] ? [ <fontdef> [ , <fontdef> ]* ]> |
| font-family | <fontdef> [ , <fontdef> ]* |
| font-size | <fntsize> |
| font-style | normal | italic | oblique |
| font-variant | normal | small-caps |
| font-weight | <fntweight> |
| height | <length> | <percentage> | auto |
| left | <length> | <percentage> | auto |
| letter-spacing | normal | <length> |
| line-height | normal | <number> | <length> | <percentage> |
| list-style | <styleoflist> || [ inside | outside ] || [ <url> | none ] |
| list-style-image | <url> | none |
| list-style-position | inside | outside |
| list-style-type | <styleoflist> |
| margin | <mgwidth> {1,4} |
| margin-bottom | <mgwidth> |
| margin-left | <mgwidth> |
| margin-right | <mgwidth> |
| margin-top | <mgwidth> |
| max-height | <length> | <percentage> | none |
| max-width | <length> | <percentage> | none |
| min-height | <length> | <percentage> |
| min-width | <length> | <percentage> |
-- v --
© Oxford Brookes University 2008
| Property Name | Possible Values |
|---|---|
| orphans | <integer> |
| outline- | [ <color-def> | invert ] || <bdstyle>|| <bdwidth> |
| outline-color | <color-def> | invert |
| outline-style | <bdstyle |
| outline-width | <bdwidth> |
| overflow | visible | hidden | scroll | auto |
| padding | <pdwidth> {1,4} |
| padding-bottom | <pdwidth> |
| padding-left | <pdwidth> |
| padding-right | <pdwidth> |
| padding-top | <pdwidth> |
| page-break-after | auto | always | avoid | left | right |
| page-break-before | auto | always | avoid | left | right |
| page-break-inside | auto | avoid |
| position | static | relative | absolute | fixed |
| quotes | [ <string> <string> ]+ | none |
| right | <length> | <percentage> | auto |
| table-layout | auto | fixed |
| text-align | left | right | center | justify |
| text-decoration | none | [ underline || overline || line-through || blink ] |
| text-indent | <length> | <percentage> |
| text-transform | capitalize | uppercase | lowercase | none |
| top | <length> | <percentage> | auto |
| unicode-bidi | normal | embed | bidi-override |
| vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> |
| visibility | visible | hidden | collapse |
| white-space | normal | pre | nowrap| pre-wrap | pre-line |
| widows | <integer> |
| width | <length> | <percentage> | auto |
| word-spacing | normal | <length> |
| z-index | auto | <integer> |
-- vi --
© Oxford Brookes University 2008
The following table gives the set of keywords that are likely to be support by browsers. The minimal set are emphasised.
| Colour Name | RGB Value | Colour Name | RGB Value |
|---|---|---|---|
| aliceblue | (240, 248, 255) | darkslategrey | ( 47, 79, 79) |
| antiquewhite | (250, 235, 215) | darkturquoise | ( 0, 206, 209) |
| aqua | ( 0, 255, 255) | darkviolet | (148, 0, 211) |
| aquamarine | (127, 255, 212) | deeppink | (255, 20, 147) |
| azure | (240, 255, 255) | deepskyblue | ( 0, 191, 255) |
| beige | (245, 245, 220) | dimgray | (105, 105, 105) |
| bisque | (255, 228, 196) | dimgrey | (105, 105, 105) |
| black | ( 0, 0, 0) | dodgerblue | ( 30, 144, 255) |
| blanchedalmond | (255, 235, 205) | firebrick | (178, 34, 34) |
| blue | ( 0, 0, 255) | floralwhite | (255, 250, 240) |
| blueviolet | (138, 43, 226) | forestgreen | ( 34, 139, 34) |
| brown | (165, 42, 42) | fuchsia | (255, 0, 255) |
| burlywood | (222, 184, 135) | gainsboro | (220, 220, 220) |
| cadetblue | ( 95, 158, 160) | ghostwhite | (248, 248, 255) |
| chartreuse | (127, 255, 0) | gold | (255, 215, 0) |
| chocolate | (210, 105, 30) | goldenrod | (218, 165, 32) |
| coral | (255, 127, 80) | gray | (128, 128, 128) |
| cornflowerblue | (100, 149, 237) | grey | (128, 128, 128) |
| cornsilk | (255, 248, 220) | green | ( 0, 128, 0) |
| crimson | (220, 20, 60) | greenyellow | (173, 255, 47) |
| cyan | ( 0, 255, 255) | honeydew | (240, 255, 240) |
| darkblue | ( 0, 0, 139) | hotpink | (255, 105, 180) |
| darkcyan | ( 0, 139, 139) | indianred | (205, 92, 92) |
| darkgoldenrod | (184, 134, 11) | indigo | ( 75, 0, 130) |
| darkgray | (169, 169, 169) | ivory | (255, 255, 240) |
| darkgreen | ( 0, 100, 0) | khaki | (240, 230, 140) |
| darkgrey | (169, 169, 169) | lavender | (230, 230, 250) |
| darkkhaki | (189, 183, 107) | lavenderblush | (255, 240, 245) |
| darkmagenta | (139, 0, 139) | lawngreen | (124, 252, 0) |
| darkolivegreen | ( 85, 107, 47) | lemonchiffon | (255, 250, 205) |
| darkorange | (255, 140, 0) | lightblue | (173, 216, 230) |
| darkorchid | (153, 50, 204) | lightcoral | (240, 128, 128) |
| darkred | (139, 0, 0) | lightcyan | (224, 255, 255) |
| darksalmon | (233, 150, 122) | lightgoldenrodyellow | (250, 250, 210) |
| darkseagreen | (143, 188, 143) | lightgray | (211, 211, 211) |
| darkslateblue | ( 72, 61, 139) | lightgreen | (144, 238, 144) |
| darkslategray | ( 47, 79, 79) | lightgrey | (211, 211, 211) |
-- vii --
© Oxford Brookes University 2008
| Colour Name | RGB Value | Colour Name | RGB Value |
|---|---|---|---|
| lightpink | (255, 182, 193) | paleturquoise | (175, 238, 238) |
| lightsalmon | (255, 160, 122) | palevioletred | (219, 112, 147) |
| lightseagreen | ( 32, 178, 170) | papayawhip | (255, 239, 213) |
| lightskyblue | (135, 206, 250) | peachpuff | (255, 218, 185) |
| lightslategray | (119, 136, 153) | peru | (205, 133, 63) |
| lightslategrey | (119, 136, 153) | pink | (255, 192, 203) |
| lightsteelblue | (176, 196, 222) | plum | (221, 160, 221) |
| lightyellow | (255, 255, 224) | powderblue | (176, 224, 230) |
| lime | ( 0, 255, 0) | purple | (128, 0, 128) |
| limegreen | ( 50, 205, 50) | red | (255, 0, 0) |
| linen | (250, 240, 230) | rosybrown | (188, 143, 143) |
| magenta | (255, 0, 255) | royalblue | ( 65, 105, 225) |
| maroon | (128, 0, 0) | saddlebrown | (139, 69, 19) |
| mediumaquamarine | (102, 205, 170) | salmon | (250, 128, 114) |
| mediumblue | ( 0, 0, 205) | sandybrown | (244, 164, 96) |
| mediumorchid | (186, 85, 211) | seagreen | ( 46, 139, 87) |
| mediumpurple | (147, 112, 219) | seashell | (255, 245, 238) |
| mediumseagreen | ( 60, 179, 113) | sienna | (160, 82, 45) |
| mediumslateblue | (123, 104, 238) | silver | (192, 192, 192) |
| mediumspringgreen | ( 0, 250, 154) | skyblue | (135, 206, 235) |
| mediumturquoise | ( 72, 209, 204) | slateblue | (106, 90, 205) |
| mediumvioletred | (199, 21, 133) | slategray | (112, 128, 144) |
| midnightblue | ( 25, 25, 112) | slategrey | (112, 128, 144) |
| mintcream | (245, 255, 250) | snow | (255, 250, 250) |
| mistyrose | (255, 228, 225) | springgreen | ( 0, 255, 127) |
| moccasin | (255, 228, 181) | steelblue | ( 70, 130, 180) |
| navajowhite | (255, 222, 173) | tan | (210, 180, 140) |
| navy | ( 0, 0, 128) | teal | ( 0, 128, 128) |
| oldlace | (253, 245, 230) | thistle | (216, 191, 216) |
| olive | (128, 128, 0) | tomato | (255, 99, 71) |
| olivedrab | (107, 142, 35) | turquoise | ( 64, 224, 208) |
| orange | (255, 165, 0) | violet | (238, 130, 238) |
| orangered | (255, 69, 0) | wheat | (245, 222, 179) |
| orchid | (218, 112, 214) | white | (255, 255, 255) |
| palegoldenrod | (238, 232, 170) | whitesmoke | (245, 245, 245) |
| palegreen | (152, 251, 152) | yellow | (255, 255, 0) |
| yellowgreen | (154, 205, 50) |
-- viii --
© Oxford Brookes University 2008
The following table gives a summary of the various CSS selectors.
| Selector | Meaning: Uses p, div, a and span as examples and class as an example attribute |
|---|---|
| * | Matches any element |
| div | Matches any div element |
| div span | Matches any span element that is a descendant of a div element |
| div > span | Matches any span element that is a child of a div element |
| div:first-child | Matches any div that is the first child of its parent |
| a:link, a:visited | Matches element a if the source of a link has not/has been visited |
| a:active | Matches element a if it is active |
| div:hover | Matches element div if it is being hovered over |
| span:focus | Matches element span if it is in focus |
| div:lang(fr) | Matches element div if it is defined in language fr |
| div + p | Matches any p whose immediate sibling before it is a div |
| div[class] | Matches any div that has a class attribute |
| div[class="fred"] | Matches any div that has a class attribute whose value is just fred |
| div[class~="fred"] | Matches any div that has a class attribute which contains fred as one of the names |
| div.fred | Matches any div that has a class attribute which contains fred as one of the names |
| div[lang|="fr"] | Matches any div with a lang attribute whose hyphenated value starts with fr |
| div#xyz | Matches the div with an id attribute set to xyz |
| #xyz | Matches the element with an id attribute set to xyz |
-- ix --
© Oxford Brookes University 2008
XHTML elements have recommended default property values. For example, which elements, by default, should be rendered as block level and, by default, which should be rendered as inline. Firefox has a file html.css that lists the default values that it uses. The values here are those in the CSS 2.1 Candidate Recommendation.
html, body, p, pre, html, body, p, pre, address, blockquote {display: block}
fieldset, form, div, hr, dd, dl, dt, ol, ul {display: block}
head {display: none}
body {margin: 8px}
h1,h2,h3,h4,h5,h6 {display: block; font-weight:bolder}
h1 {font-size: 2em; margin: .67em 0}
h2 {font-size: 1.5em; margin: .75em 0}
h3 {font-size: 1.17em; margin: .83em 0}
h4, p { margin: 1.12em 0}
h5 {font-size: .83em; margin: 1.5em 0}
h6 {font-size: .75em; margin: 1.67em 0}
blockquote {margin-left: 40px; margin-right: 40px}
address {font-style: italic}
pre {font-family: monospace}
pre {white-space: pre}
li {display: list-item}
ul, ol, dl {margin: 1.12em 0}
ol, ul, dd {margin-left: 40px}
ol {list-style-type: decimal }
ol ul, ul ol {margin-top: 0; margin-bottom: 0}
ul ul, ol ol {margin-top: 0; margin-bottom: 0}
table {display: table}
tr {display: table-row}
thead {display: table-header-group}
tbody {display: table-row-group}
tfoot {display: table-footer-group}
col {display: table-column}
colgroup {display: table-column-group}
td, th {display: table-cell}
caption {display: table-caption}
th {font-weight: bolder; text-align: center}
caption {text-align: center}
table {border-spacing: 2px}
thead, tbody, tfoot {vertical-align: middle}
td, th {vertical-align: inherit}
strong {font-weight: bolder}
cite, em, var {font-style: italic}
code, kbd, samp {font-family: monospace}
sub, sup {font-size: .83em}
sub {vertical-align: sub}
super {vertical-align: super}
br:before {content: "\A" }
button, textarea {display: inline-block}
input, select {display: inline-block}
fieldset,form {margin: 1.12em 0}
hr {border: 1px inset}
:before, :after {white-space: pre-line}
:link, :visited {text-decoration: underline}
:focus {outline: thin dotted invert}
bdo[dir="ltr"] {direction: ltr; unicode-bidi: bidi-override}
bdo[dir="rtl"] {direction: rtl; unicode-bidi: bidi-override}
*[dir="ltr"] {direction: ltr; unicode-bidi: embed }
*[dir="rtl"] {direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always}
h1, h2, h3, h4, h5, h6 { page-break-after: avoid}
ul, ol, dl { page-break-before: avoid}
}