hajim urcs
Computer Science @ Rochester

DMS102/CSC170D: Introduction to Web Development
Spring 2013

Assignment 2: CSS

  1. [5 pts] Create a document with a toplevel heading and three paragraphs, each preceded by a second-level heading. Use a style sheet in the head of the document to achieve the following presentation:
    1. The toplevel heading should be red and centered
    2. The second-level headings should have a green border around them
    3. The first paragaph should be underlined
    4. The second paragraph should have blue text on a yellow background
    5. The third paragraph should be indented half an inch on both sides (i.e., half inch left and right margins)
  2. [2 pts] Do the same thing using a separate (linked) stylesheet. Hint: Think before typing (much).
  3. [5 pts] Create a document with single paragraph of text inside a div element. Use a stylesheet in the head of the document to achieve the following presentation:
    1. The outer div should be 500 pixels wide with a green border
    2. The paragraph should have:
      1. A blue background
      2. A margin of 10 pixels on the top and bottom, and 20 pixels on the left and right
      3. A 3 pixel dashed red border
      4. 2 ems of padding on all sides
  4. [4 pts] Create a document with some nested lists (ordered and unordered). Use a stylesheet in the head of the document to achieve the following presentation:
    1. List items of ordered lists should be red.
    2. List items of unordered lists should be green.
    3. List items of nested lists should be black.
    4. Emphasized text in unordered lists only should be underlined.
  5. [4 pts] Create a document that contains a paragraph of text and an image inline with the text. Use a stylesheet in the head of the document to have the image float to the top right corner and the text flow around it on the left and underneath (use a small image and enough text to make the flow clear).
  6. [5 pts] Visit the following page:
    	http://www.cs.rochester.edu/courses/170d/spring2013/assignments/2/blog.html
        
    It's a blog, but it's pretty ugly. Save the page source so you can work with it. You'll see that the page references a style sheet named blog.css. Create that stylesheet to achieve the following presentation:
    In words: Avoid absolute or relative positioning. You don't need them for this. Your page should behave properly when the window is resized.

    Submit the stylesheet and the page source (which you shouldn't have to change).

    Hint: The positioning can be done with as few as five CSS settings, and then another three for the colors. Older browsers that aren't keen on HTML5 may need the following also:

        header, nav, footer, article {
            display: block;
        }
    

Last update: Wednesday, 30-Jan-2013 14:54:20 EST