Exercise 3: CSS Basics: Classes, IDs, Selectors, and Menus
Resources for this exercise:
- See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
- See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
- See the CSS Basics tutorial.
- See the CSS Box Model tutorial.
- See these CSS Resources.
- See this Selectutorial page
for excellent tutorials on CSS selectors.
- Also see the Complete CSS Guide for an excellent CSS selectors reference.
- See the SelectORacle page for help in understanding what selectors mean in plain English.
1) Create a new Web page for exercise 3.
2) This page must contain the XHTML 1.0 Strict DocType that will enable you to use an HTML validator (as explained in How to Use the W3C HTML and CSS Validators).
3) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)
4) This page must display your name and say "Exercise 3."
5) This page's <title> must indicate that this is your
exercise 3 page, so it should say something like "John Sky's DM160B Exercise
3".
6) This page must contain a relative link to your home page.
7) This page must contain an unordered list of at least 4 list items formatted in the following ways:
- The list must be a child of a
<div>, and this<div>must use an ID of "menu". - Each list item must be a link to another page. (Pretend this list is a navigation menu. It is not necessary to create pages for each of these links; you can link to any real pages.)
- The list must not display bullets or markers of any kind in front of the list items.
- The list items must display horizontally, not vertically.
- When you hover over each list item, there must be a visible change, such as having the color or background color of the menu item change.
See this Listutorial page for a step-by-step tutorial on styling a list into a horizontal menu.
8) Of course, in order to use an external style sheet, this page must contain
a <link> tag in the <head> section. In
your<link> tag, use a relative path to
the style sheet. You will be creating a directory, within your public_html
directory, called "css" that will hold your style sheets for homework
exercises, so the relative path from your exercise to the style sheet will
be "css/exercise3.css".
9) This page must demonstrate the use of all of the rules defined in your style sheet. Note that some selectors are not supported by all browsers. (In other words, you should test your selectors in a fairly standards-compliant browser such as Firefox.)
10) Create an external style sheet for exercise 3. In this style sheet you will demonstrate the use of a variety of selectors, as indicated in the next steps.
11) In this style sheet, define the following:
- a simple selector
- example:
p { property:value; }
- example:
- a grouped selector
- example:
h1, h2, h3, h4, h5, h6 { property:value; }
- example:
- a class selector
- example:
.duh { property:value; }
- example:
- a class selector (different from the previous class) combined with an element
selector
- example:
strong.blah { property:value; }
- example:
- an ID selector
- example:
#yikes { property:value; }
- example:
- an ID selector (different from the previous ID) combined with an element
selector
- example:
h2#yo { property:value; }
- example:
12) In this style sheet, also define the following:
- a descendant selector
- example:
p strong { property:value; }
- example:
- a child selector
- example:
a > em { property:value; }
- example:
- an adjacent sibling selector
- example:
h1 + h2 { property:value; }
- example:
13) In this style sheet, also define the following:
- these 4 pseudo-class selectors with anchor elements (in correct order)
- example:
a:link { property:value; } - example:
a:visited { property:value; } - example:
a:hover { property:value; } - example:
a:active { property:value; }
- example:
- the hover pseudo-class selector with an element other than anchor
- example:
p:hover { property:value; }
- example:
- these 2 pseudo-element selectors
- example:
p:first-letter { property:value; } - example:
p:first-line { property:value; }
- example:
14) Save this style sheet as "exercise3.css".
15) Upload the Web page into your public_html folder on the server.
16) Upload your external style sheet into your "css" directory.
17) View your page (the page on the server, not the page on your disk) in a Web browser. For example, if you called it exercise3.html:
Go to:
http://www.webhawks.org/~yourusername/exercise3.html
to view your exercise 3 page.
Or, to make it easier, you can always get to your home page by going to the Student Sites page for our class.
18) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
19) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.
20) If there are any errors, fix them, re-upload the page or style sheet, and validate again.
21) Make sure your home page has a relative link to exercise 3. Test this link to make sure it works!
22) Make sure the HTML on your home page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
23) Make sure the CSS on your home page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.
24) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on 9/26/11. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 09/28/11.