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 My first CSS STYLES DECLARED HERE 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 My first CSS body { color:#800000; background-color:#B8BFD8; } 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; } Click, File / Save – Go to browser and press F5 to refresh

STEP 3 - Format Heading Tag (font) … body { font-family:verdana; font-size:80%; color:#800000; background-color:#B8BFD8; } h1 { font-family:stencil,"courier new"; } … Click, File / Save – Go to browser and press F5 to refresh

STEP 4 - Add a link style … a {text-decoration:none;} a:link {color:#FFFFFF} a:visited {color:purple} a:hover {background-color:#ff3300} Rollover the Links! Click, File / Save – Go to browser and press F5 to refresh

STEP 5 - Horizontal line and help tool tip … hr { color:#b22222; border:thin dotted } acronym { border-bottom:1px dotted #b22222; cursor:help; } 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; } Click, File / Save – Go to browser and press F5 to refresh

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} Click, File / Save – Go to browser and press F5 to refresh

My first 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; }... 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 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!) **** COPY ALL BETWEEN THESE TWO TAGS! **** 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. My first CSS Click, File / Save – Go to browser and press F5 to refresh

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?