COM271—Task 2

CSS Styling
Given 9/18 | Due 9/20

Syllabus | Table of Pages | Assignments | References and Useful Links

Purpose In this assignment, you will create an external style sheets for your site (screen only; we will add a print style sheet soon). You will develop a page-specific style sheet for your resume page (html version completed in assignment 1).

Preparation: Complete Projects 1 and 2 in Eric Meyer on CSS ("Converting an Existing Page" and "Styling a Press Release"). Do not attempt this task until you have gone over both projects thoroughly and understood them completely.

I. Style sheet for Home Page

Develop a separate style sheet for screen media, incorporating elements from Meyer's projects 1 and 2. This would set background colors and fonts for the page, establish color, size, and fonts for paragraphs and headers (h1-h6), set padding and margins for typology and images, etc.

  1. Start by including a style element within the head tag at the top of the page. (I usually place it just before the closing head tag (</head>):

    <style rel="stylesheet" media="screen" type="text/css">
    ...selectors { attributes:values....; }
    </style>

    Include selectors for body, headings and paragraphs, links, etc., as well as any identified or classified elements within the html. Again, you are following the models of Meyer Projects 1 and 2 to develop an initial style.
  2. When you have a home page that is beginning to look a bit more stylish, follow the instructions in Project 1 (pages 47-48) and make this an external style sheet. Save it in a new folder called "css," as file "screen.css." This will be your external style sheet for all pages in the site, and you will add to it and improve it as the semester goes on. Every time you improve this page, the style rules will apply to all pages that link to this sheet.
  3. When you have saved (and loaded to the server) the site style sheet, remove all style elements and rules from your home page (index.html). Still working on the home page, add a link to the style sheet:
    <link rel="stylesheet" href="css/screen.css" media="screen" type="text/css">
  4. Save index.html.
  5. Open your html resume page (you did this in task 1, and I suggested that you save it as html_resume.html). Immediately save this file as css_style_resume.html.
    Notice that Dreamweaver will change the name on the work-area tab to the name you saved the file to. We saved this page so that any changes will not affect the original html-only resume page. We want this page to be different, with a common site and print style sheet, but also with particular styles for the resume itself. Our site is growing (we're up to 3 pages and our first external style sheet).
  6. Click on the tab of index.html to select it (or open it again if it isn't already one of the working-window tabs), and highlight the line with the link to the external style sheet. Copy this line (Menu Edit>copy, or use the keyboard short-cut CNTL–C);click on the tab to select the resume page, and paste the copied link in an appropriate place in the head section. Save this page. The new page, which we are going to refine further, now shares a style in common with all other pages in the site (at the moment, this is only the index.html page).
  7. Return to the home page and add a new link to this new CSS Styled Resume page. Below the link containing the link "HTML resume" (we did this in the first task), add a new link, "CSS Style" (keeping the link's text as short as possible) pointing to the new css-styled resume page.

    Links as Block Elements

    We learned that the link element is an inline element. Because we want the links that make up our site navigation to appear on separate lines, for now, wrap each link in a paragraph (a block element).
    <p><a href="...">HTML Resume</a></p>

  8. Open a browser and load your home page. Check that the style sheet is working. Click on the link to your CSS Styled Resume. Check that this style sheet is also working. If you need help with this, let us help you.

II. Page-specific style sheet for your resume

  1. Refine your personal resume, using CSS for all styles. Begin by following the approach from Meyer's first exercise. You have saved your html-only page, and you've just added the site screen style sheet (part 1, above). Now take the plunge with the resume-specifi parts of the page. first stripping out all tags or attributes used for layout (non-blank spaces, etc. If your resume contains legitimate tables (e.g., year, institution, and degree in a table indicating your education), you may retain these, and need to proceed accordingly in the "demolition" phase of converting your HTML layout to CSS.
  2. Develop your own page-specific style sheet, inserted in a <style> element in the page head. Your focus here should be on applying unique identifiers or shared classes to elements on the page, and then developing rules for each of these. If you realize that a particular change should apply to all pages (you want your banner header to be 42px with light blue on dark green), then add the rule to the external style sheet for all pages. If your rule applies only to this page, limit the rule-making to the sheet at the top of this page.

We will return to the resume one more time in our next task, in which we add an external print style sheet and use css positioning to replace tables for page layout