A2 – CSS


Requirement:

You MUST read the Academic Integrity policy before beginning this assignment. If you have any questions regarding what constitutes cheating, please contact your instructor.

Objectives: Gain experience incorporating CSS into an HTML page.

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


Reminder: Don't forget to set up an index page in your main folder on classweb with links to each of your assignments.

Don't forget to update your index page each time you upload an assignment. If the index page is not created by the time this assignment is graded, there will be a 5 point deduction.


  • Make a copy of your résumé page to use in this assignment.
  • Rename the copy "resume02.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.
  • 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. Please put them in your stylesheet in the order in which they appear below.
    • Universal Selector:
      • Set the background color to MintCream (#F5FFFA) using hex form.
      • Set the foreground color to Indigo (#4B0082) using hex form.
      • Set the font size to 14 point.
    • Element Selector for the document body:
      • Set the font family choices to Calibri, Californian FB, and sans-serif.
      • Set the left margin to 10%.
      • Set the top margin to 3 ems. (Note that the unit is actually "em", not "ems"!)
      • Set the body width to 80%.
    • Element Selector for level-one headings:
      • Set the font size to 2.2 em.
      • Set the font color to royal blue (#4169E1) using rgb form.
      • Display the text in all upper case.
      • Set letter spacing to 3 pixels.
      • Set the bottom margin to 0 pixels.
    • Element Selector for level-two headings:
      • Set the font color to royal blue (#4169E1) using the color name.
      • Set the bottom margin to 0 pixels.
      • Set the top margin to 1.5 ems.
    • Element Selector for level-three headings:
      • Set the text to italic.
      • Set the text to be displayed as uppercase.
      • Set the bottom margin to 0 pixels.
    • Element Selector for paragraphs:
      • Set the left margin to 4%.
    • Element Selector for unordered lists:
      • Set the left margin to 2%.
    • Element Selector for paragraphs and unordered lists (must be in the same selector):
      • Set the top margin to 0 pixels.
      • Set the bottom margin to 0 pixels.
    • Element Selector for horizontal line:
      • Set the height of the line to 4 pixels.
      • Set the color to navy (#000080) using hex form.
      • Set the background color to royal blue (#4169E1) using hex form.
      • Set the top margin to 0 pixels.
      • Set the bottom margin to 0 pixels.
    • There will be a substantial penalty if there is any formatting in "resume02.htm".

    Be sure to upload your html page and CSS page to the server  (classweb.cob.isu.edu) for grading using these directions.



    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).
    • Link your page to your index page. There will be a 15 point deduction if you fail to do so.
    • For each assignment that you set up this semester you need to include adequate commenting. For example, in the first part of this assignment you might include a comment block like the following at the top, per the instructions at the bottom of the Assignments Page:

      <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
             Ima Student
             March 24, 2020
            Assignment 2
            Purpose: Gain experience using CSS by applying formatting 
            to my resume.
       - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->