Assignment 2: fancy resume

Here is a styled resume for Rajni. Write a styled version of your own resume. You should do two things first:

1. Create a new html file by copying the old one into a new file resume-styled.html

2. Create a style file resume.css. This is where you will put your css code. Within the head element of resume-styled.html add the line

<link rel="stylesheet" type="text/css" href="resume.css">

Now any style rules you put in resume.css will be applied to the HTML in resume-styled.html. Separating your CSS and HTML like this allows you to reuse the CSS for other resumes, and also makes the HTML shorter and easier to edit.

Now you need to modify your HTML code to label various pieces of the resume for styling, and write CSS rules to style those pieces.

How you style your resume is up to you, but here is a brief list of some of the changes made to style the sample resume:

• Set the margins for the body element of the whole page.
• Created a div for the header section of the resume.
• Deleted the image, since it didn’t fit with the style. Instead, added a multimedia section to the resume at the bottom with a youtube link.
• In the header, removed the bullets from the address/contact list using list-style-type: none;.
• Centered the list using text-align:center;, and made the individual list elements appear inline with display: inline so that the list elements appear horizontally rather than vertically on the page.
  
• Divided the resume into sections using section elements. (Could have used div elements with a resumeSection class.) For each of these sections, made the heading elements small-caps using the font-variant property.
  
• Also set the margins for the sections to indent them. However, since this also indented the heading elements, set a negative margin on the heading elements to compensate.
• Put the dates into a class that I called date, ( example: <span class="date"> 1975 - present</span>) and used float:right to display the dates on the right-hand side.

To repeat, you can style your resume however you like; this list just gives a few ideas. Feel free to search the internet for specifics of CSS styling tricks; just please cite sources in a comment at the top of the CSS or HTML. Keep it simple at first, and make sure you understand exactly which elements of the HTML you have selected with each new rule. A good trick is to set the selected element to a particular color (color:red;) while debugging so that you can see that the rule applies to what you think it does.