Cascading Stylesheets (otherwise known as CSS) offer a powerful formatting tool for web developers. One of the best things about CSS is the ability to attach a web document to a pre-existing group of styles that can instantly offer advanced formatting options. Another nice capability is that once you have applied the same style to multiple places in a document, all you have to do to change the look of your document is change the style. At that point, all instances of that style are automatically updated. Confusing? Let’s go styling and find out.
1. Download http://free.mynmi.net/stylesheet_example.zip and unzip it (this may happen automatically). Find the unzipped stylesheet_example folder (most likely in your downloads folder) and copy it into your mysite folder.
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 Brackets (not Dreamweaver) and attach stylesheet.css by adding the following code just below the <title> tages:
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
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 4110 by changing
<p>Style 1. Nmix 4110</p>
to
<p class="style1">Style 1. Nmix 4110</p>
6. Do the same with “Style 2. Nmix 4110” 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.