HTML 1 - Assignment 6

This week you will learn how to add style to web pages using CSS. Here is a list of the week's assignments:

• develop CSS external style sheet - 18 pts.
• use embedded and inline CSS - 2 pts.
• contribute to message board - 2 pts.
• start styling your web site

Tip of the week: Those of you who learned some HTML prior to this class are used to changing the look of your pages from within the HTML tags. Strict XHTML 1.0 does not allow this. The HTML code is used for structure (content) and the CSS code is used for presentation (styling.)

Preparation:

1. Online lecture: HTML 1, Week 6 - Intro to CSS
   
   
2. Text: Chapter 8
   
   
3. Handout: Using CSS
   
   
4. Week 5 Review - PowerPoint presentation covered in online lecture (.pdf format)
   Week 5 Review - PowerPoint presentation covered in online lecture (.txt format - accessible)
   
   

For Credit (22 points total):

1. Use CSS to add style to a practice page - 18 pts. total
   
   In this first part of the assignment you will suspend work on your web site and create an external stylesheet to enhance a practice page found at http://www.santarosa.edu/~cmassell/htmla/assn6code.html. The page will open in a new window.
   NOTE: Unfortunately, forcing a page to open in a new window utilizes code that will not validate strict, so you can click the validation button below and chuckle to see an orange bar appear :*(.
   
   From the View menu, choose "View Page Source" (Firefox) or "View Source" (Internet Explorer and Safari.) Select and copy all of the code and paste it into your text editor; then save the code as assn6.html so that you can work with it. Do not modify this code in any way except to add a "link" element in the head section of the page to create a link to your stylesheet. (Well, actually you will have to make a couple more small changes to get g. and h. - see below - to work.)
   
   You will note that this practice page has two validation buttons at the bottom - one for the XHTML and one for the CSS. I have decided that I am going to require that you use the CSS validation button from here on out, and we'll talk more about that in the online lecture and next week.
   
   Your work for the week is to develop a stylesheet that modifies the practice page in accordance with the instructions below.
   
   Create the following rules in your CSS file (2 points each):
   1. a rule that modifies the body element - gray background and sans-serif font
   2. a rule that modifies the paragraph elements - blue font
   3. a rule that modifies the h1 elements - solid black border-bottom, you choose the width
   4. a rule that modifies the h2 elements - blue serif font
   5. a rule that modifies the q elements - purple font
   6. a rule that modifies both the em and strong elements - green font
   7. a rule that modifies the p elements that belong to the "footer" class - black, serif font (The text shows an example of this on pp. 316-19 - all the p elements that belong to the "greentea" class.)
   8. a rule that modifies all elements that are in the "important" class - red font, silver background (The text shows an example of this on p. 320 - generic use of the "greentea" class.)
      
      
   Please do not hesitate to ask for clarification if you are not sure what to do. You should definitely view the online lecture and be sure and read the pages in the text that are referred to in the instructions above. We are entering a whole new world with CSS!
   
   Make sure that your finished web page validates - both XHTML and CSS: 2 pts.
   
   Upload your web page and the CSS file to the server, and send me an email. In the body of your email you should include the following:
   1. the URL of your web page.
   2. did your page validate?
   3. select the entire contents of your CSS file, copy the selection, and paste it into your email.
   
   The subject should be "HTML 1 6.1".
   
   
2. Use embedded styles and inline styles - 2 pts. total
   
   It is generally considered best practice to place all of your CSS in a separate file as you have done in assignment 6.1. This separate file is called an "external stylesheet". In this part of the assignment you will demonstrate that you know how to use 2 alternate techniques, called "embedded styles" and "inline styles".
   
   "Embedded styles" are "embedded" in the web page to which they apply. This is the technique used in the text up through page 302, when external stylesheets are first introduced.
   
   "Inline styles" are styles that are mixed in with the HTML code. In the view of many web designers (myself included), this technique should be avoided, but you still need to know how it works. Here's the process in a nutshell: Any individual tag can be styled by adding a "style" attribute to the tag.
   
   The syntax goes like this: <tag style="property: value; property: value">. For example, <p style="color: red; font-family: sans-serif;">. So, we have a mix of HTML and CSS. The rules are written essentially the same way in both, but quotes are used instead of curly brackets.
   
   
   1. 1 pt.: Make a copy of your assn6.html page named "assn6-2.html". Delete the "link" element and create a "style" element in assn6-2.html. Copy the rules from your external stylesheet into this style element. The resulting web page should look exactly like the page created in #1 above.
      
      
   2. 1 pt.: Insert at least one inline style into this web page that REPLACES ONE OF THE RULES in the embedded style. Don't take a rule out of the embedded styles and make it inline. Instead have your inline rule override one of the rules in the embedded style. For example, you could make your h2 text pink instead of blue.
      
      NOTE: This task demonstrates how stylesheets (CSS) work. Generally speaking, the closer a rule is to the element being changed, the more influence it has. With regard to external and embedded styles, however, precedence depends on order of the link and style tags in the head. If the link tag comes last, the external style will take precedence (closer to the element involved), but, if the style tag comes last, the embedded style will take precedence (again, it's closer to the element.) But all this goes out the window when you start including ids and classes, in addition to html selectors. When you get into the nitty-gritty of which rule takes precedence, it can be pretty complicated, as you can see from your book. We'll take it one step at a time.
      
      
   When you have completed steps a and b, upload the file assn6-2.html to the server and send me an email. in the body of the email state the URL of the web page that you just uploaded (it should remain separate from the rest of your site). The subject should be "HTML 1 6.2".
   
   
3. Participate in the Week 6 Discussion on the Message Board - 2 pts.
   
   

Additional work for your web site:

When you have finished with your assignment, you should develop a simple CSS file to begin to style your web site. Using the link element, attach this stylesheet to each of your web pages. This work begins an assignment that will be graded at the end of the class.

A word of advice: Some students make the mistake of creating too many classes in their XHTML. A well-designed web page will have as few classes as possible to achieve the look that you want.

Return to Top