Frontend Web Development

Assignment for Week 2

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_oneandstyle_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.