Selectors

[00:00:00]
>> So CSS is a rule-based language. We define these rules by creating different styles that should be applied to a certain element or a group of elements. So for example, if we want to select all heading level ones on our page, we can do that with the following code.

[00:00:16]
So we select all h1 headers with the h1 element selector. So the selector is followed by a set of curly brackets, and inside these curly brackets, we're gonna write our style rules. So we call these declarations. So a declaration is a pair that contains a property, in this case, color, and a value, in this case, red.

[00:00:37]
If we break down this into the terminology, right, we've got the selector, which is h1, and the declaration block again is the curly brackets. The declaration is the color red, that key-value property pair. And again, color is a type of property and red is the value for that property.

[00:00:59]
So what we just saw is known as a type selector. It's gonna select all elements of type heading 1. Class selectors allow us to assign styles to elements that contain a specific class or a set of classes. So this class selector is noted with a dot followed by the class name, and it's used to style multiple elements that have that class name.

[00:01:18]
So here we're styling all elements that have a class of title and we're changing that color to red. In this case, it's just the heading one. We also have ID selectors. So ID selectors allow you to assign styles to one element containing a specific ID. So it's noted with a hash symbol and it's followed by the ID name.

[00:01:36]
And again, use the style one element with that ID name. So instead of the class of title on our heading level one, we've got an ID of title setting that color to red. There is also a universal selector, and this is noted with an asterisk and it matches any element.

[00:01:56]
So to make every single element red, we could write asterisk and then in the curly brackets color red. So we can also combine selectors to be more specific about which element or elements we want to select. So what elements are gonna be selected here? Does anyone wanna put that into an English sentence?

[00:02:17]
>> Paragraph within the body, all the paragraphs.
>> All the paragraphs within a body element. Yeah, that's pretty true. The caveat is all paragraphs within an element containing the body class. So it might not be the body element if you put that class on a div for example, right?

[00:02:35]
But yeah, it is gonna change that color to blue. How about this one?
>> It would color all the paragraph elements with an ID blue inside of a tag with a class element body.
>> Yes, exactly right. So the paragraph with an ID of blue, that's living inside of an element containing a class of body, exactly.