We've learned about applying styles to items on our web page.

So far, we only know how to style a specific tag-group.

For example....

h3 {background-color: pink; color: blue;} applies to ALL the h3 headlines

body {background-color: cyan;} applies to EVERYTHING that is to be displayed.

HOWEVER, if we have an h3 in our body, its background-color will be pink since a MORE SPECIFIC selector overrides the general body specifications.

#############################################

Using the details from above, if we have multiple h3 headers, they will ALL have a pink background-color.

HOW TO GIVE DIFFERENT STYLES TO THE SAME tag -types??? class and id!!!!

A tag is like a label.

Consider, "The Jordan Community" is a top-level label. "Staff","Students" are lower-level or children labels.

We can further specify students with "class" selectors, "Juniors", or "AP Biology".

We can identify individual students with an "id", A name (though we could have two with the same name) or an id number.

In HTML, <body> is the top-level tag while <p>, <h2> are children.

Consider...https://trinket.io/html/b88df14659

Now, in Trinket create an HTML file.

In the body section, create 6 paragraphs. Just have the context of paragraph one, paragraph two, etc.

Now try making the background color of paragraphs 2,3,5 red, 1 blue, and 4 and 6 green. Use as few entries in the style as possible.

Paragraph Colors