CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…
-
Upload
lenard-wilkerson -
Category
Documents
-
view
216 -
download
0
description
Transcript of CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…
![Page 1: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/1.jpg)
CSS – 8 Step Walk Through!
Using HTML
![Page 2: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/2.jpg)
You will use 8 steps to transform this page to…
![Page 3: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/3.jpg)
… this page!
![Page 4: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/4.jpg)
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
![Page 5: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/5.jpg)
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
![Page 6: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/6.jpg)
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
![Page 7: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/7.jpg)
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
![Page 8: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/8.jpg)
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>…
Click, File / Save – Go to browser and press F5 to refresh
![Page 9: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/9.jpg)
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!
Click, File / Save – Go to browser and press F5 to refresh
![Page 10: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/10.jpg)
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?
![Page 11: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/11.jpg)
STEP 6 - Add an image float
……
img{float: right;border: 1px solid #b22222;}
</style>
Click, File / Save – Go to browser and press F5 to refresh
![Page 12: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/12.jpg)
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
![Page 13: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/13.jpg)
<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.
![Page 14: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/14.jpg)
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.
![Page 15: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/15.jpg)
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>
Click, File / Save – Go to browser and press F5 to refresh
![Page 16: CSS – 8 Step Walk Through! Using HTML. You will use 8 steps to transform this page to…](https://reader035.fdocuments.us/reader035/viewer/2022062905/5a4d1aee7f8b9ab05997c898/html5/thumbnails/16.jpg)
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?