p{
color:red;
font-size:30px;
}
				
			

Video Summary

All right, so we’re gonna go over the CSS three coding breakdown. This is how we’re going to be able to target and manipulate the stylings over HTML elements before we can actually get in and start playing with all the cool features that CSS has to offer. We want to understand how the code is set up so that way we can either build the code ourselves or we can manipulate the code that’s already built by the developers. Before we get in, I just want to cover what we’re looking at right here. Here’s a basic typical CSS three coding structure, and it’s really not too complicated once you understand the principles of how it’s set up. So basically, what we have here is we have the P, which is we’re targeting the paragraph for the p tag. We’re trying to change the color of that paragraph to red and we’re trying to change the font size to 30 pixels. So I’m going to go over and we’re going to break down what each little each little piece of this code is going to represent. 

Alright, so for here, the P is the HTML selector. Now you can target tags by themselves with CSS, and throughout this course and especially within the slides. I’m just keeping it simple, and I’m using basic HTML tags. But as we learned in the end of the HTML, work prior to the HTML course, is that we can target different HTML elements with classes and IDs and more times than not. This is what this is what you’re going to see. And this is what you’re going to use is the classes and IDs that are going to be able to target that specific element that you want to style. Now, if you did this within the CSS code, and you just said p basically every paragraph within your website, no matter if it’s a web page, or other, basically every single web page, the color of that paragraph would be red, and the font size would be 30. So I just want to lay that out as that distinction, because as we get in, we’re going to start targeting different classes. We’re gonna start targeting different IDs and don’t get too discouraged. It’s pretty simple once you start playing around with it. Alright, so we’re gonna move on to the style property. And that’s basically right here is the color and the font size. And the property is what we’re choosing to manipulate if you think of it that way. So basically, we’re saying this paragraph, we want to change the color, alright. And the red circle is the style value. So that’s the value is work. We’re declaring this as red. So basically, we want to say the color the property of this paragraphs is going to be a color and we want that property to be red. Alright, and each line that you see here, you know, we got the color red font size 30 pixels. This is what we call a declaration. And this is just how we can add multiple different stylings in this one selected HTML element. And we’re going to be able to have anywhere from one to 1015 20 lines of code if you want, just so you can make the element look exactly how you want to. Now I’m gonna I’m not gonna go through and reread all these. This is here. This slide is here for your benefit. So if you need to go back and look and understand what each one was without having to rewatch this video, by all means, use it as you need it. But I’m gonna go on to the actual, like more of like the coding side of things where you got the curly brackets, the colons and the semicolon. So we’re gonna go over what this means. So basically the curly brackets is as it goes through as the as the code interpreter or the compiler is going through and reading your code. Basically, what how it’s going to do or what it’s going to do is saying, Alright, we’re going to style the paragraph tag, and these curly brackets are open. We have an open mourn and a closed one. And basically what that does is to say everything in between here is going to be styled exactly how we want it for this for the paragraph, right.