Demo 6: External Cascading Style Sheets

As shown in the reading assignments for today, you can use CSS to control much of your HTML page's formatting and appearance. For this exercise we will: a) add a Style Sheet to a plain, unformatted HTML document, and b) attach a different Style Sheet to that same document, and save the page under a different name.

In the end we'll have two HTML documents

Step 1: Replicate the formatting as shown in online example.

  1. Open up demo6a.html. Copy and paste the URL at the top of the page into a web browser. You will notice in this online article that there is a main heading, various sub-headings, a regular text size in black, a regular text size in orange, and a smaller text size in black. These are five distinct CSS Styles that we will define in this exercise.

  2. Choose Window>CSS Styles to open up the CSS pallette.
  3. At the bottom of this palette is a periwinkle-blue colored icon with a + sign on it for New CSS Style. Click on that.

  4. Now, you will see the dialog box shown below. You have three choices with this New CSS Style: Make Custom Style, Redefine HTML tag, or Use CSS Selector. Let's start by just redefining an HTML tag. This means that whenever that tag comes up in the document, the settings will be as you assign them right now.

    First let's redefine the <body> tag. In the drop-down list next to the word Tag, you will see a list of HTML elements. Choose 'body', as shown above. Then in the bottom portion of the Dialog Box, you will specify that you will Define In: (New Style Sheet File). Dreamweaver will now create this CSS document on the fly.






    When you click OK, you will be prompted as to what you would like to name this new CSS document. Name it demo6a.css.


    We can see from online article that the background color is white, so that would be a fine place to start.  To do this, select Background from the list on the left, and specify the color as white, as shown below:





  5. We've got our background, now we need some text. In order to control the text color and size in the HTML in a page that includes tables, it's necessary to redefine the <td> tag. (It will not work to set the text specifications for body).Click on the New CSS Style icon, as in Step 2. You'll get this dialog box.






    As before, choose Redefine HTML tag, but this time choose Tag: td from the drop-down list for <td>. Now you will see your demo6a.css is the default style sheet you will be working with.


    (FYI: If you were to choose "This Document Only" you would be embedding a CSS Style Sheet into your HTML document. But we will not be using embedded Style Sheets - only external).





    The text in the majority of the online article is Arial, about 12 px in size, and black, so let's redefine all the text to be such as seen above. Press OK.

  6. Custom Styles

    You may wonder now how to handle the rest of the text in this document that is not black and/or 12 px in size. Well, for those instances, we will create a Custom Style (class). A Custom Style setting will override what is assigned for Redefine HTML Tag.


    For example, you will notice that some of the text is still 12 px but a reddish color. Let's create a class called "red".





    As shown above, choose Make Custom Style (class) and type in the word "red" for the Name. Press OK.

  7. I looked at the articles source code to find out that the reddish color is #A2411E, so just enter this for color.





    Now all text that is assigned to this class will be this color.

  8. You will repeat steps 6-7 to create other Custom Styles or classes, just like you did with "orange" for the three other types of text shown in the article (i.e. the article header, subheaders, and smaller text at the bottom of the page for the Copyright).


  9. <a> Tags - Use CSS Selector

    Finally, you will redefine your <a> tags. In CSS, you must define each state of the <a> tag, in the following order: link, hover, active, and visited. To do this, click on the New CSS Style icon, but this time choose Use CSS Selector. From the drop-down list, choose a:link. Press OK.






    You will simply choose here what you'd like the link to look like by default:






    Press OK.

  10. Then go back through the Use CSS Selector process and choose settings for a:visited (how it will look when after the link has been visited), a:hover (how it looks while being hovered over), and a:active (how it looks as the user clicks on it).

  11. Now we need to apply the custom styles. Go to your CSS Styles pallette and click the circular button that says Apply Styles. In your demo6a.html, select the text that will have the custom styles applied to it. Then click on the style you'd like to apply as shown below:





  12. Once you have applied all of your Custom Styles, open demo6a.css in Dreamweaver. Save the document as demo6b.css.

  13. Put a link at the bottom of your page saying "go to demo6b". The link should go to demo6b.html (which we are about to create).

  14. Save demo6a.html. Now save it as demo6b.html.
Step 2: Replace the original formatting with your own, in a new Style Sheet (to be called demo6b.css)
  1. Go to your CSS Styles pallette and select demo6a.css. Click on the trash can icon at the bottom to delete it:



  2. Now click on the left-most icon at the bottom of the CSS Styles pallette, and attach demo6b.css.




  3. Now make changes to this style sheet as you see fit. As you do this, notice the way your HTML page changes in appearance. When you're done, make sure to save demo6b.html, and  put a link to demo6a.html at the bottom of your page.