Legend Scrolls

Present and layout with Cascade StyleSheets (CSS)

Release2008-03-13
Jump to Web Standards Articles TOC

Webpage Presentation

In order to realistically present and layout information on webpages it is recommended that Cascade StyleSheets (CSS) are used on Markup documents such as HTML and XML including XHTML, SVG and MathML.
This articlette is not exhaustive.

There are many types of media that stylesheets could be used to provide different styles and layout for such as screen:
The full scope of visual and interactive CSS level 2.1 can be applied to webpages for a full user experience on desktop web browsers.
print: used for hardcopy presentation of the webpage. Can have a different layout due to the paper size or if it is a left page, right page or even just for the first page. A lot of web browsers are configured to not print out backgrounds (possibly including element box borders). Can be viewed on the screen by Print Preview.
projection: is used for displaying on projectors or printing to OHP projector sheets and even displaying in Opera Show.
handheld: including the Mobile Profile allows a view of the webpage on smart phones and PDAs.
tv: this media, including the TV Profile, is for web-enabled television set-top boxes.
Other CSS Media Types include braille, embossed for text-to-braille devices, aural, speech for text-to-speech devices and software including Screen Readers.

If you have separate stylesheet files for each media, some web browsers don't automatically change to the appropriate stylesheet for that media - such as when you go from normal screen to print preview and the print styles are in a separate stylesheet to the screen styles. If your web browser lists stylesheets then just select the appropriate stylesheet and then go to the media environment. For instance choose the print stylesheet and then go to Print Preview or Print; select the projection stylesheet before going to Opera Show (F11 in Opera Web Browser).
It maybe beneficial to put all the media styles into one stylesheet file but separated by @media groups (see below).

Attaching Stylesheets to XML Documents and other webpages

Stylesheets can be attached to XML Documents via a Processing Instruction (PI):
<?xml-stylesheet type="text/css" href="mestylesheet.css" title="Main Stylesheet"?>

This goes after the XML Prolog but before any other elements. As you can notice Cascade Stylesheets' MIME Media Type is text/css. A media attribute is one of the ways to specify which media the stylesheet is for. The attribute alternate can be used to specify if the stylesheet is an Alternate Stylesheet with the value 'yes' or 'no' (default).

<?xml-stylesheet type="text/css" href="differentColourScheme.css" media="screen" alternate="yes" title="Different Colour Scheme"?>

For native and HTML-compatible XHTML you can use the <link /> empty element in the <head></head> element as follows:

<link rel="stylesheet" type="text/css" href="meprint.css" media="print" title="A Print Stylesheet" />
<link rel="alternate stylesheet" type="text/css" href="meprintland.css" media="print" title="Print Stylesheet for Landscape" />

The title attribute provides a name to be used for instance in a web browser's styles menu list. You can have as many XML Stylehseet PIs or Stylesheet Links in a document.

CSS

Within stylesheets it may be required to add comments to clarify things:
/* This is a CSS Comment */

The general layout of style code is to state what element(s) or similar you are applying the styles to - these are called the Selectors. Then wrapped in braces, { and }, you have one or more style properties of the form propertyname: propertyvalue;:

h2 {
  font-size: 125%;
  color: #0000ff;
  text-decoration: underline;
}
div.className {
  background-color: #003300;
  color: #ffff00;
  font-style: italic;
  width: 50%;
  margin-left: 5%;
}
span#me {
  font-weight: bold;
  color: #ff0000;
  line-height: 2em;
}
*.spaced {
  letter-spacing: 4px;
}

The first applies the h1 element's text size to be 125% of normal, the h1's text color to be blue and the h1's text to be underlined.
Then any div element with a class attribute (a class selector) with the value of 'className' to have its text background colour dark geen and text colour yellow, style of the text to be italic, the width of the div element's box to be 50% of the horizontal screen (whatever the physical size of the web content area and the screen and the left side of the box to be 5% away from the normal position.
On the third line we attach styles to a span element with an id attribute (an id selector) with the value 'me' making the text bold, and coloured red and the line height be 2 times the normal letter height.
Last but not least we apply spacing of 4 pixels between each letter to any element with a class attribute with a value of 'spaced'.

Numeric values can be of these units: percentages (%), pixels (px), relative to the font size (em), character point size (pt), centimeters (cm), millimeters (mm), picas (pc). Some values need to refer to external files such as images would use the url function: url('path/to/image') (or url("path/to/image")). Colour values may be either the hex value or rgb or a HTML4/SVG keyword such as #ff0000 or rgb(255,0,0) or red.

Pretty much all style properties can have a value of inherit that takes the parent elements value for that style property.

At Rules (@)

As styles can be for different media like colour screens, printed material, small screens or speech and some styles are only used for a particular media then you can use @media rules:

@media screen, projection {
  thebox#handle {
    background-color: #ff0000;
    color: #ffff00;
    font-weight: bold;
  }
} /* End core styles for Screen and Projection Media */

@media screen {
  thebox#handle {
    line-height: 2em;
  }
} /* End extra styles for Screen Media */

@media print {
  thebox#handle {
    line-height: 1.5em;
    font-style: italic;
  }
} /* End styles only for Print Media */

Basic Styles

For simple text stylings like size, boldness, italics, lining and colour you have these style properties:
font-size can have percentage values (50%, 125%, 3%, etc) or more specific numbered values like 16px for 16 pixels or 14pt for 14 point. It can have these relative terms xx-small, x-small, small, medium, large, x-large and xx-large.
font-weight has values of normal, bold(to replace <b> </b> elements), bolder, lighter and 100, 200, 300, 400, 500, 600, 700, 800 and 900.
font-style values are italic(to replace <i> </i> elements), normal and oblique.
text-decoration includes underline (to replace <u> </u> elements), overline and line-through (to replace <s> </s> and <strike> </strike> elements) as well as none.
color uses any of the hex/rgb/keyword for the HTML4/SVG colours and also can have none or transparent.

Elements including the webpage body have properties to change the background including colour, position, repetition and to set a background image via either the collection of background-color, background-position, background-attachment, background-repeat and background-image or the compact background property.
background-color takes the same values as color, background-image takes a URI (using the url funcction) to reference an image. The relative path to the image is relative from the stylesheet. background-position has a pair of % or length values where the first is of the horizontal positioning and the second is the vertical positioning of the background image. You can use tokens such as left, center or right for the first value and top, center, bottom for the second.
To fix the background so it doesn't move when you scroll the page you can use background-attachment: fixed; or use background-attachment: scroll; to return it to the default. Background images can be repeated with background-repeat: repeat;. background-repeat: repeat-x; allows you to just repeat across and background-repeat: repeat-y; only repeats downwards. background-repeat: no-repeat; forces no repetition.

body {
  background-color: #ffffff;
  background-image: url('../images/fadedlogobkgrnd.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
}
div.patterned {
  background: transparent url('../images/pattern024.png');
}

The Display Property

You can specify that elements are of a specific layout type or not displayed at all using the display style property:
To hide elements use the none value. Other values include inline, block, inline-block, list-item, table, table-row, table-cell, table-column and table-caption:

fulltextel {
  display: block;
  font-size: 110%;
  color: #0000cc;
}
emphit {
  display: inline;
  font-style: italic;
}
listit {
  display: list-item;
  list-style-type: square;
  list-style-image: url('../images/listit.png');
}
cell.standard {
  display: table-cell;
  width: 35%;
}
span.msiecell {
  display: inline-block;
  width: 35%;
}

The default value of display is inline which allows the element to be embeded in a line amongst other inline elements and text. Some positioning styles cannot work on inline elements. These elements tend to have one or more line boxes (see below). Most elements are block level (display: block;) and so put themselves on their own line. These types of elements can have multiple lines within its box with other block level, inline level elements and text.
The value inline-block provides an element to be embedded in a line like inline elements but the element itself is a block element.

To style lists you need to have a display: list-item; as one of the style properties along with list-style-type which formats a shaped list marker such as square, disc, circle, etc and optionally the list-style-image takes a URI of an image to represent the list marker. If the environment does not support image list markers or it can't find the image then it will fallback to the shaped marker.

CSS Tables

The term 'CSS Tables' refers to the collection of table values of the display property: table, inline-table, table-column-group, table-column, table-header-group, table-footer-group, table-row-group, table-row, table-cell and table-caption. These provide a tabular layout similar to (X)HTML Tables but provide fine-grained style and flexibility due to the very nature of CSS; as opposed to the rough concrete layout of (X)HTML Tables which display no matter what device you are using even if the device does not have enough view to successfully display the layout table. (X)HTML Tables are developed only for semantic (meaningful) tabular data. CSS Tables provide layout.

PageBox {
  display: table;
  width: 90%;
  border: 1px solid blue;
}
PageBox div {
  display: table-cell;
  font-size: 1.2em;
}

As in the example above we specify a PageBox element to display like a table box and any div elements within that will be like table cells. An anonymous table row box will be processed around the table-celled elements. Even if we removed the PageBox styling then an anonymous table box and table row box will surround the table-celled elements.

Box Model

Markup elements have a kind of invisible box around them that structures a margin, border, padding and content model. Margins can be altered by setting the percentage or other numeric length to either any of these style properties: margin-top, margin-right, margin-bottom, margin-left or by using the compact style property margin providing one to four of the values:
If just one value then it refers to all four sides; if two values then the first refers to top and bottom sides and the second refers to the left and right sides. For three values the first refers to the top, second to the left and right and the bottom side is handled by the third value. The four values respectively refer to top, right, bottom and left.

boxemall {
  margin: 2px;
}
quoteTheBlock {
  margin: 2px 6px;
}
spacebucket {
  margin: 2px 6px 4px;
}
variablesides {
  margin: 2px 6px 4px 10px;
}

Borders can be styled using these three properties:
border-width using thin or medium or thick or size values to state the border thickness.
border-style can be none to hide any border or any of solid, dashed, dotted, double, ridge, groove, inset or outset to present the border.
border-color states the colour of the border.
Or you can use a compact version: border that has the border-width value, a space, border-style value, a space and the border-color value such as border: 1px solid #000000; for a simple black border.

Padding is kind of the same principle of margins except it is for between the border and the actual content - so its a kind of buffer. padding-top, padding-right, padding-bottom, padding-left and padding have the same kind of value forms as the margin properties.

padaway {
  padding-left: 6px;
}
pademall {
  padding: 2px;
}
padTheQuote {
  padding: 2px 6px;
}
padbucket {
  padding: 2px 6px 4px;
}
variablepads {
  padding: 2px 6px 4px 10px;
}

You can set the width and height of these invisible boxes too using style properties of the same name.

div.dsb {
  width: 125px;
  height: 200px;
  border-width: 1px;
  border-style: solid;
  border-color: #ff0000;
}

produces:
The World Wide Web Consortium (W3C) develops interoperable technologies...

top, left, right and bottom are style properties that can push the box to a specific location on the webpage. By default the values are relative to the surrounding elements or the web content area. But this can be changed with the position style property providing relative value and absolute value which makes the location relative to the web content area and the box is out of the normal flow of the webpage. A value of fixed can make the element appear like a watermark - totally fixed in place no matter if you scroll the webpage or not.

Floating Objects

Wrapping elements to the left or right of another element, possibly to create a multiple column effect, or just to have text flow around an image, you can use the float property with either left or right or even none. But some floating elements may affect the positioning of other elements. In this case you have the clear property with left, right, both or none to push the element below as if it were a block element (if it is or not).

Fonts

font-family style property provides access to font types for the text. The value is a comma separated list of font names - if spaces are in the font names then you should surround the name in either double or single quotes:

div.s1 {
  font-family: 'Times New Roman', Helvetica, sans-serif;
}

CSS 3

Opacity

To make an element partially transparent you can use the opacity property from CSS level 3 color module in some web browsers such as Mozilla Firefox, Opera and Apple Safari. The value is from 1.0, not transparent, through to 0.0, fully transparent.

InfoBox.fancy {
  width: 200px;
  float: right;
  boarder: 1px solid #0000ff;
  opacity: 0.5;
}

This will make a floating box semi-transparent.

border-radius

You can round border corners using CSS3's border-radius property which takes a length as its value:

.bubbleit {
  border-radius: 3px;
}

Currently no web browser supports this but Gecko based like Firefox do support an experimental version as -moz-border-radius and Webkit based such as Safari supports -webkit-border-radius.

For more information about Cascade Stylesheets (CSS) you can visit http://www.w3.org/Style/CSS/#specs.

Copyright ©2005-2008 Legend Scrolls and Peter Davison.
The Globe icon from Crystal Project Icons: LGPL, Copyright © Everaldo.
All rights reserved.