Cascading Style Sheets
These are notes on website design for The Australian National University course "Networked Information Systems" (COMP2410 / COMP6340) in 2009. This section of the course is prepared and presented by Tom Worthington FACS HLM.
Cascading Style Sheets (CSS) are a series of W3C standards for defining the presentation of web pages. CSS is applied to HTML to change the way the content appears. The same HTML content can be made to render differently to suit the display device's capabilities (such as a mobile phone) and the user's requirements (such as spoke text for a for the sight impaired).
CSS works best with a logically structured web page, where the semantic meaning has been expressed using the elements of a later version of HTML. Style rules are then written using CSS for each element which is required to have other than its default appearance (no need to specify black text, as black is the default). Each rule identifies an element by name and lists the required properties (such as font and colour of text).
Style rules can be inline in the HTML, collected together in the head of the document, or as external files linked to the document. It is recommended the rules common to a web site or group of pages be in a linked separate file. These rules can then be overridden for a particular document. XHTML Basic does not permit inline or head stile rules: a linked file must be used.
A style sheet rule consists of a selector which identifies the element and the declaration which has the properties of how the element will appear. Example: h1 {color:red; font-size: 160%}
The media attribute in the style element can be used to specify styles for a particular medium. Most commonly used for:
- handheld: for smart phones
- print: for printed documents
Comments can be included in style sheets:
/* Media release style */
The link element in the head of the document is used to reference an external style sheet. Example:
<link rel="stylesheet" href="releases.css" type="text/css" /> </head>
@import can be used in a stylesheet to reference information from external .css files.
Inheritance and Cascading
HTML documents have a hierarchy. The html element contains a head and a body. The body contains block-level elements, such as paragraphs, which in turn contain inline elements.
HTML elements inherent CSS properties applied at a higher level in the hierarchy. As an example the colour applied to a Related to structural relationships is the concept of inheritance, in which most styles are passed down from an element to its descendants. In other words, a child may inherit property values from its parent. For example, if a style rule applies a text colour to a blockquote , that colour will be applied to all paragraphs in the blockquote, unless overridden by a style applied specifically to the paragraph.
Style sheets are applied in the order given ("cascade"). CSS 2 allows style declarations to be marked as !important to override the cascade.
The Box Model
CSS uses a box model to conceptually describe the layout of content. Every element has a rectangular box defined around it for calculating borders and margins. The box has an invisible outer edge, a margin area within this, a border (which can be invisible or visible), a padding area within the border and the inner edge of the content.
Padding, borders, and margins can be set to zero. Any background colour or image extends into the padding area, but not the margin area. Borders can be set with style properties to be solid or dashed, for width and colour. By default all four sides of the element box are styled the same, but can be different if required.
Measurements for CSS are commonly expressed in:
- Pixels (px) relative to a typical resolution display screen.
- Points (pt) 1/72 of an inch.
- Ems (em) approximately the width of the capital letter M.
- Percentage (%) relative to other values in the document.
- Keyword Values, such as "normal"
It should be noted that different display devices will produce different results and none of these measurements is necessarly precise.
Positioning Elements with CSS
CSS 2.1 can be used for positioning of elements. By default the "normal flow " is for text elements to be laid out from left to right, top to bottom, for languages such as English. Inline elements fill the available space. Block-level elements stack on top of one another. When the window is resized, block elements adjust and the inline content reflows to fit the space. The normal flow can be overridden to float and positioning elements.
Floating
The float property allows elements to be placed next to each other (with left or right attributes). While most commonly used for placing images alongside text, they can also be used for other elements.
Floated elements normally do not overlap, but fill the space downwards. However, a negative margin allows the flowed content to overlap.
The clear property prevents a floated block element from appearing to the left or right of other elements.
Positioning
The position property specifies one of four methods to position an element:
- static: The default positioning scheme with element boxes rendered in the order of the document flow.
- relative: Moves the element box, relative to another box, but still in the order of the document flow.
- absolute: Position the object with explicit coordinates.
- fixed: Position the object at a fixed location relative to the viewport. That is the object stays in the same place, even when the browser window is scrolled.
Positioning is done with the four offset properties: top, right, bottom, left. The values can be with a lenght measure (such as px or em) or a percentage (24%) of the containing block
The overflow property specifies what to do with the content that doesn't fit in the space provided:
- visible: By default the content will display outside its element box.
- hidden: The content that does not fit will not be visible.
- scroll: Scrolling through the content is allowed.
- auto: The user agent (web browser) handles overflow. Usually scrollbars are added when required.
Lists
The list-style-type property selects the type of marker for each list item. Values: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, lower-alpha, upper-alpha, none, or inherit. By default a disk is provided. It should be noted that this property can be sued to replace the numbers of an ordered list with bullets.Quotation Marks
The content property provides a way to insert quotation marks automatically before and after an element using the values: open-quote, close- quote, no-open-quote, and no-close-quote . Along with the quotes property this can be used for changing the style of quotation marks without explicitly encoding them in the content of the document. This allows for different styles of quotation marks where quotations are nested and for different styles used in languages other than English.
Printing from the Web
An additional style sheet can be applied using the media attribute or @media rule to customise the web page content for printing. Typically the print style will omit background colors and images and use the display property with the value of "none" to hide navigation features. Supporting browsers will automatically apply the additional styles when printing, with the media type of "print".
CSS 3 has more advanced features for printed documents, such as page headers, footers and page numbering. However these features anre not yet supported by most browsers. Where the features of CSS 2.1 are not sufficient, a PDF (Portable Document Format) version of the content can be offered.Web Page Layout
Web pages are traditionally formatted in a similar way to printed text, in a rectangular grid. For English language readers more general information is placed at the top left and detail toward the bottom right of the page.
A typical layout for a web page is to divide the page into a header, body and footer area and then divide the body further into a number of columns. An attempt is made to make the layout symmetrical. The header will have a logo, the title of the web page and links to other important pages. The footer will have a copyright notice and links to legal notices. The left column in the body will have a menu, the centre column the main content and the right column a subsidiary menu, additional information, such as classified advertisements.
| Header: logo, page title and top level menu | |||
|
|||
| Footer: copyright and legal notices. |
The layout should, as far as is possible, allow for screen of different resolutions. In particular a screen which cannot display as many columns of text should be considered. CSS can be used for positioning the elements on the a web page. However, tables may need to be used in some cases.
Text styled with CSS
Text should be sized relative to the default size set by the browser and styled using CSS based on the structural elements of the document:
H1, H2 { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: medium; color: #000000 }
H3 { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: medium; color: #000000 }...
TBODY, BODY, TABLE, TD, BLOCKQUOTE, FORM, LI, OL, UL, DD { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: small; color: #000000 }
P, p { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: small; color: #000000 }...
From: ANU standard style sheet, URL: http://www.anu.edu.au/templates/anustyle.css
Referencing the CSS
The CSS is referenced in the web page:
...
<HEAD>
...
<LINK href="/templates/anustyle.css" rel="stylesheet" type="text/css">
From: Discover The Australian National, 22 May 2001, URL: http://www.anu.edu.au/discover.html
A style defined in the web page
Later in the HEAD an additional style of tinylink is defined for use anywhere on the web page:
<STYLE> .tinylink { font-family: Arial, Helvetica, sans-serif; font-size: 8pt} </STYLE>
</HEAD>
Font commands in the web page
In the body of the document some font commands are used:
<BODY ...
<FONT SIZE="-2" face="arial, verdana, helvetica, sans-serif"> <center> Please direct ...
As well as the additional style:
<A HREF="/comments.php" class="tinylink">...
The effect of the styles cascade, that is the local style overrides the definition in the header and that overrides the external definition. In this case the font size will be changed, while the font color will be unchanged.
Fixing text at, 12 points, for example will cause difficulties if the user's screen is significantly smaller or larger than that the page was designed on. Web browsers have a default font size which should have been set to be readable on the particular screen. Most text on the web page should be set at the default size and other text, such as headings, should be set relative to default size. Serif fonts (such as Times Roman) are generally considered easier to read for main text, but sans serif (such as Helvetica) are better for low resolution screens and headings. As with text size specific fonts should be avoided and style commands used to suggest fonts for specific elements of the text. As an example a heading should be marked as a heading <h1> and then styles added for text size and font.
In this way if the browser does not have the specific font (or the user can't see it), another can be substituted in a systematic way. Utility programs, such as Tidy, can be used to extract collect text definitions from a web page into a CSS style sheet. An example of a web page using individual definitions is "Links on the World Wide Web". An example of a web page using an internal CSS style sheet is "The Federal Government 30% Rebate". An example of a complex style sheet is that for the W3C's documents: <http://www.w3.org/Style/main.css>. This includes comments indicating some style commands cause difficulties with some web browsers.
Layout with CSS
Early web pages (around 1994) used a simple single column of text, with HTML headings (H1, H2...), to structure the text. Browser developers introduced a number of formatting elements to allow for better layout on the pages (such as being able to centre headings). However, this did not allow multiple columns of text to be easily laid out and the practice developed of using the <table> for formatting the page. This was seen as unsound design as the content (images and text) and become intermingled with the formatting (fonts, colours, positioning) of the document, but there was no workable alternative.
CSS was intended to provide a separation of the content and style and allow column layout. However, due to limited support (and incorrect implementations) CSS has mostly been used for styling text but not layout. Newer web browsers now provide enough support for CSS that web designers are introducing table free designs.
Developers are trading off compatibility with older browser, for more efficient and flexible design. One example was introduced in early 2004 by the online subsidiary of John Fairfax Holdings for their on-line newspapers:
An important announcement from the f2 network
(including smh.com.au, theage.com.au, mycareer.com.au, domain.com.au, drive.com.au)
You appear to be using an older browser. From early 2004, f2 network sites will no longer offer support for browsers earlier than Microsoft Internet Explorer 5, or Netscape Navigator 6. ... A text-only version of both smh.com.au and theage.com.au is always available.
If you wish to upgrade your browser, a new version can be obtained for free from the following sources:
Microsoft Internet Explorer Netscape Navigator Mozilla Opera Apple Safari ...
An important announcement from the f2 network, f2 Limited, 2004, URL: http://www.f2.com.au/browserstandards/
Sydney Morning Herald Technology site
One web site using CSS for layout is The Sydney Morning Herald Technology site. This has a default CSS file and one specifically for print:
... <head>
<title>smh.com.au - The Sydney Morning Herald Technology</title>
... <meta name="author" content="Andrew Coffey" />
<style type="text/css" media="screen" title="default">@import url("/technology/css/smh_tech.css");</style>
<link href="/technology/css/smh_tech_print.css" rel="stylesheet" rev="alternate" type="text/css" media="print" />
</head>
From: The Sydney Morning Herald Technology, Head section XHTML code (emphasis added), f2 Limited, 2004, URL: http://www.smh.com.au/technology/index.html
Default style sheet, f2 Limited
The default CSS positions the masthead, columns and footer on the page:
/* ::::::::::::: PAGE LAYOUT ::::::::::::: */
.standardsNote {display:none} ...
#masthead {position:relative;height:70px; ...
#trail {position:relative;height:23px; ...
#nav {position:absolute;top:122px; left:0;width:112px; ...
#content {position:relative;margin:0 170px 0 113px;padding:15px}
#columns {position:relative;margin:1em 0 0 0}
#col1 {position:relative;float:left; width:220px;margin:0;z-index:1}
#col2 {position:relative;float:right; ...
#rhc {position:relative;float:right; ...
#footer {clear:both;text-align:center; ... ...
From: Default style sheet, f2 Limited, 2004, URL: http://www.smh.com.au/technology/css/smh_tech.css
Print style sheet, f2 Limited
The print CSS removes some of the graphics and turns off some of the formatting to suit a non-interactive, printed page:
body {background: white ...
/* ::::::::::::: TURNED OFF ::::::::::::: */
.standardsNote, #nav, #subnav, #rhc, #trail, #title, #masthead .banner, #masthead .textad,.articletools-top, .articletools-bot, .rhclinks, .rhbox, .newsstore, .sort1, .sort2{display: none!important}
iframe, #footerads, .islandad, .islandad small, .megaiwos, .domcol, .ad1, .ad2,.adwof, .rhad{display:none !important}
...
From: Print style sheet, f2 Limited, 2004, URL: http://www.smh.com.au/technology/css/smh_tech_print.css
Web disaster management
Sahana is an application developed in response to the December 2004 Tsunami. It is implemented as a web hosted database application. Changes to the web interface were tested to reduce requirements, allow operation on small screen mobile devices in the field and to allow emergency information to be automatically translated into local languages.
Crisis, for example natural disasters, management software; including refugee camp management, supply/demand match making, lost persons, etc.
Sahana disaster management system, SourceForge, 2005, URL: http://sourceforge.net/projects/sahana/
Modifying Sahana
The home page of Sahana was modified to:
- Remove extraneous code, such as unnecessary Javascript,
- Remove formatting of text from the HTML to external CSS style sheets,
- Replace table based layout with CSS,
- Remove unnecessary images and optimise the remainder, remove any text from images and put it in the HTM, and
- Add extra CSS to allow use of hand held devices, such as smartphones.
The HTML of the web page was automatically cleaned up using HTML Tidy. Setting the document type to XHTML Strict allowed a leaner version of HTML to be used (the document can then be converted back to an older version of HTML for compatibility with older browsers). Conversion of the layout to a non-table design required manual work. Implementing the World Wide Web Consortium's Web Content Accessibility Guidelines helped ensure an efficient design which was then checked with acessibility tools.
Estimate download time of existing page
Assuming a 5 kilobyte per second wireless modem is used, the download time of the Sahana version 1 home page was approximately 10 seconds:
| File | Existing Size | New Size | Mobile Option |
|---|---|---|---|
| HTML | 5.63 | 1.99 | 1.99 |
| Default CSS | 3.20 | 2.38 | 2.38 |
| Images | 40.49 | 11.88 | 1.35 |
| Total | 49.32 | 16.25 | 5.72 |
| Reduction | - | 67% | 88% |
Tidying the HTML and CSS halved the file sizes. However, as is usual with web pages, images make up most of the data downloaded (83% in this case) and so optimizing these greatly reduced data requirements.
The CNO logo on the web page was stored as a 256 colour GIF image, but only contained a limited range of colours. Using 16 colours reduced the file to one third the size, with little change in quality. The CNO logo contained text which may not be readable on a small screen device (or by a search engine or translation program). This would be better removed from the image to be included as text. Removing the text halves the file size.
The Government crest is useful in adding to the authority of the web site. The other images are less useful. One option is to suppress additional images using CSS when the web page is displayed on a hand held device.
Converting to XHTML with CSS
Conversion of the text formatting to CSS was done automatically using HTML Tidy. Some of font declarations were then replaced manually to make a structural markup. The font style each level of headings (h1, h2 ...) need only be declared once, so the styles are consistent and the document will be readable without the CSS.
The existing web page used a table statement to lay out the body of the page as three columns. This made the page difficult to read on a small screen. To overcome this the table statement was removed to make one column of text, then DIV tags and CSS used to convert the page back into three columns. This is a fluid design, with the colum sizes adusting to fit the avialable space. A device with a small screen can ignore the three columns and display the text in one long column.
Old Tabled based code
<tr>
<td width="10" align="center"><span class="formText"><strong><span class="style2">»</span></strong></span></td>
<td width="60%" nowrap class="loginText"><a target="links" href="orgreg/" class="style1" style="text-decoration:none">Sahana Organization Registry </a></td>
New XHTML
<div class="menu">
<ol>
<li><a accesskey="1" target="links" href="/orgreg/">Organization Registry</a></li>
The CSS
In place of a table, an ordered list is used to display the menu of functions for the system. The corresponding CSS suppresses the numbering of the list and shows a line between each list item, to provide the same appearance as the existing table version:
.menu { float: right; width: 40%; font-weight: bolder; padding: 2em; line-height: 2em; background-color: #D8E9FD;}
.menu li { list-style-type: square; border-top-width: thin; border-bottom-width: thin; border-top-style: solid; border-bottom-style: solid; border-top-color: #B4C6DB; border-bottom-color: #B4C6DB;}
CSS for a Menu on a Desktop Computer
An ordered list is used so that on a handheld device the numbers can be displayed to aid quick access (pressing the corresponding number key on the phone keypad activates the link). On dsktop PCs the numbering is suppressed, as the mouse can be used to select an item:
.menu {display:block; height: auto; width: 100%; padding: 0em; line-height: 1em;}
.menu li {list-style-type: decimal; border: none;}
CSS for a Menu on a Mobile Phone
By default columns will be displayed in the order English text is read: left to right top to bottom. This causes a problem with the Sahana home page as the third column contains the most important information: the menu of functions. On a small screen the menu should come first and this is possible using CSS. However, a better design decision might be to have the most important information in the first column in all versions of the page.
Modified Sahana
The modification of Sahana displays in a desktop web browser with a layout similar to the original. On a mobile phone browser the contet displays in one column with the heading at the top, numbered menu options below and text underneat the menu. As text has been removed from images, the web page can be machine translated into other languages.
Now read:
Web Design in a Nutshell, Jennifer Niederst Robbins, O'Reilly Media, Inc., 2006:
- Chapter 16. Cascading Style Sheets Fundamentals
- Chapter 17. Selectors
- Chapter 18. Font and Text Properties
- Chapter 20. Color and Backgrounds
- Chapter 21. Floating and Positioning
- Chapter 22. CSS for Tables
- Chapter 23. Lists and Generated Content
- Chapter 24. CSS Techniques
- Chapter 25. Managing Browser Bugs: Workarounds, Hacks, and Filters
- Chapter 36. Printing from the Web
Wireless Web System for an Avian Influenza Pandemic, Tom Worthington, Web Standards Group meeting, 11 May 2006
