My name is Bo Cards, and I'm with Freak.

Oh, camped out work.

This is a complete CSS course or cascading style sheets.

CSS is something you used to style websites or style HTML.

So before you watch this course, you should have some familiarity with HTML.

You can learn a CML through the free HTML curriculum at free Coke camped out.

Or or you could check out the video course that a link to in the description this whole CSS course follows along with the CSS curriculum.

That freak oh, capped out.

Or so when you hear me talk about challenges or completing challenges, I'm talking about the challenges.

As far that curriculum, however, it's a standalone video, so you don't have to go through the curriculum to get value out of this course.

But if you want to, you can go through that curriculum as well.

I have the link to the freak.

Oh, camp, not orcs CSS curriculum.

In the description, uh, after you finish this course, you may want to try out some CSS projects, so I have a link to a playlist with a bunch of CSS projects.

You can do a ride in the description and then after you master CSS and HTML, it may be good to try out JavaScript.

So I have a link to a job script course.

Also in the description.

So let's get started in this challenge, we're gonna talk about in line styles.

Inline styles are where you style something right on the element that you want to effect.

So if I put my mouth on this p tag here, I can add a style to the P pack by just using style, and then we're gonna put what the style is gonna be you and we're gonna put color.

So that would just make the color of that text blue.

But for this talent, we're not going to style.

The peat ey were gonna style the h two.

So I'm going to undo that.

And now I'm going to add the style to this ace to tag, and I'm going to make the style where the color is going to be a threat just like that.

And let's open up the browser and see what that looks like.

Okay, you can see that the text The title here is red.

In the last challenge, we talked about in line styles.

That's what this is here.

Now we're gonna talk about a different way to add styles using a style block and you can see we use color red.

There are actually hundreds of CSS properties like color.

We're going to eventually get to those, but not quite yet.

I'm gonna show you the style block.

So to make a style block just at the beginning, I can add the tag style and then we just need a closing style block.

Now, I can add all my styles between these two style tags.

So let me give you an example.

If I wantto style all the paragraph tags, I can put a p and I'm gonna put curly Brace.

And inside these two curly braces, I'm gonna put color bread.

Now, this is going to style all the paragraphs every time you see a P tag like here, here and all the P tags were gonna now be read.

If we look in the browser weaken, see what that's gonna look like.

So you can see.

Look, this paragraph is read.

This paragraph is read all the P tags have now changed the text to read so for this challenge.

We're going to take out the inline style here, and I'm going to add some style to this block up here instead of styling.

P tag's running a style that h two tags and I'm going to make them all blue So I'm gonna put Color blue Now Let me open up the browser and we'll see what that looks like if I refresh and you can see the age to is now blue.

In the last challenge we learned about styling tags like this.

All 82 tags are blue.

In this challenge, we're talking about styling classes.

Classes are reusable styles that could be added to HTML elements.

So to show that you're styling a class, you would put a dot in front of it.

So I'm the changes eight h 22 dot blue text.

And if you add the stock blue text, this is only going to style elements that have a class of blue text.

So, for instance, for this paragraph I'm going to add a class and I'm going to put in blue text now.

You can see I put a period up here, but you don't put a period down here.

The period just means that the class when you're looking at your CSS your style's.

So if I open this in my browser and refresh it, we can see that this is now blue right here.

We're gonna change this up instead of making us a blue text.

It's now going to say read text and this color is going to become red.

Um, I'm not gonna need this anymore because instead of playing the class on the pictograph, I'm gonna put the class on this age to tag.

It's going to be class read text.

And then if I show that in the browser and refresh, you can see the title is red.

What's great about classes is that they allow you to use the same CSS styles on multiple HTML elements.

So friends and see how this has class read text.

I can had read texts, a class read text to any element to make it red.

And that's what we're gonna do in this challenge.

So on the first p element right here, right up here, I'm gonna add class equals read text.

And when I open up the little browser here, you'll see that the title is red and the first paragraph is red.

Just by adding the class to both elements, there are hundreds of different CSS properties.

We've only talked about color so far, but another one is font size that's pretty self explanatory.

It's going to change the font size of an element.

So, for instance, I can put font size 30 pixels, and now everything that has the red text class will also be font size 30.

So if I look in here, you can see that this paragraph is a lot bigger.

Now we're going to change the font size of paragraphs, so I'll just remove what I had here.

And I'm going to add another style.

So it right down here, it's gonna be key, and the font size is going to be 16 pixels.

Put 16 p x and now if I show the browser here, we'll see that all the paragraphs are 16 pixels that we've just increased everything to 16 pixels for the paragraphs you can set, which font in element should use by using the font family property.

Now you can use a type or style of thought like Sarah If San Sierra for mono space or you can put in the exact fund.

So in this challenge, we're gonna make all the P elements mano space.

So right here, I'm going to put font family and then mano space.

And if we just showed this in the browser and refresh, you can see now we have these this mono space font here just like that, you can import fonts from different websites.

A free library of Web funds that you can use is ghoul fonts.

They have a lot of great fonts, and that's what we're gonna do.

In this challenge, we're gonna see how to import ghoul fonts.

So if I just paste in some coat up here, this code comes directly from the ghoul Fonz website, and you can see it's the font family lobster.

So I'm just about to show you how to use that right in our code here.

So what I'm going to do is for the age to element.

I'm gonna at each to here, and I'm at a font family of lobster.

Now, that's all I really had to do for this challenge.

If I wanted to, I could add a backup font that would be used just in case the cool font didn't load like this.

I do a comma, and then I can put a generic font that's gonna be used if the specific font doesn't load.

But we're not gonna do that for this.

I'm just gonna open the browser and see if it works.

And you can see we have the lobster font right here.

There's some default fonts available in all browsers like Mono Space, Serif and San Serif.

You can see we're using the mono space font right here.

So when one fun isn't available, you can tell the browser to degrade or default toe another font like one of these default Fonz like the model Space Font, for example.

Let's say we had the Farr family in the font family.

We had held that Helvetica.

So if I add Helvetica right here, and I can actually just make a list of fonts right here, So in font family, when you have a list here first it tries the first font, but that one's unavailable.

It will go to the next font.

So when you're making a list of font family funds, you always want the last one to be a generic font.

So you know that if the browser can't get the first font or the second fine, it can always get the default fine at the end here.

So for this example for this challenge, we're gonna do that for the H two tag.

So in this age to Ted, we have lobster.

Let me delete Helvetica here, and I'm gonna make the default font mano space out right now.

If I open up the browser, you're not gonna see anything different.

You're gonna see lobster here.

But if I comment out the link to the ghoul fonts and now I'm going to refresh this and you can see it's defaulted to the mono space just like that, See?

So it couldn't find lobster, so it defaulted to the mono space font.

CSS has a property called with that controls and elements whip.

This can apply to almost any type of element, like an image or a div or paragraph, and we're going to create a style that can make a larger image.

So I'm gonna create this a larger image.

Now that's on Lee going to apply to an element with the class larger image, and I'll put with could be 500 pixels.

So if we have anything with the class larger image, it will make it larger.

So I'm going to actually add that to this image here.

I'm gonna put class equals larger image.

So if we look in the browser here, we should see that the image is very big right now for this town's we're going to make a smaller image.

So I'm just going to exit, just change this to Smaller.

And instead of 500 pixels, we're gonna make this 100 pixels, and I have to apply the smaller image class down here.

So if I opened the little browser and refresh now, it's just a tiny little count.

A cute little cat right there on our page.

CSS borders have properties like style, color and whipped.

Let me show you an example.

I'm going to actually make a change to the H to style.

Here.

I'm gonna paste in some code.

You'll see border color, red border with five pixels, border style solid.

So when I refresh the page here, you'll see this red border around the age to tag.

I'm gonna delete this for right now because for this challenge.

We're actually going to make a thick green border, so I'll just put it right up at the top for now here.

And I am going to make a new class called Thick Green Border, and I'm just gonna actually pace in that same code from before.

But the border color is now going to be green, and the border with can be 10 pixels and the border style will still be solid here.

So now I'm going to have to apply it to the image.

So right now there's the class smaller image, But you can have two classes here.

I just put a space and then I'm gonna put thick.

I mean order.

So is long.

You just have a space.

In between classes, you can have two classes.

So if I refresh here, you'll see the thick green border right around there.

You can see so far, we have very sharp corners around this image.

There's a border radius property that we can use to make that a little round more rounded.

I'm going to add a new thing called Border Radius, and I'm gonna set the value to 10 pixels.

So if I refresh Now you can see we have rounded corners here, In addition to pixels, thatyou can also specify the border radius using a percentage.

So instead of border radius 10 pixels, I'm gonna change this too.

50%.

And if I refresh my page here, you can see it makes a circle.

You can set an element's background color with a property called background color.

So here's an example.

Let's set the background color of the H two elements background color, and I'm going to change this to blue.

So if I open up, my browser will see that the background is blue.

I'm gonna make a new class, and the new class is going to be called silver background silver background and you guessed it.

It's going to have a silver background.

So I'm gonna put background color silver.

Now, remember, I also have to apply it somewhere.

I have to make something used that class.

So for this develop a class equals silver background.

Now, if I refresh here, you can see we have a silver background here.

We don't need this background color blue, so I'll take that off here and refresh it one more time, and that's how it's supposed to look.

We've talked about styling specific elements like this.

And then we've also talked about styling classes.

You can also style based on I d and ideas similar to a class.

Except each element is only gonna have one I d classes.

You can put on a lot of different elements.

So let me show you how to apply an I d to an element.

If I just go down to this form here and I'm just gonna put i b equals cat photo form.

And just like that, it's not gonna change the appearance at all because we haven't style it yet, But now we can use the I d to add CSS styles or weaken reference it in Java script.

In the last section we learned about I d s.

Now we're gonna learn about styling I d.

S.

I'll use this ace to as an example and an i d.

Of heading beater styling I d.

S.

It's similar to in your styling classes, but we are going to use in a hash mark instead of a period.