Introduction to CSS Selectors and CSS Properties. Before I start the coding portion of this video, I wanted to add a disclaimer, I'm on the MDM website. And as I scroll, you can see that there are many CSS properties available. The scope of this course is to cover the basics of CSS selectors and some introductory CSS properties. It would take days of content to cover all the available CSS properties. So, relying on documentation is essential. I'm gonna give a quick tour of the IDE setup before I begin.

On the left, I have an HTML page and this page contains a div that has three paragraphs. The first paragraph has an ID of main paragraph. The second paragraph has a class of info paragraph and the last paragraph has no attributes. There is a CSS panel, which I'm gonna enter in CSS and the output panel, which mimics the browser and will render any changes as they happen. Now, to begin, I'm gonna select all the paragraphs on the page.

In the CSS panel, I will type P for paragraph. When dealing with tag selectors, you only need to write the tag name. It will select all of the elements of that same tag name and apply the CSS given. In this case, I wish to increase the font size of the paragraph. So, inside of the curly brackets, I will type, font-size: 26px, px is short for pixels and then terminate this with a semicolon. And to the right, all the paragraphs are of a larger font size.

Next, I like to select all the paragraphs inside of any div and this may seem redundant but I'm demonstrating the use case here. I will begin by typing, div > p. The greater than sign is a selector that is used to select a element within a specific parent. What I'm stating with the selector is that I wanna target every paragraph that's inside of every div. If there are any paragraphs that are outside of any div, this CSS will not target them. And what I'm gonna do here is give every paragraph a font color of teal, color: so the color property sets the font color. And I will give it a value of teal and there are many options to designate a color.

I can use name of the color, if the browser supports it. Hex or RGB values, plus others. And to the right, you can see that every paragraph is teal. Now, what I like to do is target the paragraph with the ID of main-paragraph. So, I will begin by typing, paragraph, and ID selectors always begin with the pound symbol or hashtag, however you call it, main-paragraph, and I'm gonna give it a font-weight of bold. And now to the right, the main paragraph is bold.

Now, because this is an ID, there's something I'd like to point out. IDs are meant to be unique. And because they're unique, they're only used once on the page. I can remove the paragraph tag from the CSS selector, and this will still work. So, how would this work with a class? I'm gonna do same as before but with the info paragraph class. P and class selectors always begin with the dot period. So, .info-paragraph. And I'm gonna give this a CSS property, a font size with a value of 16 pixels. And to the right, the info paragraph font size is smaller than the other paragraphs.

You may be wondering why this is working when earlier in the CSS page, I had set the font size to all the paragraphs to be 26 pixels. There's a precedent system based on the selector type. A class selector has more specificity than an element selector, thus will have precedence over it. Unlike IDs, classes do not have to be unique. Classes can be placed repeatedly, all over the page, on different and multiple elements. I'm gonna create an h1 element, with the text content of this is the h1. And I'm gonna give it the class of info paragraph. And even though it has this class, the font size is not 16 pixels. And now I'm gonna remove the paragraph from the CSS selector.

As a result of doing this, every element with the class all have the font size of 16 pixels, including the h1 on the screen. When the class CSS selector is not attached to an element, I'm stating that any element with this class will have a font size of 16 pixels. By leaving the element on the CSS selector, I'm stating that only the paragraphs with this class will get the CSS property.

Now, there is another approach that will lead to the same result. I'm gonna place the paragraph back on the selector and I'm gonna remove the class from the h1 element. Now, CSS has an option to use multiple selectors to apply the same CSS. I simply need to separate 'em with a comma. So, after the info-paragraph class, I'm gonna add a comma and I'm gonna add the h1 element. And once again, both the paragraph and the h1 are the same font size, 16. And if I wanted to add another selector, I simply need to add another comma. And I'm gonna go ahead and remove the extra comma.

Now, for the next demonstration, I want all the paragraphs to have the smaller 16 pixel font size. So, I'm gonna remove the info paragraph class to apply this font size to all paragraphs and h1 elements. Next, I'm gonna give the div that contains all the text elements, a black background. I'm gonna type, div, and use the CSS property of background-color. And I will give it a value of black. I'm gonna make the CSS panel a little wider. Now, there is one problem. The h1 text isn't viewable because it is also black. I'm gonna go up to the div greater than paragraph CSS selector and add a comma and type h1. And now the h1 element is teal. I'm doing this to demonstrate that you can mix and match multiple CSS selectors for targeting purposes.

Now, I'm gonna change the div's background color by deleting the CSS property value and the word color and replace it with the word image. The background image value begins with the word, url, then parentheses then quotes. And in between the quotes will be the URL of the background image, which I'm just going to paste in. And to the right is the background image for the div. And this is the typical approach whenever wanting to add a background image to an element. And that's it. Thanks for watching at Cloud Academy.