[MUSIC]

So now we're gonna learn the different ways we can define a CSS selector.

Selectors can be defined based on an element's type, its class or

ID attribute, even how we interact with the element, and more.

But before we get into how CSS selectors work,

let's first talk about what makes up a CSS rule.

CSS rules or rule sets tell browsers how to render HTML elements.

A CSS rule is made up of two main parts,

the selector followed by the declaration block.

[SOUND] The selector is the part of the CSS rule that targets HTML elements.

It's what actually lets us select the content we want to style.

Now, after the selector comes the declaration block,

which begins with a left curly brace and ends with a right curly brace.

And inside those curly braces is where we write the declarations that

style the element we're selecting.

Each declaration consists of a property name and a value, separated by a colon.

The property is what indicates the part of the element we want to change, and

the value describes how it's changed.

As you'll learn throughout this course, we can write as many declarations as we want,

as long as we separate each one with a semicolon.

Now that we're familiar with the syntax of a CSS rule,

let's get started with basic type selectors.

Then we'll get more specific as we go.

Selectors are one of the most important and powerful parts of CSS.

We can think of selectors as patterns that allow us to target HTML elements and

apply styles to them.

When we define a selector in our style sheet, we're instructing the browser to

match every instance of that selector in the HTML.

And we've actually already written a few CSS selectors in

the previous stage when we added CSS to our page.

So, in our latest workspace, we have our style sheet ready to go, and

it's already linked to our HTML file,

which now contains the rest of the content we'll need in our Lake Tahoe website.

And as we can see in the workspace preview,

the page is once again completely unstyled.

So let's go back to our workspace, open up our style.css file, and

let's start writing some styles with CSS selectors.

So the very first selector we'll cover is called the universal selector.

And it's called a universal selector because it selects every element on

the page at once and applies the styles we set.

So it's a very powerful selector because it overrides all other selectors,

as we'll soon find out.

So to create a universal selector, we use an asterisk as our selector,

followed by the declaration block.

So we'll write our set of curly braces, and inside these curly braces is

where we'll write the styles we'd like to apply universally to our page.

Again, don't worry if you're not familiar with the CSS properties and

values we're about to write.

For now, we'll only need to understand how CSS selectors work.

And let's start using these new terms we just learned.

So, this is our CSS rule.

Here we have our selector.

Followed by the declaration block.

So let's write our first declaration.

We're going to use the margin property.

So we're going to type margin, colon, space, and

we're going to set the value to 0.

So after the semicolon, I'm going to hit Enter.

And below the margin declaration we wrote, we're going to write a new declaration.

This time we're going to type padding and we're gonna set the value to 0.

And below that,

we're going to write a color property, and this time the value will be red.

So this universal selector we just wrote

will apply these styles to every element in our project.

So let's take a look.

I'm going to save our style sheet.

Then in the workspace preview, once we refresh the browser, we can see how

setting margin and padding to 0 told the browser to remove all margins and padding

from every element on the page, then change their color from black to red.

So now all the padding and

margins in the browser's default user agent style sheet are now gone.

So because the universal selector is a very powerful selector,

we'll need to be careful with how we use it.

For now, we'll go ahead and

remove the universal selector rule from our style sheet.

But in later lessons we'll go over the ways this selector can be useful.

[BLANK_AUDIO]