Intro to Selectors

[MUSIC] 0:00 So now we're gonna learn the different ways we can define a CSS selector. 0:04 Selectors can be defined based on an element's type, its class or 0:08 ID attribute, even how we interact with the element, and more. 0:12 But before we get into how CSS selectors work, 0:16 let's first talk about what makes up a CSS rule. 0:19 CSS rules or rule sets tell browsers how to render HTML elements. 0:22 A CSS rule is made up of two main parts, 0:28 the selector followed by the declaration block. 0:30 [SOUND] The selector is the part of the CSS rule that targets HTML elements. 0:33 It's what actually lets us select the content we want to style. 0:39 Now, after the selector comes the declaration block, 0:43 which begins with a left curly brace and ends with a right curly brace. 0:47 And inside those curly braces is where we write the declarations that 0:51 style the element we're selecting. 0:55 Each declaration consists of a property name and a value, separated by a colon. 0:58 The property is what indicates the part of the element we want to change, and 1:03 the value describes how it's changed. 1:08 As you'll learn throughout this course, we can write as many declarations as we want, 1:11 as long as we separate each one with a semicolon. 1:15 Now that we're familiar with the syntax of a CSS rule, 1:19 let's get started with basic type selectors. 1:22 Then we'll get more specific as we go. 1:25 Selectors are one of the most important and powerful parts of CSS. 1:28 We can think of selectors as patterns that allow us to target HTML elements and 1:32 apply styles to them. 1:38 When we define a selector in our style sheet, we're instructing the browser to 1:39 match every instance of that selector in the HTML. 1:43 And we've actually already written a few CSS selectors in 1:47 the previous stage when we added CSS to our page. 1:51 So, in our latest workspace, we have our style sheet ready to go, and 1:55 it's already linked to our HTML file, 2:00 which now contains the rest of the content we'll need in our Lake Tahoe website. 2:03 And as we can see in the workspace preview, 2:09 the page is once again completely unstyled. 2:12 So let's go back to our workspace, open up our style.css file, and 2:15 let's start writing some styles with CSS selectors. 2:20 So the very first selector we'll cover is called the universal selector. 2:24 And it's called a universal selector because it selects every element on 2:29 the page at once and applies the styles we set. 2:33 So it's a very powerful selector because it overrides all other selectors, 2:37 as we'll soon find out. 2:41 So to create a universal selector, we use an asterisk as our selector, 2:43 followed by the declaration block. 2:48 So we'll write our set of curly braces, and inside these curly braces is 2:50 where we'll write the styles we'd like to apply universally to our page. 2:56 Again, don't worry if you're not familiar with the CSS properties and 3:01 values we're about to write. 3:05 For now, we'll only need to understand how CSS selectors work. 3:07 And let's start using these new terms we just learned. 3:11 So, this is our CSS rule. 3:14 Here we have our selector. 3:17 Followed by the declaration block. 3:19 So let's write our first declaration. 3:22 We're going to use the margin property. 3:25 So we're going to type margin, colon, space, and 3:28 we're going to set the value to 0. 3:32 So after the semicolon, I'm going to hit Enter. 3:35 And below the margin declaration we wrote, we're going to write a new declaration. 3:38 This time we're going to type padding and we're gonna set the value to 0. 3:42 And below that, 3:48 we're going to write a color property, and this time the value will be red. 3:49 So this universal selector we just wrote 3:55 will apply these styles to every element in our project. 3:58 So let's take a look. 4:02 I'm going to save our style sheet. 4:04 Then in the workspace preview, once we refresh the browser, we can see how 4:07 setting margin and padding to 0 told the browser to remove all margins and padding 4:11 from every element on the page, then change their color from black to red. 4:18 So now all the padding and 4:23 margins in the browser's default user agent style sheet are now gone. 4:24 So because the universal selector is a very powerful selector, 4:30 we'll need to be careful with how we use it. 4:34 For now, we'll go ahead and 4:37 remove the universal selector rule from our style sheet. 4:39 But in later lessons we'll go over the ways this selector can be useful. 4:43 [BLANK_AUDIO] 4:47