All language subtitles for 3. CSS Properties

And welcome back.

Let's make this Web site a little bit prettier than it is now.

And I'm going to introduce you to some CSX properties.

Properties are as the name suggests properties that we want to change within a web page and you might

be asking yourself how many properties are there.

And as we did with the AC AML section I have a recommended resource for you and that is CSX tricks.

This Web site anytime you google any questions about CSX most likely some of the top 10 answers are

going to include something from this Web site.

So I highly highly recommended especially if you go to the menu and Alma snack because within this almanac

we have all the CSX properties listed on here.

So anytime you have a question and you want to say what is justified content well you can click on it

and it will actually give you examples you can play around with it and learn about the specific property

just like with the HDL tags although there are way more properties you don't need to know all of them

and memorize them because that's not realistic.

That's not the best use of your time.

We're going to focus on the ones that you'll encounter most often and any anytime you seen new ones

pop up while you're working you can always look them up and learn about them because they're very very

simple to read and do.

So let's try a few of these.

I'm going to start off with our style that CSX over here and let's change a few things we want to have

our home be in the center of the web page.

So let's start off with text the line

and if I type in center and I save my text is now centered.

OK.

We also want to add a border to this image border and this is a little bit unique.

You can do something like this you can do five pixels which is the size of the border.

What style of border you want so you can do dashed and then the color of the border will do purple save

refresh.

And we have a border.

You can also do solid and if it's solid it's a solid border.

OK.

What else can we do.

It'll be nice to have an image maybe an entire image for the Web site.

So how do we do that well the tag that we would want to apply to is probably body.

So if I go into body and you might notice something here as I'm creating these selectors I'm going from

top to bottom body which is the parent of almost everything is at the top.

And as we get more and more specific we trickle down to smaller elements.

Again we'll get into that later video but just keep that in mind.

So for body will be awesome to have a cool image on our Web site so we can do background.

And you can see the Sublime Text actually audiophiles or has some suggestions for us.

And we can look through this and pick the one that we want but based on the name looks like we want

background image with a background image.

We want to specify a U.R.L. in our case.

I actually have on my desktop saved a nice little picture and let's title it something simple like background

image and I got this from a Web site called on splash if you haven't checked it out they have a ton

of high quality free images they can use.

So again here we are referencing are let's put this actually in here.

So it's in our project folder and then within our project folder we can say that it is background image

thought JPEG.

So I say this I refresh and look at that.

We have this image but you can see that it's a big image.

It doesn't fit the screen.

So how can we do that.

We can do background size cover.

So if we do that and refresh look at that we have a beautiful background on our Web site.

OK.

And let's say we want to remove these little dots next to our links.

We can do that by going into.

Well you want to change our l I elements.

So we go into style and we can put in here.

Ally and we'll do something called list style and we'll go Nunn and refresh and look at that.

Those little pesky dots are gone for about whenever I select about I want the cursor to not be this

I want to change a cursor to maybe have this little hand gesture.

I like to call them Mickey Mouse hands.

OK.

So we go into our H2 and we can do something called the cursor and let's say you don't really know what

properties cursor has or you don't even know the property.

You can go to see SS tricks and again go to see look at cursor.

You can kind of guess by the name what it does and it tells you all the information you need to know

but you can see over here that they even have a demo of what you can do with cursors.

So we want the pointer so we can just put a pointer here save.

Let's go back to our Web site refresh and look at that.

We now have a pointer when we hover over about OK.

And maybe the last change we want to do is that we want to make sure that our home about and log in

are on one line.

This is a little awkward when they're stacked on top of each other and we can do that by selecting.

Let's look over here.

We want to select our allies and we can use something called display and display has a few properties

that you can use.

One is block and by default this is actually already a block but there is also something called in line

block.

And if I save this and I refresh look at that we have everything in line.

Now we want to change a few things here we want to make sure that our colors are better than just purple

and and green and pink and what if we want some specific color and we have a certain design that we

want for our Web site.

What colors are very very interesting and see SS because there's a few ways that you can do them.

And I want to show you one of my favorite Web sites for picking colors what this Web site does it actually

gives you the colors that you can use along with a nice addition of what it will compliment that color.

So you can play around with this and change a bunch of criteria as you can click over here and see what

color combinations work.

But let's say we wanted to use something like this.

And if you hover over and click you'll see over here that I get a couple of numbers that we can use.

So the first one is a hex number so hex number as a hash and then the number associated with it.

So I just copied it from the Web site you see the numbers a little bit different but essentially they

can use anything from 0 to 9 and then all the way to F so a to F and this represents a specific color.

So if I copy this and let's make our color let's make it the color of our header and save this and refresh

you'll see that our color changes OK.

We also want the border again to compliment the color let's do this border color.

We also have something called our GDP and our GDP again you see over here that there is a hex color

and an RJ color and these are both the same color.

So you can pick whichever one you want in the case of an RG color you can do something like say we want

for our border have RG be color of these values.

So that is the value of red green and blue.

So that's what our GDP stands for and we just wrap it like so.

So now if I save this and refresh look at that I have a nice little outline just to show you of what

exactly I mean by red green and blue.

If I set all of these to zero so that means that red is in full force and green and blue are nonexistent.

If I save and refresh that is red.

If I change this to green then that's in green effect and you can imagine here that if I changed a blue

to 255 and everything else is zero this will be blue.

There you go.

So let's go back here to what we had before because I like the other colors way better.

So let's refresh.

Perfect.

Now RG B lets you do one other cool thing and that is called Our GPA and that is stands for Alpha.

You can actually set the opacity so with the Forth number you can actually do something between 0 and

1 and 1 being while opaque and you can still see everything to zero where it's completely transparent.

So let's do zero point five here here you can see that there's a bit of a fade now and our color perfect.

So using a tool like this you can really pick what colors you want your website to have and choose the

one that complement each other well.

I use this Web site a lot when creating new Web sites and thinking of color templates to use.

It's a really really good resource.

And you can use hacks and our GP whichever one you want just it's good to have some consistency if you

want to add some opacity so the alpha this last number then definitely use our GPA.

OK so going back here our Web site is starting to look somewhat ok but in the next section I want to

talk a little bit about selectors and more things that we can do with them.

I'll see on that one by.