And welcome back, let's make this website a little bit prettier than it is now, and I'm going to introduce
you to some CSFs properties.
Properties are, as the name suggests, properties that we want to change within our Web page.
And you might be asking yourself, you know, how many properties are there?
And as we did with the HTML section, I have a recommended resource for you, and that is CSFs tricks.
This website, any time you Google any questions about access, most likely some of the top 10 answers
are going to include something from this website.
So I highly, highly recommend it, especially if you go to the menu and almanac, because within this
almanac we have all the CSFs properties listed on here.
So any time you have a question and you want to say what is justify 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 HTML 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 time you see 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 into.
So let's try a few of these.
I'm going to start off with our Soldats access over here and let's change a few things.
We want to have our home being the center.
Let's start off with text.
And if I type in center and I save.
My Texana 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 Dasht and then the color of the border will do purple.
So I save refresh and we have a border.
You can also do solids 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 website.
So how do we do that?
Well, the tag that we would want to apply it to is probably body.
So if I go into body.
And you might notice something here, I'm creating these selectors, I'm going from top to bottom,
the 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 in a later video.
But just keep that in mind.
I guess so for body would be awesome to have a cool image on our website 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 background image.
We want to specify a Eurail.
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 website called On Splash, if you haven't checked
it out, they have a ton of high quality free images that you 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, dot, jpeg.
So I say this.
I refresh.
And look at that, we have this image, but you can see that is a big image and 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 website.
OK, let's say we want to remove these little dots next to our links.
We can do that by going into what we want to change our ally elements.
So we go in to style and we can put in here Ally and we'll do something called list style and we'll
go none and refresh and look at that.
Those little pesky dots are gone.
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 the Mickey Mouse hands.
OK, so we go into our H2 and we can do something called 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 access tricks and again, go to see.
Look at Curser and 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 us, go back to our website, 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 fresh 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 website?
What colors are very, very interesting and CSFs?
Because there's a few ways that you can do them.
And I want to show you one of my favorite websites for picking colors.
What this website does, it actually gives you the colors that you can use it 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's.
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 has a hash and then the number associated with it.
So I just copied it from the website.
You see the numbers a little bit different.
Essentially, they can use anything from zero to nine and then all the way to F so eighth, 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, if we go back to
our success 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 rugby and rugby again, you see over here
that there is a hex colour and an RGV colour and these are both the same colour.
So you can pick whichever one you want.
In the case of an RGV colour, you can do something like this.
Say we want for our border to have RGB colour of these valleys.
So that is the value of red, green and blue.
So that's why rugby 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 two 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 change the blue to 255, then 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 RGV let's do one other cool thing, and that is called G.P.A. and that
is stands for Alpha.
You can actually set the opacity.
So with the fourth number, you can actually do something between zero and one and one being, well,
opaque, and you can still see everything to zero where it's completely transparent.
So what's the zero point five 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 website a lot when creating new websites and thinking of color templates to use.
It's a really, really good resource.
And you can use Hex and RGB whichever way, 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.
OK, so going back here, our website 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 you on that one by.