Home
Revision
Tables
Colours
Styles
Javascript
An Introduction to Styles
You will remember from the previous workshop that much of the rendering of the web page is decided by the browser. When you use a tag such as <H1> the browser decides the size and weight of the font used to display the text.
With the introduction of styles (particularly Cascading Style Sheets, or CSS) it is possible to exert more control over what the browser displays. In other words, styles allow us to separate content from design, in a way that is not possible with basic HTML. Regrettably, not all browsers implement all of the style effects, and so we still have to wait the definitive solution to controlling page design and layout.
There are three ways to specify style (embedded style sheets, inline style sheets and linked style sheets). In this tutorial you will learn the basics of CSS by using embedded style sheets.
Embedded Style Sheets
Embedded style sheets are placed in the <HEAD> section of your pages and use the following syntax:
<STYLE TYPE="text/css">
TAG {property: value;}
</STYLE>
Stylesheets are a list of HTML tags followed by properties (enclosed in curly brackets). You may specify any number of tags, each of which can have a number of properties, separated with a semicolon (;).
This is an embedded style sheet which creates a simple mouseover effect for hyperlink text. This stylesheet specifies what the basic <a> tag should look like. On the first line it specifies a blue (#0000ff) colour with underlining, on the second line a hyperlink that has previously been visited is specified as maroon (#990066) with underlining, and on the third line hovering makes the text go red (#ff0000):
<STYLE TYPE="text/css">
a { color: #0000ff; text-decoration: underline }
a:visited { color: #990066; text-decoration: underline }
a:hover { color: #ff0000; text-decoration: underline }
</STYLE>
Copy this stylesheet into the head section of an HTML document and then observe the effects on a hyperlink tag.
Style Classes
Take a look at the stylesheet below, which is similar to the stylesheet used on this web page.
<STYLE TYPE="text/css">
body { font-family: verdana, arial, helvetica, sans-serif }
p, td, caption { font-size: 10pt}
h1 { font-size: 18pt;
color: #009999;
margin-top: 0.5em}
h2 { font-size: 14pt;
color: #009999;
border-bottom: #009999 1px solid;
margin-bottom: 1em;
padding-bottom: 3px;
margin-top: 2em}
h3 { font-size: 12pt; color: #009999 }
.topbar { color: #009999; font-weight: bold ;
border-bottom: #009999 1px solid;
padding-bottom: 1px}
.bottombar { color: #009999; font-weight: bold ;
border-top: #009999 1px solid;
padding-top: 1px}
</STYLE>
Most of the stylesheet can be seen to specify formatting for various tags. For example, the <h1> tag is of size 18pt, coloured green-blue, and has an area of clear-space above it of 0.5em.
At the bottom, are two tags which are not HTML, and are preceded by a full stop (.topbar and .bottombar). These are examples of stylesheet classes, and you can choose any name for them that you want (they could have been called .thetop and .thebottom for example). You specifiy a class, by including it as an attribute of the HTML tag you want it to apply to e.g.
<p align="right" class="bottombar">HTML Workshop</p>
Any paragraph specified in this way would have bold green-blue text, with a top border. Equally, you could use the same class for another HTML tag e.g.
<h1 align="center" class="bottombar">HTML Workshop</h1>
Using CSS with Lists
The LIST-STYLE-IMAGE property is an effective way of using any image as a bullet, using syntax such as: -
<UL STYLE="list-style-image: url(mybullet.gif)">
<LI>Item1</LI>
<LI>Item2</LI>
</UL>
This is an example of inline style, where the entire style syntax is contained within a single HTML tag.
Learning More About Stylesheets
- w3
- The WWW Consortium's CSS Specification.
- htmlhelp.com
- A good place to get started with learning about cascading style sheets is: - http://www.htmlhelp.com/reference/css/.