Using HTML

Cascading Style Sheets

Cascading Style Sheets (CSS) are used with HTML pages to allow easy formatting of text - colour, size, case, background colour, line spacing etc. You can specify in the style sheet how you want various tags to look. By adding the <LINK> tag to the page <HEAD> section, your page will look as you planned. Style sheets are separate pages to HTML pages and they are saved as .CSS.

Link to Style Sheet

Exercise

Link a HTML page to a CSS page called style.css by inserting the code below.

HTML

<HTML>
<HEAD>
<TITLE>CSS</TITLE>
<LINK href=style.css rel=stylesheet type=text/css>
</HEAD>
<BODY>
<P>some normal paragraph text</P>
</BODY>
</HTML>

XHTML

<html>
<head>
<title>CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" / >
</head>
<body>
<p>some normal paragraph text</p>
</body>
</html>

Note that the link tag has a closing slash /> at the end, to close it.

Create Style Sheet Definition for <P>

Now to create the style sheet itself. It's basically just a list of HTML tags, with the formatting you want to apply to it. Below is a sample style for <P> tags. When you have finished typing in the style sheet contents, save it as style.css in the same folder as the page you are calling it from. Once you have your CSS created and linked you can play with it and see how the changes affect the HTML page.

Exercise

Create style sheet for <P>

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
color: #666666;
}

Create Style Sheet Definition for <H1>

Exercise

Create style sheet for <H1>

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
color: #666666;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 150%;
color: #336699;
}

To see the results of this definition, it is necessary to create headers in your HTML page.

HTML

<HTML>
<HEAD>
<TITLE>CSS</TITLE>
<LINK href=style.css rel=stylesheet type=text/css>
</HEAD>
<BODY>
<H1> Main Header</H1>
<P>some normal paragraph text</P>
</BODY>
</HTML>

XHTML

<html>
<head>
<title>CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" / >
</head>
<body>
<h1> Main Header</h1>
<p>some normal paragraph text</p>
</body>
</html>

Exercise

Create style sheet definitions and corresponding header tags for <H2> and <H3> in the same way.

Create Style Sheet Definition for <LI>

Exercise

Create style sheet for <LI> in ordered lists

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
color: #666666;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: large;
color: #336699;
}

ol li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
color: #999999;
list-style-position: outside;
list-style-type: lower-roman;
}

And add some ordered list elements to your HTML page so you can see the results of your definition.

HTML

<HTML>
<HEAD>
<TITLE>CSS</TITLE>
<LINK href=style.css rel=stylesheet type=text/css>
</HEAD>
<BODY>
<H1> Main Header</H1>
<P>some normal paragraph text</P>
<OL>
<LI> a list item</LI>
<LI> another list item</LI>
</OL>
</BODY>
</HTML>

XHTML

<html>
<head>
<title>CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" / >
</head>
<body>
<h1> Main Header</h1>
<p>some normal paragraph text</p>
<ol>
<li> a list item</li>
<li> another list item</li>
</ol>
</body>
</html>

 

Styles you can use in ordered lists are

  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • hebrew
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha

You can also style unordered lists with

  • circle
  • square
  • disc

Create Style Sheet Definition for <TD>

Exercise

Create style sheet for <TD>

Add this code to your style sheet

td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
color: #285128;
}

Add some table markup to your HTML page to see your results

HTML

<TABLE>
<TR><TD>cell 1</TD><TD>cell 2</TD>
<TR><TD>cell 3</TD><TD>cell 4</TD>
</TABLE>

XHTML

<table>
<tr><td>cell 1</td><td>cell 2</td>
<tr><td>cell 3</td><td>cell 4</td>
</table>

Create Style Sheet Definition for <A>

Links have several states i.e.

  1. the default link - when the link has never been clicked or visited
  2. the hover link - when the link has a mouse over it
  3. the active link - when the link is selected, or clicked
  4. the visited link - when the link has been visited

Each of these states can be defined in the style sheet, so they can have different colours, background colours, underlined etc.

Exercise

Create style sheet for <A>

Add this code to the style sheet

a {
font-weight: bold;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
text-transform: lowercase;
}

a:link {
color: #F7F7F2;
}

a:visited {
color: #c9c9ae;
}

a:hover, a:active {
color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #FFFFFF;
}

Add a link to your HTML page to see the effects of the style.

HTML

<A HREF="http://www.ilikecake.net/dreamweaver">link to dreamweaver notes</A>

XHTML

<a href="http://www.ilikecake.net/dreamweaver">link to dreamweaver notes</a>

You can see the style sheet of this site here.

To center items in a page you can align them in the style sheet:

body {

text-align:center;

}

Note that you have to spell centre the American way - center.

You will then have to left align everything you don't want to be centered:

p, li, h2 {

text-align:left;

}

To centre tables you will need an additional piece of code:

table {

margin:auto;

}

Want to check your code?

The next step is to add some tags you will require to be able to test your documents for validation.

Some Review Exercises

If you're not sure that you will remember everything, perhaps you should try the revision exercises: