header h1 - this an h1 inside the header

main section h1 - this is an h1 inside a section, inside the main tag

main div h1 - this is an h1, in a division, in the main tag

main h1 style="blue" - this is an h1 inside the main tag. It has a class of 'Blue'

main h2 style="blue" - this is an h2 inside the main tag. It has a class of 'Blue'

This is a paragraph inside the main tag.

div id="item1" - this is a division with an id = "item1". By the way id's are case sensitive and cannot include spaces.

article h1 - this is an h1 inside an article

article h2 - this is an h2 inside an article

article p - this is a paragraph inside an article

This is some text that is not included in any tag. But there are two divisions that follow this text and they both have an id. This text will be very hard to style.

Here are some rules for CSS styling

CSS = Cascading Style Sheet
Here is the syntax for a style
selector { attribute: value;}
Selectors can include

tag names - such as body h1 h2 or div
class names - such as .blue where the class="blue"
ID names - such as #item1 where the id="item1"

You can use a compound selector such as
header h1 {color: black;}
This picks the h1's that are inside the header
You can select several different tags at the same time
h1,h2,h3 {color: black;}
This sets all the h1, h2, and h3's to black
If you have an element with no content and no width or height, it is not displayed