Frontend Web Development
Assignment for Week 2
- Follow the steps in Assignment 1 (or use your work from last week).
- Duplicate the
<p> element three times. There should be four <p> elements neighboring each other. You can keep the contents of the original <p> or change it around, but keep the <a> element inside them.
- Add a
class attribute to the first and third <p> tag, with the value style_one.
- Add a
class attribute to the second <p> tag, with the value style_two.
- Add a
class attribute to the fourth <p> tag, with the value style_one style_two.
- Add a
class attribute to the third <a> tag within the <p> element, with the value style_two.
- In your CSS file, add a declaration that sets the
color to green for elements with class style_one.
- Add a declaration that sets the
color to red for elements with a class of style_two.
- Add a declaration that sets the
color to yellow for elements with a class of style_two that are inside elements with a class of style_one.
- Add a declaration that sets the
color to blue for elements that have both classes style_one and style_two.
- When you're done...
- The first paragraph should be green
- The second paragraph should be red
- The third paragraph should be green with a yellow link
- The fourth paragraph should be blue
Extra credit:
- Create a new declaration that selects elements that have a
class of style_one, or elements that have a class of both style_one and style_two. Add a rule that sets their display to inline. If done properly, paragraphs three and four should appear on the same line, right next to each other.
- Add rules to your declaration for elements with a
class of style_two that sets their margin-bottom to 5em, their background to grey, and their padding to 20px.
Solution