CS 103: Introduction to Web Programming

How to Design a Web Page by CSS

Make sure to check your web page (open it in a browser) after applying each CSS property.

Follow the instruction below to create a copy of this page:

  1. You need to use the elements (tags) as selectors in the css file.
  2. Start with body tag as a selector. Use color #404040 as the background color of your body tag.
  3. The elements header, article and footer are nested inside div element. So div is the main tag nesting everything else.
  4. Apply 100 pixels margin to all four sides of the div element by using margin property.
  5. Apply 50 pixels padding to all four sides of the div element by using padding property.
  6. Use background color "white" for the div element by using background-color property
  7. Add shadow to the div element by using box-shadow property
  8. Make the edges of the div element round by using border-radius property.
  9. Add text-align property with a value "center" to header and footer elements
  10. Apply the following border properties to the top and bottom of the article element.
    • border-bottom-width: 5px;
    • border-bottom-style: solid;
    • border-bottom-color: hotpink;
  11. Now, it is time to rotate everything.
    1. Rotate the div element 7 degrees clockwise by using transform property.
    2. Rotate the other elements 7 degrees counter-clockwise by using transform property.

Replace Your_Full_Name to your real full name in the footer element.