Hello, in this CSS Crash Course video, we're going to look at selectors, properties and values. So a selector allows you to select a element or element. So this will be a selector right here. So we are selecting every div element, the property will be this part here, the part before the colon. So the background color. So this is what we're affecting of that element of this move on do that, and anything to the right of the colon is the value that you're applying.

You don't put anything like in equals my think you can program before you just put equals and this will tie back down, click on the yellow and have all agreed that makes sense what CSS is you assigned by using CSS by doing the keyword using the keyword yellow, not using the keyword yellow, but pointing something to the right So that's well selected properties and values. But we're going to expand this tutorial a bit further and talk about the different units as well there's pixel, em the point percentages. pika units almost sound like people true centimeters, millimeters inches, there are some other ones as well, but those are probably the main ones that you will be dealing with. So first of all, what I'm going to do is get rid of all of this when get rid of this style tag. And what I'm going to do is create a few div.

So div div, and inside here I'm going to put source and I'm going to put the art which is a new line. So what I'm going to do is copy and paste this a few times, I think on the device eight times. So to 3458 Now let's get rid of that. Let's just change this to M changes two points, change these two percentages. Chain this to peakers chain this to send to me to send two meters, chain this two milli meters and the final one two inches and cheers and now let's actually just review this refresh. So actually, technically it is there so forward to just try and select it is there is just by default, the text color black.

So let's go into our index file. Change the collection what what we'll be covering today Colors a lot more in a separate video. So just take this with a grain of salt and just take for granted. And we'll explain it a bit more later on. Save that pretty fresh, and now we can actually see it. The next thing we're going to do is do some inline styling.

We did say in the previous video that do not use inline styling, pausing testing, and that essentially what we're doing, usually you would not use it but once you've learned all the core aspects of CSS, you'll be able to do proper styling in a separate file. So what we're going to do is dive your ecourse actually going to copy and paste this. Okay, I could just do it quicker than that. What I could do is do Command F. div. Find or do us a quick way of doing it. That get rid of This whitespace and our order.

So the next thing I'm going to show you is font size. So we're setting the size of the font. Again, we'll be covering all of this in a separate video in terms of the properties, but we're just going to show you the different units that you can use for this is pixel unit. So this affects the height of our text. I'm gonna put one pixel. The next one I'm going to show you is I'm actually going to copy and paste this copy and paste that to hear to hear.

There's a lot of places to copy and paste here. And now what I'm gonna do is do change this to be m I'll explain all these units in a moment. points to Pete. centage is can you guess it's not PC, it is just the percent symbol peakers to PC not PvP see the centimeter value to see. millimeter to Mmm, inches to I am. Save that.

Let's go back to a web browser refresh a mobile app. What's happened, some looks good, some looks small and might be trying to find a pattern because it's sort of overall is going from small to big. Simply what's happened is what we've applied. One on each of the unit inches that makes sense is one inch height. one centimeter height one millimeter height is 1%. And that percentage is relevant to the height.

So if I were to show you em is quite a bit unit. But let's go back and change the pixel to 24. So you've got 24 pixels refresh, that is a lot better. Now, let's change em. em is a, basically a cross platform universal standard. If you're doing text, preferably try and use em app as much as possible is fantastic unit.

Let's go refresh. So it's a lot bigger. Now, obviously, you can make it you can put it into decimals as well. So 2.4, for example, refresh is even bigger now. points, I'm going to put 10 points 10 points, save that. Refresh.

And two pixels isn't exactly the number of pixels on your screen because otherwise, if you were to zoom in and out, it would essentially almost stayed the same. It's relative to the browser which trust me, you will be thanking them for even if you do not know. So the next thing I'm going to show you is percentage I'm going to put 100% save that Murray fresh, so that's 100% of the height for what to put 500% so that refresh is five times the default height. And if I were to change this P per unit, I'll leave you at one PC for the centimeter naevia As for the millimeter I'm gonna change this to five seconds can see this yellow bar and now you can see that is half a centimeter and are roughly looks half the height of one centimeter. So really, that is it for selected properties, values and units.

The other thing is generally, you'll be using pixels, em and percentages for displaying on a screen that You recommended way for printing who used to have like em centimeters, millimeters inches points because and percentages you don't be using pixel for printing. If you want more information there will actually be a link in the source code of this video for check there. So it's a good way of checking out the code and checking out a nova fantastic link from the WWE schools website which has a bunch of information about different units in TSS. So that's it for this video. If you have any questions, feel free to post it on my education platform. So on online in Dakota, UK, there will be a link attached to this video which will take you to the source code page of this video and source code page of every other video in the series.

Fill out the video please close now. And as usual, thanks for watching and I hope you have a great day.