1. Download this file and unzip it (this may happen automatically). Find the unzipped stylesheet_example folder (most likely in your downloads folder) and copy it into the folder that you are working in for this class.
2. Take a look inside the stylesheet_example folder and make sure there are three files named example_page1.html, example_page2.html, and stylesheet.css, as well as a folder named pix.
3. Open example_page1.html with your editor and attach stylesheet.css by adding the following code just below the <title> tags:
<link href="stylesheet.css" rel="stylesheet" />
In this case the stylesheet is in the same folder as the html document. Otherwise, you would have added a folder name in the path statement such as <link href=”css/stylesheet.css .
4. Open stylesheet.css and take a look at the style names, .style1, .style2, through .style5. These types of styles are referred to as classes because they begin with a period. Styles that begin with a hash tag #, are referred to as ids. You are about to apply those 5 classes.
5. Return to example_page1.html and add the style1 class to the paragraph tag that encompasses Style 1. Nmix 4010 by changing
<p>Style 1. Nmix 4010</p>
to
<p class="style1">Style 1. Nmix 4010</p>
6. Do the same with “Style 2. Nmix 4010” etc. until you have applied all five styles to a different text block.
7. Now that you have applied the styles, edit each style by changing colors, sizes, letter spacing, etc. Hint: style4 in stylesheet.css should server as good example.
8. Create a brand new class in stylesheet.css (name it .newstyle if you wish), add some properties to the new style, add a new text block in example_page1.html (<p> and </p> tags with text between them) and apply the new style to the new text block.
9. When you are done be sure and save the stylesheet. Close example_page1.html.
10. Create a new html file and attach the same stylesheet. Add some text and apply the different styles to it. Now change each of these styles. Change them radically!
11. Reopen example_page1.htm. Does it look different? That’s because you changed the stylesheet. Because stylesheet.css is a separate file, any document that is applied to is affected when you alter it.
12. To illustrate this point further drag the file named stylesheet.css out of the stylesheet_example folder to the desktop. Now look at your example page. All of those styles should disappear because the html file can no longer find the stylesheet. Ie, you broke the relationship. Put stylesheet.css back into the stylesheet_example folder. Did the styles reappear?
13. Before you leave, you MUST explore some of the CSS text effects such as text-shadow:
text-shadow: 2px 2px #ff0000;
text-transform, which converts text to upper or lower case:
text-transform: uppercase;
or
text-transform: lowercase;
letter spacing:
letter-spacing: 2px;
and word spacing. Have fun.
Once you have a truly funky looking document, it is time to save it, link to it from your homepage (index.html) and upload everything. Be sure and upload stylesheet.css into the same relative location as example.html or all that good work will be for nothing. Also, don’t forget to replace the older version of index.html on the server with the newer version that you just added a link to.