Quick Notes - Basic Style
This is a short guide to help you add style to your web pages using Cascading Style Sheets (CSS). The guide will help you steer clear of most of the problems caused by different makes and versions of browsers. Intermediate and advanced style topics are covered in other tutorials. You can also use my CSS quick reference guide or consult the definitive www.w3.org CSS2.1 recommendations.
For style sheets to work, it is important that your pages are free of errors. Just as the W3 MarkUp Validator should be used often for checking the syntax of HTML documents, the W3 CSS Validator should be used for checking CSS stylesheet syntax. Each validation service should be consulted after every document change. One convenient way to automatically fix HTML errors is to use the HTML Tidy utility.
Writing Style Rules
Start adding style to your document by setting rules for the color of the text and the background. Style rules are written in a special format. Each rule starts with an HTML element name followed by a list of style properties bracketed by {and }. In this example, the rule is for the body element. As you will see, the body element provides the basis for setting the overall look and feel of your Web page.
Each style property starts with the property's name, then a colon and lastly the value for this property. When there is more than one style property in the list, you need to use a semicolon between each of them to separate one property from the next. In this example, there are two properties:color which sets the color of the text, and background which sets the color of the page background. Adding a semicolon after the last property is redundant but allowed.
body {color:black;background:white}
Note that the colors are set in pairs, text (or foreground) and background. This is to make sure that suitable contrast is explicitly known by the designer. There are times when you can omit one of the settings so that a color can be inherited from another element but until you are comfortable with design, code it safely with both properties. More details on color are given in a later section.
At times you will want to be able to use different rules for the same HTML element. For example you will want to justify some paragraphs left and others centered. This is accomplished by setting rules for different classes (or subsets of an element) where the class is identified by name. Any name can be used but it is easier to keep track if you use descriptive names. For example:
p {text-align:left}
p.centered {text-align:center}
To use the second rule in a paragraph element, write it as
<p class="centered">
Inline Style, Style Elements, Style Sheets
Style rules can be located in one of three places. If it is a rule that is only going to be used once or twice then an inline style attribute can be used (but current practice discourages mixing style and content. For example:
<body style="color:black;background:white">
If a style is to be used consistently within the entire document or many places on the document then a style element is more appropriate:
<style type="text/css">
body {color:black;background:white}
</style>
The style element must be placed in the document's head section along with the title element. It shouldn't be placed within the body section.
If you are likely to want to use the same styles for several Web pages it is worth considering using a separate style sheet which you then link to from each page. You can do this as follows:
<link href="style.css" rel="stylesheet" type="text/css">
The link element should be placed in the document's head section. The rel attribute must be set to the value "stylesheet" to allow the browser to recognize that the href attribute gives the Web address (URI) for your style sheet. The type attribute is used to indicate that the stylesheet syntax is that of Cascading Style Syntax.
Note: Style attributes, elements and stylesheets contain no HTML tags whatsoever! They are strictly a list of properties and values, separated by colons and surrounded with curly brackets. They refer to specific HTML elements by name without angle brackets.
Setting Background and Text Colors
Some examples for setting colors are:
body {color:black;background:white}
strong {color:red}
span {color:red;background:transparent}
This sets the body to black text on a white background, but renders strong elements in red. Notice how strong omitted the background property, thus inheriting the color from the surrounding layer. Span uses the value transparent to do the inheritance explicitly which is a much safer way of coding your style.
Note: When using color, remember that 5 to 10% of males have some form of color blindness. This can cause difficulties distinguishing between red and green (why we bust traffic signals ;-] ), or between yellow and blue. In rare cases, there is an inability to perceive any colors at all. You are recommended to avoid any foreground/background color combinations that would make the text hard to read for people with color blindness.
There are three ways to specify a color:by name, by decimal value or by hexadecimal value. The last two methods give you much more control over color selection but definitely are not as readable.
- Named colors: The recommended set of color names is known as the X11 color set.
- Decimal color values: Values for red, green and blue components are set individually, where each value appears in the range 0 to 255. One example is rgb(255,0,0) (the same as the named color red.).
- Hexadecimal color values: Values like "#FF9999" represent colors as hexadecimal numbers for red, green and blue components. The first two characters following the # give the number for red, the next two for green and the last two for blue. These numbers are always in the range 0 to FF.
Adding Textured Backgrounds (Watermarks)
Often you may want the background of a page to be textured as well as colored. This can be added easily by referencing it within the background property, normally attached to the body element. If the background is made 'transparent' and not busy, it becomes a 'watermark'.
body {color:black;background:white url(flyspec.gif)}
Adding Repeating Backgrounds
Quick HTML illustrated how repeating an image makes an attractive rule. But doing it with html makes for ugly coding. Style lets you repeat an image to fill an area by using the background property and repeat value. For example:
<div style="background:url(images/tpot.jpg) repeat-x;width:600px;height:60px"></div>
will appear as:
Setting Link Colors
You can use CSS to set the color for hypertext links, with a different color for links that you have yet to follow, ones you have followed, and the active color for when the link is being clicked. You can even set the color for when the mouse pointer is hovering over the link.
a:link {color:rgb(0,0,153)} /* for unvisited links */
a:visited {color:rgb(153,0,153)} /* for visited links */
a:active {color:rgb(255,0,102)} /* when link is clicked */
a:hover {color:rgb(0,96,255)} /* when mouse is over link */
Sometimes you may want to show hypertext links without them being underlined. You can do this by setting the text-decoration property to none, for example:
a.plain {text-decoration:none }
Which would suppress underlining for a link such as:
This is <a class="plain" href="what.html">not underlined</a>
Most people when they see underlined text on a Web page, will expect it to be part of a hypertext link. As a result, you are advised to leave underlining on for hypertext links. A similar argument applies to the link colors, most people will interpret underlined blue text as hypertext links. You are advised to leave link colors alone, except when the color of the background would otherwise make the text hard to read.
Setting Font Family, Size And Styles
This section explains how to set the font and size, and how to add italic, bold and other styles.
Setting The Font Family
Font types are separated into families of similar appearance. Serif fonts have small decorations on many letters (such as i and l) which make them easier to read. Sans-serif fonts lack these decorations but are excellent as title or heading lettering. Cursive fonts are fancier fonts that try to simulate styles of handwriting. Fantasy fonts are artistic dreams. Monospace fonts simulate typewritten fonts.
It is likely that your favorite font family will not be available on all browsers. To get around this, you are allowed to list several fonts in preference order. It is recommended that any font type list end with one of the generic family names of serif, sans-serif, cursive, fantasy or monospace. For instance:
body {font-family:Verdana, sans-serif}
h1,h2 {font-family:Garamond, "Times New Roman", serif}
In this example, important headings would preferably be shown in Garamond, failing that in Times New Roman, and if that is unavailable in the browsers default serif font. Paragraph text would appear in Verdana or if that is unavailable in the browser's default sans-serif font.
The legibility of different fonts generally depends more on the height of lower case letters than on the font size itself. Fonts like Verdana are much more legible than ones like "Times New Roman" and are therefore recommended for paragraph text.
- This is an example of your browser's default serif family.
- This is an example of your browser's default sans-serif family.
- This is an example of your browser's default cursive family.
- This is an example of your browser's default fantasy family.
- This is an example of your browser's default monospace family.
Setting The Font Size
Most browsers use a larger font size for more important headings. If you override the default size, you run the risk of making the text too small to be legible, particularly if you use point measures. It is strongly recommended that you to specify font sizes in relative terms.
This example sets heading sizes in percentages relative to the size used for normal text:
h1 {font-size:200%}
h2 {font-size:150%}
h3 {font-size:100%}
Font styles
The most common styles are to place text in italic or bold. Most browsers render the em tag in italic and the strong tag in bold. Let's assume you instead want em to appear in bold italic and strong in bold uppercase:
em {font-style:italic;font-weight:bold}
strong {text-transform:uppercase;font-weight:bold}
If you feel so inclined, you can fold headings to lower case as follows:
h2 {text-transform:lowercase}
You can also use the span element instead of em or strong for any fancy font work in your sentences. Many authors prefer to keep the defaults for the older elements or set them once and for variations use span and classes.
Avoiding Problems With Fonts And Margins
The first rule is to avoid text at the body level that isn't wrapped in a block level element such as p. For instance:
<h2>Spring in Wiltshire</h2> Blossom on the trees, bird song and the sound of lambs bleating in the fields.
The text following the heading runs the risk on some browsers of being rendered with the wrong font and margins. You are therefore advised to enclose all such text in a paragraph, e.g.
<h2>Spring in Wiltshire</h2> <p>Blossom on the trees, bird song and the sound of lambs bleating in the fields.</p>
The second rule is to set the font family for pre elements, as some browsers forget to use a fixed pitch font when you set the font size or other properties for pre.
pre {font-family:monospace}
The third rule is to set the font family on headings, p and ul elements if you intend to set borders or backgrounds on elements such as div. This is a work-around for a bug where the browser forgets to use the inherited font family, instead switching to the default font as set by the browser preferences.
h1,h2,h3,h4,h5,p,ul {font-family:sans-serif}