Exercise 8: A 3 Part Exercise
1. CSS : External Style Sheets
2. IDs & Classes
3. CSS Rollover Navigation
Use an external style sheet, link it to all your pages to solidify the design for your entire website.
1. CSS External Style Sheets
HTML Elements
- <link>
- rel="stylesheet"
- href="style_sheet_name.css"
- type="text/css"
2. CSS IDs & Classes
Use IDs and Classes to further define your CSS styles. Classes can be used multiple times on each page (and also on multiple pages). IDs should only be used once per page but can be used on multiple pages.
CSS: Classes - Element Specific and Generic
Use classes to further define your styles. They can be attached to a specific element (element specific) or be defined simply as a class which can be attached to any element including span (generic).
HTML Elements
- element.class {property: value;}
- .class {property: value;}
CSS: IDs
We have seen in Exercise 4, that IDs can be used to define a location on a page. They can further be used to style the Element they are an attribute too. Define their styles in the head of the document or in an external style sheet. Remember to use the hash mark # before their name.
HTML Elements
- #idname {property: value;}
3. CSS Rollover Navigation
Use CSS styles to create rollover effects in your navigation both horizontal and vertical. Use additionall CSS design elements to make them more dynamic looking.
|
Exercise Requirements
This is an in-class exercise taking 2 to 3 classes to complete. All class work from this exercise must be turned in. We will cover the use of external style sheets, IDs and Classes, and CSS Rollover Navigation.
The homework for this exercise will actually be the creation of Project Two. All information we cover in class must be implemented in Project Two.
Design Process
- Create a project folder named "YourLastNameE8"
- Follow the usual procedure for making HTML documents.
- Write and link an external style sheet in Part 1 of your project.
- Save all HTML docs and images in your project folders.
- Review your work in a browser before uploading to the server
- Upload your HTML documents to the server and view them in a browser.
Evaluation
This exercise is worth 30 points (10 points per class period).
- Coding (6)
- Functionality (6)
- Meeting project requirements (6)
- Your effort (9)
- Meeting deadlines (3)
Due Date
Text Reference
- Chapter 13: pg 254 - 258
- Review Lecture in Course Content on Blackboard
Online Demos
|