Practice Exercise: Intermediate CSS


Objectives: Gain experience applying intermediate CSS to an HTML page.

Description: This exercise is intended to provide you with experience using intermediate CSS and HTML.


  • Make a copy of your formatted résumé page from Assignment 2 to use in this exercise.
  • Rename the copy "resume02b.htm".
  • Be sure that your résumé includes the following tags, even if they were not present in the original:
    • Level-one heading for name.
    • Level-two heading for email address.
    • Horizontal rule immediately after email address.
    • Paragraph containing address and phone number. (You are not required to use your real address and phone number for class assignments.)
    • Level-three headings for Education, Selected Courses, etc.
    • Paragraphs and unordered lists for section details.
    • Horizontal rules at the end of your page.
  • The above tags should be applied as in this image: link

  • Create an external style sheet to make your résumé page resemble this page.
    • You may want to set the language in Notepad++ to CSS.
    • Remember – an external style sheet does not need <style type = "text/css"></style> tags!
    • Please list each property:value pair on individual lines and indent correctly.
  • Your style sheet should include these specific styles, and they must be used at least once in your HTML:
    • Class Selector called "alignLeft".
      • Set the text float to the left.
    • Class Selector called "alignRight".
      • Set the text float to the right.
    • Class Selector called "italic".
      • Set the text to italic.
    • Class Selector called "spaced".
      • Set the left margin to 2 ems.
      • Set the right margin to 2 ems.
    • Class Selector called "caps".
      • Set the text to be displayed as uppercase.
    • Class Selector called "bold".
      • Set the text to bold.
    • Class Selector called "doubleIndented".
      • Set the left margin to 8%.
    • Combined Class and Element Selector for divs called "clear".
      • Set the value of clear to both.
    • Combined Class and Element Selector for paragraphs called "notIndented".
      • Set the left margin to 0%.
  • Be sure to apply your css to your html, including the classes. If you cannot recall how, review these notes.
  • Do not include any formatting in "resume03.htm".

You should ALWAYS do the following, whether I specify it or not.

  • Include the HTML5 doctype.
  • Include a title using the title tag.
  • Nest your tags correctly.
  • Indent code correctly.
  • Validate your html using the W3C HTML Validator.
  • Validate your css using the W3C CSS Validator. Only when your page validates correctly should you add the nifty little CSS validation logo at the bottom of your html page(s).
  • For each web page that you set up this semester you need to include adequate commenting. For example, in the first part of this exercise you might include a comment block like the following at the top:

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
           Ima Student
           March 24, 2020
           Exercise 4
           Purpose: Gain experience applying Intermediate CSS  
           to my resume.
     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->