All language subtitles for 024 Inline CSS-en

Now even in it's current state our Web site already compares pretty favorably with our computer science

professors Web sites.

So we're definitely doing something right here.

But we can make it even better if you take a look at the personal Web site of Sean Halpin who's a web

designer at Sean help and I know this is one of the most beautiful personal web sites I've ever come

across.

It's incredibly simple but it's also really beautiful and really well-designed.

So this is going to be our inspiration for this CSSA module and I'm going to show you how by using the

powers of the SS and everything that you're going to learn in this module we're going to elevate the

design of our personal site to look something like this and bring it right into the 21st century.

So the first thing that would already make our Web site look a little bit nicer is changing this pretty

bland white background to a colored background.

So if you had Evis your code file and open up index or hemol we can inject a little bit of SS right

into the h l tag that we want to effect and the tag that we're interested in is the body tag because

we know that most if not all of our displayed content on our website is enclosed inside this body tag.

So if we change its background then the entire Web site's background will change too.

So inside this body tag we're going to tap into an attribute called style and style takes CSSA code

inside the quotation marks.

So the style that we want to change is the background color.

So I'm going to write background Dasch color and I'm going to write a colon and after that colon I'm

going to specify the color that I want for the body.

And let's just start off with a blue color and then we're going to close off this line of siestas code

using a semi-colon.

And now if I hit save and if I go back to my browser and remember that we're working with the.

And remember that we're working with the local file not the one that you might have hosted on get hub

but this is where our development is going to happen.

So if you don't have it up remember you can simply right click and go to copy full path and paste it

in here.

In order to get to that Web site under-development.

So once you are here then if you hit refresh you'll see our CSSA code being implemented changing the

entire background of our Web page.

Now the question you might have at this stage beside the question of how did we manage to get our Web

site looking even uglier than before.

Just bear with me on that.

But the question that most students have is well how did you know to use background color and how did

you know that blue as a color would work.

Let's see how we can find out how to do this.

So if I head over to Google and we search for change background color using CSX and we're going to tag

on MDA at the end because that's our preferred documentation and you can see that the first link that

shows up already takes us to the documentation on the background color and this page explains that the

background color is a CSSA property which sets the background color of a particular element.

So we've used this particular line to change the background color of our body a female element to blue.

Now as it shows we can also do this using hex values or hexadecimal values so we can replace this really

ugly looking blue with something that is custom and a really good tool for finding beautiful colors

and beautiful color palette is a Web site called Calahan dot SEO.

And here you've got professional designers who've curated some of their favorite color palette and they

provided the hex codes to implement them in your own designs so you can search by hot or popular.

And we're going to look for a nice color palette that is going to work for our particular project.

So I'm going to choose this one and I'm just going to go ahead and copy the hex value of this nice sort

of light pastel green blue color and I'm going to replace the word blue with that hex value.

And remember whenever you using values it needs to have the pound sign or you might see it as the hashtags

sign in front.

Now as soon as we add that hex code you'll notice that one of our plugins that we installed in the beginning

the one called pigments is highlighting that color to us to show us what it looks like when it's implemented.

But we're going to verify that on our Web site as well.

So let's go ahead and hit save and go back to our Web site and hit refresh and you can see that beautiful

light green color is now showing across our Web page.

So the other question that you might have is how can I figure out which colors I can use just by specifying

the name of it and which ones I have to use as a hex value.

Well again let's head over to Google and we're going to look for an answer to our query and I know that

I've been banging on about this point but it's really really important because as a fully fledged web

developer one of the most important skills is finding and figuring out how to do something that is specific

to your needs.

So inevitably at some point in your future career you will need to build features or implement things

that we haven't ever talked about.

And it's important that you really start building up this skill or figure out what are the best key

words to search for.

How do I structure my searches which sources am I going to go to be at google stack overflow MDA and

in order to figure out how I can do this specific thing that I want to do.

And that's why I want to show you my thought process in order to guide you on how you can start doing

this for yourself as well.

So whenever you come across something that you want to figure out or you want to do that isn't covered

in the tutorials I want you to first give it a go looking and seeing if you can figure it out for yourself

because this is one of the most important skills that you need to learn as a developer.

So let's go ahead and search for CSSA colors and if we hit enter you'll see that Google has picked out

this particular table on the M.D. and Web site and it has keywords and R.G. be hex values.

So let's go and take a look at it in more detail.

So this is a page that I recommend you bookmarking even because it describes the color CSSA data type

that's available to you when you see access.

And if you scroll down there's this really useful table that shows you the colors and the key words

that you can use in order to implement these colors in your code without ever having to dive into the

hex code.

So for example maybe you want the background to be this powder blue.

Right.

So you can go ahead and simply copy this key word and instead of using the hex code we can simply use

the word powder blue.

And if we refresh our website you can see that that color is automatically rendered because it's recognized

as a valid CSSA color.

So this is a quick and easy way of implementing colors using CSSA.

Now there's a whole range of other ways that you can change the color using C Ss and I'll leave you

to read through this documentation and take a look at some of the other ways or some of the other palettes

that you can tap into.

Now heading back to our personal site the next thing that I want to change is the style of these horizontal

rules and you might realize that there's a little bit of difficulty involved in doing this because as

nice as it is modifying the style of a particular HDMI element by simply going into the tag and changing

the style attribute it's a little bit cumbersome when you want to do that to many repeated elements.

For example are horizontal rules because I have a total of about four of them and I would have to write

up the CSSA code and copy and paste into each and every one of these tags.

Now if at some point I decide to change one of these CSSA values say you know I actually prefer this

light color over this powder blue and I'm going to change it back to that particular hex code.

Then I would have to change it.

Then I would have to remember to change it in all four places.

And this is very very error prone.

So in the next lesson I'm going to show you another way that you can implement CSSA code that will apply

across the entire web page and it's by using internal CSSA so you can look for to that in the next see

that.