So next up we're gonna talk about type selectors. 0:00 A type selector is what we use to select an element type on the page. 0:04 They're also called element selectors, 0:08 because we only use the element's HTML tag as the selector. 0:10 So these are the selectors we used in the previous stage. 0:15 When we styled the body element, the header, and the H1 element. 0:18 So for example, to target every paragraph element 0:22 in our HTML file, we need to use the p element as our selector. 0:28 So let's type p, followed by a set of curly braces, and 0:33 as our first declaration, we will write the color property. 0:38 And make the value white, and 0:43 below that we're going to type background, dash color. 0:45 And the value is going to be light blue. 0:49 So if we save our style sheet and refresh our preview, 0:54 we can see how the selector targets every paragraph on the page. 0:59 And applies the styles we defined. 1:03 And like we did in the previous stage, 1:07 if we want to target the header element and change its background color, 1:09 well we can target the header element by writing header as our selector. 1:15 So, let's make the header's background orange, 1:23 by writing background color: orange. 1:28 And when we save our style sheet and take a look at our page, once we refresh, 1:32 there's our orange background color in our header. 1:37 So, notice the pattern here. 1:39 Each set of tags represents an element on the page. 1:41 And we're able to use any of the HTML tags as selectors in our CSS. 1:46 Type selectors are good for describing what elements look like by default. 1:53 So let's start using type selectors to begin defining the default styling for 1:57 how some our elements will appear in our Lake Tahoe website. 2:02 So in our stop sheet, I'm going to remove the paragraph rule we just wrote. 2:07 This was just an example, but 2:11 we'll keep the header rule with the orange background color. 2:13 So next, to select and add style to the H1 on our page, write below the header rule. 2:18 We'll type H1, followed by the curly braces. 2:26 Then, we're going to write a font size property, and set the value to ninety 2:30 pixels, and below that, we'll add a color property and set the value to white. 2:37 Then below our H1 rule, 2:44 we'll use another type selector to target the H2 elements on the page. 2:47 So we'll type H 2 followed by the declaration block, 2:52 and let's use a font size property, and we're going to set the value to 53 pixels. 2:59 And right below our H2 rule, let's also target the H3 headings on the page. 3:07 So, we'll type H3, then inside the curly braces, 3:13 we're going to use a font size property. 3:18 This time the value will be 20 pixels, and let's add a color property. 3:22 And we're gonna use what's called a hexadecimal value. 3:28 To make our H3's color a lighter shade of black. 3:31 So we're gonna type, #48525c, followed by the semicolon. 3:35 Finally, let's also target the body of our page. 3:45 So let's add that right above the header. 3:49 So we're gonna type body, followed by the declaration block. 3:52 Then we're gonna add a color property. 3:58 And we're gonna use another hexadecimal value, 4:00 to make the body color a gray color value. 4:03 So let's type #878787. 4:07 And we'll close that off with a semicolon. 4:12 And we're going to add one more property. 4:14 This time we're going to type margin, and we're going to set the value to zero. 4:16 So notice how we're writing these type selectors in the order they 4:22 appear in the HTMLl document. 4:27 So the body is first, then the header, H1, H2 and H3. 4:29 Now this is just a matter of preference, to keep things nicely grouped and 4:32 organized in reference to our HTML document. 4:39 So right now if the CSS rules were in any order things would 4:42 still work the same way. 4:46 So let's go ahead and 4:47 save our style sheet, and we'll go back to our work space preview. 4:48 And refresh the page, and as we can see,the body, header and 4:52 heading type selectors we just wrote, match their respective elements on 4:57 the page, and they're now styled with those properties we defined. 5:02 And you'll notice that white space around the header is no longer there. 5:05 Well that's because we set the body element's margin property to zero. 5:11 Okay, so our page is starting to take shape with these bay CSS styles. 5:17 Up next we'll see how we're able to make our selectors more specific with ID'S. 5:22