A3 – Intermediate CSS


Objectives: Gain experience using intermediate CSS.

Description: In this assignment you will create a web page using various standard HTML tags and CSS.


Style an HTML Page

Use Notepad++ to create an html page that will serve as an advertising page for the Informatics and CS department.

First save the file locally and then upload it to the server. classweb.cob.isu.edu) using these directions.

Useful Downloads

Here are some useful downloads:

Visual Guidance

  • Your web page should be arranged like the figure.
  • Your web page should look as closely as possible as the demo page.

HTML Details

Be sure that your overview page includes the following tags:

  • Level-one heading for title.
  • Logo image.
  • Thick horizontal rule before first sub-heading.
  • Level-two heading for Overview sub-heading.
  • Two paragraphs for Overview text.
  • Level-two heading for Business Informatics sub-heading.
  • One paragraph for Business Informatics text.
  • Level-two heading for Health Informatics sub-heading.
  • One paragraph for Health Informatics text.
  • Level-two heading for Computer Science sub-heading.
  • One paragraph for Computer Science text.
  • Level-two heading for Class Environment sub-heading.
  • Two paragraphs for Class Environment text.
  • Thick horizontal rule before next section.
  • Level-two heading for Shared Courses sub-heading.
  • Image showing shared courses diagram.
  • Two paragraphs for Shared Courses text.
  • Level-three heading for Advantages of a CS degree from ISU sub-heading.
  • Two paragraphs for Advantages of a CS degrees text.
  • Normal horizontal rule before next section.
  • Level-two heading for New Professors sub-heading.
  • One paragraph for New Professors text.
  • Unordered List listing all new professors.
  • Normal horizontal rule before next section.
  • One paragraph for closing text.
  • Normal horizontal rule at end of page.

CSS Details

Create an external style sheet to make your page resemble the demo.

  • 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.
  • In order to achieve liquid layouts, this assignment will make use of percentages and viewport units. If you skipped the class in which viewports were discussed, refer back to the CSS Basics notes.

Be sure to do the following (preferably in this order):

  • Provide a universal selector:
    • Specify a font family list with Arial, Helvetica, sans-serif.
    • Specify a font size of 1.3 vw units.
  • Include a selector for the body element:
    • Specify a width of 85 percent.
    • Specify a left margin of 7 percent.
  • Include an element selector for h1.
    • Specify #D97700 for color.
    • Specify Baumans, cursive; as the font family. This link tells you how.
    • Specify a font size of 4.5vw.
    • Specify a property-value pair that adds a dark gray (#333) shadow a little to the right (0.15vw) and down (0.15vw) relative to the normal text.
    • Specify a display property set to inline, because you want the heading displayed on the same line as the image.
  • Include an element selector for h2.
    • Specify a font-size of 1.5vw.
  • Include an element selector for h3.
    • Set the color to brown.
    • Set the font size to 1.3vw.
    • Set the font to italic.
  • Include an element selector for hr.
    • Set the color to coral.
    • Set the top margin to 0.5vh.
    • Set the bottom margin to 0.5vh.
  • Include an id selector called "logo" for the logo image.
    • Specify a right float.
    • Specify a width of 30 percent.
    • Specify a height set to auto, so it remains proportional.
    • Specify a display property set to inline, because you want the logo displayed on the same line as the main heading.
  • Include a combined class and element selector for the shared courses image with the class name "sharedCourses".
    • Specify a right float.
    • Specify a width of 20 percent.
    • Specify a height set to auto, so it remains proportional.
    • Set the left margin to 1em.
  • Include a combined class and element selector for an h2 heading that will allow the image to appear on the same line, with the class name "sameLine".
    • Specify a display property set to inline, because you want the h2 displayed on the same line as the logo. If you omit this, the property defaults to "block", which will force the image to the next line.
  • Include a combined class and element selector for an extra thick hr with the class name "thick".
    • Specify a height of 0.5vh.
    • Set the color to brown.
    • Set the background color to coral.
    • Set the top margin to 4vh.
    • Set the bottom margin to 0.5vh.

Notes

  • Your lines will not break where the demo lines break. The demo screen shot was taken in Chrome, full screen, with a negative zoom. Do not use <br/> tags to force artificial breaks.
  • You may find these notes on linking CSS useful.
  • Name your file assn03.htm.

Alternative Versions

  • If you wish to express your creativity by coming up with a more visually appealing page than the demo, feel free to do so. While you must upload a version of the assignment that meets the specs so the grader can do an efficient job, I would welcome the opportunity to see how creative you can be. An alternate version would provide you with additional practice as well.

Reminder! 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.
  • 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 9, 2018
          Assignment 3
          Purpose: This web page....
     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->