CSS Exercise

Objectives

At the end of this project, you will be able to:

  • Create an Embedded style sheet in an XHTML document.
  • Apply CSS styling to specific page elements.
  • Format text on a page for font, weight, size, color, and alignment.
  • Place images and create a bulleted list.

Requirements

  1. Folder called “lastname_firstname_Gordo”
  2. HTML document called “gordo.html”
  3. Directory structure
  4. Embedded Style Sheet

Instructions

  1. Create a HTML document with the files provided.
  2. Name the file gordo.html.
  3. Place the information from the gordo_text.doc into your HTML document.
    Place elements needed into the document.
  4. Create an Embedded style sheet within your document.
  5. Give the page a background color of gray and width of 500px.
  6. Place a default of the font Georgia, serif and color black.
  7. Default size of fonts will be 14px.
  8. Place the image “famous_primate.png” at the top of the page.
    The image width is 500px and the height is 176px.
  9. The heading “Gordo” is 30px in size, centered and color light blue.
  10. The headings “Old Reliable”  and “The Mission” are 18px in size and color light blue.
  11. The paragraph format is justified with a line height of 1.5em.
  12. In the first paragraph emphasize “one of the first monkeys” and make “Albert” important in the color white.
  13. Place the image called “gordo.jpg” after the first two paragraphs. The description of the image is “One of the first monkeys to make it into space.” The image width is 500px and the height is 350px.
  14. Change “IRBM” to white an placed in the meaning in the code: Intermediate Range Ballistic Missile.
  15. The headings “The Jupiter AM-13” and  “The Journey” are 16px in size and color light blue.
  16. All sub-headings are centered and the font is styled with Arial.
  17. Put “Flight Date and Launch Time” an unordered list.
  18. Put “Flight Time and Apogee” an unordered list.
  19. Place horizontal line before “References“.
  20. The heading “References” is 12px in size and color light blue. All letters are capitalized with letter-spacing  of 0.4em.
  21. Put info under reference in a numbered list.
  22. Place files and folder into a folder: lastname_firstname_gordo.

This is due at the end of class (Friday October 7, 2016).
Share folder link to Google Classroom > CSS Exercise.

Ask assistance if you are not sure about a specific task.


Files to Download
Gordo text

Primate Logo

Gordo image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s