Monitor

Lesson 8: Stylesheets

 

Links

Your home page

Creating Websites home

Beginnings
   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Lists
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   Misc. topics
   Cookies
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends

The video below describes how to extract the content of style elements into stylesheets:

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

 


Lesson 8: Stylesheets

Click here for the video transcript

 

Supplemental materials

    A cumulative summary of the contents of the course so far: Click here

 

Hands on exercise

For those who want to practice using what we cover in this class, most lessons have an opportunity for you to learn on your PC. The exercise for this lesson is primarily concerned with creating style sheets and understanding how cascading works.

Part 1:

First, create a stylesheet from your FDA.html file. Name your stylesheet "FDAstyle.css".

Add a link to FDAstyle.css in FDA.html

In FDAHist.html, replace the entire <style> element with a link to FDAstyle.css.

Test both FDA.htm and FDAHist.html use FDAstyle.css

 

Part 2:

Notice that FDAstyle.css includes the colored borders from the lecture.

Create a new stylesheet, FDAstyle-yellow.css: open FDAstyle.css, change the color of the border for .leftcolumn to 'yellow'; save the resulting stylesheet as "FDAstyle-yellow.css".

In FDA.html, add a <link> to FDAstyle-yellow.css after the <link>

save FDA.html and look at in your browser what color is the border around the left column?

Now in FDA.html, reverse the order of the two stylesheet links: save the file and refresh it in your browser. What color is the border around the left column?

 

 Lesson navigation 

 

 

Email us if you would like additional information. We would love to see your comments and recommendations for our site.