How to use CSS styles

See also Tutorials and References:
- w3schools Very detailed, many topics. Includes examples and a "Try it yourself" feature.
- Tutorial Republic Basic,advanced, features, reference
- ... many more, do a search
My notes and example on position - notes in the right-hand column. warning: contains some pathological cases
Tutorial on position, Ten Easy Steps
The official W3C specification for CSS2

You will have noticed that web pages are laid out according to the tags that are included. CSS can alter how each element looks and is laid out on the page.

Basics

CSS means Cascading Style Sheets. Since HTML tags are nested, properties are inherited from their parents, unless overridden by a more detailed specification.

Tags can have class(es), and may have an ID - which must be unique on a page
CSS rules consist of a selector and declarations of the form

property:
value

; (note separating semicolons) as in this example:

body	{color: white; background: purple}

A selector is usually the name of an html tag, optionally followed by a class or id. If a class is given, only elements with that class specified are affected. If an id is given, only that one element is affected.

H1#irish  {background: green} /* only the H1 tag with id="irish" */
.center   {text-align: center;}	/* any tag of class="center"  */

This would inherit the color from body, center the text, and change the background for:

<h1 id="irish" class="center">St. Patrick's Day</h1>

Where to put styles - in the <head> section

between <style> ... </style> tags, OR
Refer to a separate file: (This way several pages can share the same styles)
```
<LINK rel="stylesheet" href="mystyle.css" type="text/css">
```
for a one-off, in a tag's style="" attribute

Fonts

You do not know the exact fonts any browser may have, that's why the property is called font-family It is a good idea to specify your favourite font, perhaps another one, and finally a generic type of font: serif, sans-serif, monospace, cursive, or fantasy. Here are a simple and an extensive example, repeated in "shorthand":

P { font-family: "Times New Roman", serif}
P { font-family: "Times New Roman", serif; font-size: 12pt; 
	font-style: italic; font-weight: bold} 
P { font: 12pt italic bold "Times New Roman", serif}

Note that in the shorthand 'font' property, several values are separated by spaces, and the font-family comes last (a comma separated list), and unmentioned properties may be reset. The last two examples should be equivalent.

Text

There are some "text" properties, here are some, and their possible values (| = one choice, || = multiple choice):

text-align:	left | right | center | justify
text-decoration: none | underline ||overline ||line-through ||blink

Colors and Backgrounds

A color is a either a keyword or a numerical RGB specification. The suggested list of keyword color names is:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Most browsers support additional color names, see Wikipedia

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

The RGB color model is being used in numerical color specifications. These examples all specify red:

EM { color: #f00;}       /* #rgb */
EM { color: #ff0000;}    /*#rrggbb */
EM { color: rgb(255,0,0);} /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

Link properties:

Links have a "pseudoclass" depending on whether they are fresh, active, or have been visited. Pseudoclass is indicated by a colon(:). The usual default is underlined, and blue, red or purple. Pick colors that show up against your background.

a:link	   {color: fuchsia; font-weight: bold}
a:hover	   {color: green;}	    /* while mouse hovers */
a:active   {font-style: italic}
a:visited  {text-decoration: none}  /* cancel underline */

Units of measurement in CSS

HTML generally assumes dimensions are in pixels, the basic dots on a screen. But pages can also be printed, so CSS offers several options for measurement. Bear in mind that screens come in many sizes, and browser windows can be resized.

%  - percentage of the available width or height
px - pixel	
in - inch	
cm - centimeter	
pt - point, a printer's measure, 1/72 inch
em - width of the letter "m" in the current font

Positioning elements

Elements of HTML can be classed as either block or inline.This is the "display" property, and can be changed, or even set to none.

Inline elements just flow along with the text, these include formatting sorts of tags, such as emphasis (EM, STRONG), SPAN (just a container for styles) and even IMG (unless you float the image, see below)

Block level elements, such as P, H1, H2, OL, UL, LI and DIV occupy a rectangular block, which is by default the width of the window (or other containing block).
DIV is a block element with no particular semantic meaning, in contrast to P (paragraph) or a Heading.
A (smaller) width can be specified, either in pixels or a percentage (eg. 40%) in which case there would normally be empty space to the right.

Lin Jensen You can "float" any element (block or image) either left or right, which takes it out of the flow, and other elements flow around it. This image is floated right as follows: (It would also clear, or come below anything previously floated right.)

<img alt="Lin Jensen" src="../jensen.jpg"
style="float:right; clear:right; width: 75px; height: 93px;">

The Box Model

All elements occupy a rectangular box, whick is surrounded by (moving outward) some padding, a border, and margin. Elements inherit properties, such as background, from their containing elements, unless another value is specified. Should this be a different background, the padding shares it, while the margin remains the outer colour. The border may be width 0 (invisible), or some thickness.

I have prepared an example at cs.ubishops.ca/ljensen/webdesign/csshowto_position.html . There is a block floated right at the top. Then there is a 2 column effect using DIV elements.

On the left is a repeat of this page. On the right are my notes about positioning
warning: Squeezed between are some ugly things that you would normally want to avoid.
At the bottom is a full width "footer" DIV, using the CSS property clear:both to push it down below both of the float columns.

@media rules

You may want to vary your styles for the printed version of a page. For instance, there are some links at the top and bottom of this page, but they are useless to have on the printed page. Also, some people like to use sans-sefif fonts on the screen, but feel it looks better printed in serif.

Some media types: screen, print, handheld, tv, aural, and braille

Groups to consider is whether the media type is paged/continuous, interactive/static, visual/aural/tactile

So, consider a piece of paper, it is probably white, and that background can't be changed, and we can't click on links or fill out and submit forms. We may have to deal with page breaks. If our style is

body {background: purple url("bishopsbackgd.jpg"); 
	   color: yellow; font: 8pt sans-serif;   }

Well, it should look fine, either with the background image that is generally darker shades of purple, or failing that, uniform purple, but on paper we will either see a grayish smudge or worse, something yellowish. And that tiny font is unattractive. So let's use:

@ media print {		/* these override when printing */
   body		{color: black;  font: 12pt serif;}
   .noprint	{display: none; }  /* stuff not needed */
	      }   /* close! */

Back to Contents
Home page of Lin Jensen