CSS Questions (main.css)

1. Start with body tag. Use color #404040 as the background color of your body tag.
2. The elements header, article and footer are nested inside div element. So div is the main tag nesting everything else.
3. Use only 80% of the width of the screen for div element by using width property.
4. Use background color "white" and margin 10% for div element by using background-color and margin properties respectively
5. You can decide how much height you need for div element by using height property.
6. Use 1200px as the height of div element.
7. You can also decide how much height you need for each section nested inside div element.
8. Use 300px, 700px and 200px (notice that 300 + 700 + 200 = 1200px) as the height of header, article and footerelements.
9. To illustrate the height sizes of different sections, add the following properties to the header and article elements.
   • border-bottom-width: 5px;
   • border-bottom-style: solid;
   • border-bottom-color: hotpink;
10. Also, add text-align property with a value "center" to header and footer elements
11. Now, if you do the following tasks, you are able to make exactly an html copy of the above image:
    1. Make the length of pink lines smaller.
    2. Add some space above the "CS 103: Introduction to Web Programming".
    3. Add shadow to the div element.
    4. Make the edges of div element round.
    5. Rotate the div element by 7 degrees clockwise.
    6. Rotate the other elements by 7 degrees counter-clockwise.

HTML code that's used for the css below

CS 103: Introduction to Web Programming

How to Creat a Cool One Column Layout Web Page

Follow the instruction to create a copy of this page:

1. You need to use the elements that are used in the html page as selectors.
2. Start with body tag. 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. Use only 80% of the width of the screen for div element by using width property.
5. Use background color "white" and margin 10% for div element by using background-color and margin properties respectively
6. You can decide how much height you need for div element by using height property.
7. Use 1200px as the height of div element.
8. You can also decide how much height you need for each section nested inside div element.
9. Use 300px, 700px and 200px (notice that 300 + 700 + 200 = 1200px) as the height of header, article and footer elements.
10. To illustrate the height sizes of different sections, add the following properties to the header and article elements.
    • border-bottom-width: 5px;
    • border-bottom-style: solid;
    • border-bottom-color: hotpink;
11. Also, add text-align property with a value "center" to header and footer elements
12. Now, if you do the following tasks, you are able to make exactly a copy of the style of this page:
    1. Make the length of pink lines smaller.
    2. Add some space above the "CS 103: Introduction to Web Programming".
    3. Add shadow to the div element.
    4. Make the edges of div element round.
    5. Rotate the div element by 7 degrees clockwise.
    6. Rotate the other elements by 7 degrees counter-clockwise.

Your_Full_Name © 2018