Now, even in its current state, a Web site already compares pretty favourably with our computer science
professor's website.
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,
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 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 website look a little bit nicer is changing this pretty
bland white background to a colored background.
So if you head of us your code file and open up index.html, we can inject a little bit of access
right into the HTML 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 website'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.
Now, if at this point you find that Atom is highlighting your code in a slightly different color scheme
to mine,
so for example, the part which says background color blue, instead of the green text I've got you've
got white and yellow like this,
don't worry about it.
That's just something specific to your computer, and it doesn't mean that you've done anything wrong.
Just make sure that you've got the semicolon that closes off that background color blue, and then you've
got the double quotes around that entire style.
And once you've checked those things, then you can continue on.
And now if I hit save and if I go back to my browser, then if you hit refresh, you'll see our CSS code
being implemented, changing the entire background of our web page.
Now, if the background color is not changing for you, make sure that you're actually looking at the
copy of the website that you're working on and not the GitHub version.
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 website under development.
Now the question you might have at this stage beside the question of "how did we manage to get our website
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 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 bluey 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 website 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 of figuring 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, StackOverflow,
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 website
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 the 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 powder blue.
And if we refresh our website, 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 decided 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 there.