Cascading Style Sheets (CSS): Lesson #1

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 or  documents, changing the style in the css document changes the look of any html document that it is applied to. For example, if five html documents with <h1> tags are connected to a css file that instructs all <h1> text to appear as red, all of the <h1> text in all five of those documents can be changed to blue simply by changing one line in the css document.  ( h1 {color: blue} )

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 is a file named example_page1.html, another named stylesheet.css, and a folder named pix.

3. Open example_page1.html with Brackets and attach stylesheet.css by following the example shown below. The stylesheet link should be within your <head> tags, just above  the <title> </title> tags. Whatever you do, DO NOT put the  stylesheet link between the title tags. I have seen that mistake too many times to count.

In this particular 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.

<p class="style2"> Style 2. Nmix 4110 </p>

7. Once  you have applied the styles, edit each style by changing colors, sizes, letter spacing, etc. You can find a lot of cool text effects here at w3schools. that do things like dropping a shadow, transforming the text to upper or lower case, etc.  Entertain yourself for a few minutes as you explore these effects! 

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 in stylesheet.css.  Change them radically and save the file!

11. Reopen example_page1.html.  Does it look different?   That's because you changed the stylesheet that it is attached to. Because stylesheet.css is a separate file, any document that it is attached 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?

Now that 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.

Print Friendly, PDF & Email