WDV 205 - Advanced CSS

Assignment 1-3 Specificity Example Web Page

For the rest of the page beginning in the next paragraph, the text will be in paragraph elements. To show specificity, the paragraphs will be styled differently.

This is a regular paragraph. All the paragraph elements have a pseudo element for the first line, making them larger and keeping the color black.

This paragraph is in within div tags, so the spacing and the color get overriden. Paragraphs with div tags also get a pseudo element to style the first letter.

This paragraph has its own class, so its color, size, and spacing is set different from the paragraph above.

This paragraph is within div tags and has a class. It gets the first letter changed because it's in div tags, but the rest of its styling it gets from the class.

This paragraph has two classes. The first is a generic class, the second one specific for p elements. The second one didn't override the first until I listed the second class before the first in the p tag.

This paragraph has an ID, so the color, size, and spacing are made unique for this paragraph.

This paragraph has an ID and a class. It gets its size and spacing from the ID, and it gets its font color from the class.