With step2.html open and looking at the <Head>...</Head> section
of our code, currently looks like this:-
<head> <title>CSS Tutorial Page - Step 2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
To link our stylesheet we insert a new line of code, my usual place and it seems most designers put there link on the last line of the head section, so it now looks like this:-
<head> <title>CSS Tutorial Page - Step 3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="/styles/yourownstyle.css" rel="stylesheet" type="text/css"> </head>
Also make the title more relevant, changing Step 2 to Step 3, not that this affects the style sheet in any way.
The above line inserted assumes that you have called your style sheet 'yourownstyle.css' and that it is located in a folder called 'styles' which sits off of the main sites root folder. If you have put yours elsewhere and/or called it something else then amend the filename and/or file path accordingly.
In Dreamweaver , there is the 'attach style sheet' function located in the Design tab of the left menus, which will allow you to browse for the style sheet and it will insert the code for you.
Now thats very nearly all we have to do, there are a couple of parts to the bare-bones code that have no tags at all, left alone will assume the default page styles located in the 'yourownstyle.css' file under the heading of 'body', which is currently set to
font-family: Georgia, Times New Roman, Times, serif; font-size: medium; text-align:left; text-decoration:none; color: cc33cc; font-style: italic; background-color: ffffcc;
That is fine for this part :-
<p align="left">This line should be the default purple colour, italic in style and Georgia in type.</p>
and so we leave it alone, however the following code :-
Cascading Style Sheets <br /> Part One - Go backwards to go forwards
needs to be changed in order to look like our original page (we dont want these lines to be purple or italic).
In our CSS file I used the <h2>...</h2> tags to recreate the look of these lines as they looked in our ' step1.html ' page.
So lets alter these lines to suit, replace the above code with :-
<h2>Cascading Style Sheets <br /> Part One - Go backwards to go forwards</h2>
and we are done. Lets check our results.
Back to CSS Part Two Page One | Forward
to CSS Part Two Page Three 