Creating Websites home
Introduction to the Web
Marking up text
FTP and FileZilla
Links and anchors
Getting some style
Testing and debugging
Images and maps
Audio and video
The DOM and scripting
Logic and Arrays
Functions and document.write
Forms and INPUT
Scripting w/ tables
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
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.
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
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?
back list forward