CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…

CSS – 8 Step Walk Through!

Using HTML

You will use 8 steps to transform this page to…

… this page!

STEP 1 – SET UP

1. Copy from Moodle the file My_First_css.htm to your H:/ drive and ensure you have a copy of pic_web.gif

2. Open Windows Explorer and open the Web Page My_First_css.htm in Notepad

3. Open up the Web page in a browser

Style Tags

<head><title>My first

CSS</title>

<style type="text/css">

STYLES DECLARED HERE

</style>

</head>

The style tags are placed in the Head section of the web page

This will be an internal style applied only to this web page

All code from Step’s 2 -7 will be between these two tags

STEP 2 - Add some colours

<head><title>My first CSS</title>

<style type="text/css">body{color:#800000;background-color:#B8BFD8;}</style>

</head>

Click, File / Save – Go to browser and press F5 to refresh

Should look something like this. What has changed?

body{color:#800000;background-color:#B8BFD8;}


STEP 3 - Format Heading Tag (font)

…<style type="text/css">

body{font-family:verdana;font-size:80%;color:#800000;background-color:#B8BFD8;}h1{font-family:stencil,"courier new";}

</style>…


STEP 4 - Add a link style

…

a {text-decoration:none;}a:link {color:#FFFFFF}a:visited {color:purple}a:hover {background-color:#ff3300}

</style>

Rollover the Links!


STEP 5 - Horizontal line and help tool tip

……

hr{color:#b22222;border:thin dotted}

acronym{border-bottom:1px dotted #b22222;cursor:help;}

</style>Click, File / Save – Go to browser and press F5 to refresh

Place your mouse over the CSS! Text – What happens?

Why?

STEP 6 - Add an image float

……

img{float: right;border: 1px solid #b22222;}

</style>


STEP 7 - Style a list

… (be careful here, you are adding some extra styles to the a {…} style.)

…ul{margin-left:0;list-style-type:none;}

a{text-decoration:none;display:block;padding:2px;width:150px;border-bottom:0.1em solid #b22222;}a:link {color:#FFFFFF}


<html><head><title>My first CSS</title><style type="text/css">body{font-family:verdana;font-size:80%;color:#800000;background-color:#B8BFD8;}h1{font-family:stencil,"courier new";}ul{margin-left:0;list-style-type:none;}a{text-decoration:none;display:block;padding:2px;width:150px;border-bottom:0.1em solid #b22222;}a:link {color:#FFFFFF}a:visited {color:purple}a:hover {background-color:#ff3300}hr{color:#b22222;border:thin dotted}acronym{border-bottom:1px dotted #b22222;cursor:help;}img{float: right;border: 1px solid #b22222;}</style></head><body>.........

Internal Style Sheet - Styles declared on this page only.

Web browser interprets code in an order of priority:

•Priority 1. - Inline Style (inside HTML element)

•Priority 2. - Internal Style Sheet (inside the <head> tag)

•Priority 3. - External Style Sheet

•We will now change this into an external style sheet! • External will effect a website not just a webpage.

STEP 8 - External file

Copy the style declarations between the style tags (not the style tags!)<style type="text/css">

**** COPY ALL BETWEEN THESE TWO TAGS! ****

</style>

Open Notepad and create a new file

Paste the style declarations in to the new note pad file

File Save as… myfirst_css.css (note it is not .htm or .html but a .css file format)

Make sure this file is saved in the CSS directory you’ve been working from.

STEP 8 – cont.

Open up My_First_CSS.htm in notepad

Delete the Style tags and style declarations and replace with the following markup.

<title>My first CSS</title>

<link rel="stylesheet" type="text/css" href="myfirst_css.css">

</head><body>


To finish…

There is no difference in regards to presentation, except, now you can link lots of webpage’s in your website to the .css myfirst_css.css file!

Why is this useful?

Documents

CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…