Lab 5: More CSS
Student Learning Objectives
After completion of this lab assignment, you should have demonstrated the ability to
- Use HTML-Kit to create externally-linked cascading style sheets
- use the XHTML
div element to group elements
- apply CSS2 style rules to position elements on the screen
- Use CSS to create a roll-over menu effect
- use the
media attribute with linked style sheets to print with an alternative style
- Use the W3C CSS Validation Service (on the actions toolbar online tab within HTML-Kit) to eliminate any CSS warnings and errors
- Use comments, meta tags, and Tidy within HTML-Kit to create Web and CSS pages that conforms to the CS 350 Coding Standards
Assignment
- Create a new folder U:\Lab5. Folder Lab5 will contain three files:
- your
index.html XHTML 1.0 Strict markup file
- your
screen.css style sheet file
- your
print.css style sheet file
- Use HTML-Kit to create a Web document with four divisions:
- a header area,
- a navigation area,
- an advertisement area, and
- the main content area.
- Use XHTML to mark-up the content of the page shown below. Non-obvious tags are indicated in square brackets [..]
- The navigation area contains an unordered list with three hypertext anchor links
- The advertisement area contain two text advertisements, each advertisement grouped with <div class="ad">
- In your
screen.css file, write the style rules to
- Set the page body's margins to 10 pixels on all sides with no padding. Use a Verdana sans-serif font and set the default font-size to 95%
- Set all divisions to display with a 1 pixel, solid, black border (to help with debugging)
- In the Header Area
- Set its heading 1's text to display centered, in a 'Courier New' monospace font, and a font size of .8 em
- Set its heading 2's text to display centered with a font size of 1.5 em
- In the Navigation Area
- Make its width 25% of the screen size and float it left
- Make its heading 2 element display left-aligned with a font size of 1.2 em
- Style its unordered list of anchor elements to look like a menu
- In the Advertisement Area
- Make its width 25% of the screen size and float it right
- Make its heading 2's text display center-aligned in an italic font and a font size of .8 em
- Write the rules for the div's
ad class to
- specify a margin of 1 em on all sizes of the div
- use a background color of red and a text color of white
- center the text
- In the Main Content Area
- Set the right and left margins to 26% of the screen size
Note (added 10/10/2007 1:00 PM): on the screen snapshot below, the left-padding is set to 1em. Sorry for the confusion.
- Make its heading 2's text centered with a font size of 1.2 em
- In the
print.css style sheet, write the style rules to
- set display to none for the navigation and advertisement areas so that only the header and main content are printed.
- You do not need to specify style rules for the header and main content elements.
- The browser should use the default settings when printing your Web page
To Receive Credit
- Print out and staple together four printouts:
- the displayed Web Page printed in Firefox or IE 7.0
- Note: only the heading and main content areas should be on the printout
- We will check the navigation and advertisement areas online with a screen browser
- your
screen.css style sheet
- your
print.css style sheet
- your
index.html XHTML 1.0 Strict code
- Save your style sheets as
screen.css and print.css and your XHTML page as index.html in folder U:\Lab5 in your cs350 account.
Grading Criteria
- Labs will be graded on a scale of 0 to 10:
- 10: Excellent, page displays on screen and prints perfectly, no problems detected in the CSS or XHTML code. No validation errors or warnings.
- 9: Very well done: No validation errors or warnings, but one minor problem are present in the CSS or XHTML code
- 8: Well done: Two minor problems or omissions in the CSS or XHTML
- 7 Acceptable: One or two validation errors or legitimate warnings in the CSS or HTML code
- 6 Problems: Three or more problems or validation errors remain
- 5, 4, 3: Incomplete: the lab was attempted but over one-third of the requirements still undone
- 0: Lab not submitted, no work done. You are allowed to drop your lab lowest score
Screen Snapshot