So next up we're gonna talk about type selectors.

A type selector is what we use to select an element type on the page.

They're also called element selectors,

because we only use the element's HTML tag as the selector.

So these are the selectors we used in the previous stage.

When we styled the body element, the header, and the H1 element.

So for example, to target every paragraph element

in our HTML file, we need to use the p element as our selector.

So let's type p, followed by a set of curly braces, and

as our first declaration, we will write the color property.

And make the value white, and

below that we're going to type background, dash color.

And the value is going to be light blue.

So if we save our style sheet and refresh our preview,

we can see how the selector targets every paragraph on the page.

And applies the styles we defined.

And like we did in the previous stage,

if we want to target the header element and change its background color,

well we can target the header element by writing header as our selector.

So, let's make the header's background orange,

by writing background color: orange.

And when we save our style sheet and take a look at our page, once we refresh,

there's our orange background color in our header.

So, notice the pattern here.

Each set of tags represents an element on the page.

And we're able to use any of the HTML tags as selectors in our CSS.

Type selectors are good for describing what elements look like by default.

So let's start using type selectors to begin defining the default styling for

how some our elements will appear in our Lake Tahoe website.

So in our stop sheet, I'm going to remove the paragraph rule we just wrote.

This was just an example, but

we'll keep the header rule with the orange background color.

So next, to select and add style to the H1 on our page, write below the header rule.

We'll type H1, followed by the curly braces.

Then, we're going to write a font size property, and set the value to ninety

pixels, and below that, we'll add a color property and set the value to white.

Then below our H1 rule,

we'll use another type selector to target the H2 elements on the page.

So we'll type H 2 followed by the declaration block,

and let's use a font size property, and we're going to set the value to 53 pixels.

And right below our H2 rule, let's also target the H3 headings on the page.

So, we'll type H3, then inside the curly braces,

we're going to use a font size property.

This time the value will be 20 pixels, and let's add a color property.

And we're gonna use what's called a hexadecimal value.

To make our H3's color a lighter shade of black.

So we're gonna type, #48525c, followed by the semicolon.

Finally, let's also target the body of our page.

So let's add that right above the header.

So we're gonna type body, followed by the declaration block.

Then we're gonna add a color property.

And we're gonna use another hexadecimal value,

to make the body color a gray color value.

So let's type #878787.

And we'll close that off with a semicolon.

And we're going to add one more property.

This time we're going to type margin, and we're going to set the value to zero.

So notice how we're writing these type selectors in the order they

appear in the HTMLl document.

So the body is first, then the header, H1, H2 and H3.

Now this is just a matter of preference, to keep things nicely grouped and

organized in reference to our HTML document.

So right now if the CSS rules were in any order things would

still work the same way.

So let's go ahead and

save our style sheet, and we'll go back to our work space preview.

And refresh the page, and as we can see,the body, header and

heading type selectors we just wrote, match their respective elements on

the page, and they're now styled with those properties we defined.

And you'll notice that white space around the header is no longer there.

Well that's because we set the body element's margin property to zero.

Okay, so our page is starting to take shape with these bay CSS styles.

Up next we'll see how we're able to make our selectors more specific with ID'S.