Style Sheets in HTML | Still Plugging Away

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

Extract style element contents and save as a stylesheet (xxx.css)
Add a <link> element to point to the stylesheet
Mixing stylesheets, style elements, and style properties: cascading
Comments in style sheets

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> to FDAstyle.css

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?

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

Our privacy policy: we use cookies to keep track of where you are on the site, but we do not leave cookies on your site; we do not track your visits; we do not disseminate any information about you because we do not gather any information about you.