[an error occurred while processing this directive] File: index.shtml Creator: George Ferguson Created: Mon Sep 10 12:26:59 2012 Time-stamp: [an error occurred while processing this directive] File: templates/doc-start.shtml Creator: George Ferguson Created: Tue Dec 6 12:31:29 2011 Time-stamp: [an error occurred while processing this directive] File: site-settings.shtml Creator: George Ferguson Created: Tue Dec 6 13:49:49 2011 Time-stamp: Site (or subsite)-wide settings. [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: head.shtml Creator: George Ferguson Created: Tue Dec 6 12:34:15 2011 Time-stamp: SSI variables for this template: head_title if given, else ``sitename | title'' [an error occurred while processing this directive] File: head-title.shtml Creator: George Ferguson Created: Tue Dec 6 14:29:52 2011 Time-stamp: SSI variables for this template: head_title: complete content of title element if given site_title trailing part of title (if given) section_title middle part of title (if given) page_title leading part of title (if given) title title shown on page, also used as leading part of title (if given) [an error occurred while processing this directive] (none) [an error occurred while processing this directive] File: head-meta.shtml Creator: George Ferguson Created: Tue Dec 6 14:29:18 2011 Time-stamp: SSI variables for this template: meta_description meta_keywords meta_generator [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: head-stylesheets.shtml Creator: George Ferguson Created: Tue Dec 6 14:22:58 2011 Time-stamp: SSI variables for this template: site_stylesheet, page_stylesheet stylesheet0, stylesheet1, ...: URL for stylesheets [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: head-scripts.shtml Creator: George Ferguson Created: Tue Dec 6 14:23:19 2011 Time-stamp: SSI variables for this template: site_script, page_script script0, script1, ...: URLs of javascript scripts [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: body-start.shtml Creator: George Ferguson Created: Tue Dec 6 13:20:46 2011 Time-stamp: SSI variables for this template: body_class page_class page_id [an error occurred while processing this directive] [an error occurred while processing this directive] File: body-header.shtml Creator: George Ferguson Created: Tue Dec 6 13:46:12 2011 Time-stamp: Content above banner, if any. [an error occurred while processing this directive] File: body-banner.shtml Creator: George Ferguson Created: Tue Dec 6 13:27:12 2011 Time-stamp: Duplicate URCS Drupal banner. hajim urcs
Computer Science @ Rochester
Computer Science Department : Hajim School of Engineering & Applied Sciences Skip to main content [an error occurred while processing this directive] File: body-title.shtml Creator: George Ferguson Created: Tue Dec 6 14:34:49 2011 Time-stamp: SSI variables for this template: section_name First line of title on page (if any) title Title shown on page

[an error occurred while processing this directive] DMS102/CSC170D: Introduction to Web Development
Spring 2013
[an error occurred while processing this directive]
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:
    • The header spans the top of the page.
    • The sidebar is on the left, taking 20% of the width of the page.
    • The articles appear in a list to the right of the sidebar, filling the rest of the page.
    • The footer spans the bottom of the page, below both the sidebar and the articles (whichever is taller).
    • Use any three colors you like for the backgrounds of the different regions.
    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;
        }
    

[an error occurred while processing this directive] File: doc-finish.shtml Creator: George Ferguson Created: Tue Dec 6 13:46:48 2011 Time-stamp: [an error occurred while processing this directive] File: body-footer.shtml Creator: George Ferguson Created: Tue Dec 6 14:43:56 2011 Time-stamp: Content at bottom of page, if any.

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

[an error occurred while processing this directive] File: body-finish.shtml Creator: George Ferguson Created: Tue Dec 6 13:47:36 2011 Time-stamp: [an error occurred while processing this directive]