All language subtitles for 031 Inline CSS.en_US

Now even in its 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 website of Sean Halpin, who's a web

designer at seanhalpin.io,

this is one of the most beautiful personal websites 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 CSS module.

And I'm going to show you how,

by using the powers of CSS 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 head over to your code file and open up index.html, we can inject a little bit of CSS right

into the HTML tag that we want to affect.

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 web site 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 CSS code inside

the quotation marks.

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

So I'm going to write background-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 CSS code using

a semicolon.

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

file, not the one that you might have hosted on GitHub, 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're here then if you hit refresh you'll see our CSS 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 CSS’, and we're going to tag

on MDN 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 CSS 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 HTML 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 palettes is a website called colorhunt.co.

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

they've 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 bluish color and I'm going to replace the word blue with that hex value.

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

the hashtag 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'll look like when it's implemented.

But we're going to verify that on our website 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 keywords

to search for.

How do I structure my searches?

Which sources am I going to go to, be it Google, Stack Overflow, MDN, 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 CSS colors and if we hit Enter you'll see that Google has picked out

this particular table on the MDN web site, and it has keywords and RGB 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

CSS data type that's available to you when you use CSS.

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

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 keyword and instead of using the hex code we can simply use

the word powderblue and if we refresh our web site you can see that that color is automatically rendered

because it's recognized as a valid CSS color.

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

Now there's a whole range of other ways that you can change the color using CSS.

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 HTML 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 our horizontal rules, because I have a total of about four of them,

and I would have to write up the CSS 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 CSS 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 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 CSS code that will apply

across the entire web page.

And it's by using internal CSS. You can look forward to that in the next lesson.

See you then.