All language subtitles for 057 CSS Font Property Challenge Solutions.en_US

All right.

So how did that go?

Well, the first thing that we wanted to change was the font color.

And we've actually looked at this before.

But if you don't remember it's always a good idea to head over to Google and simply say font color CSS.

And if you prefer MDN or W3 Schools, then just enter that as well.

And the first thing we get is the color property which sets the foreground color value of an element

text content.

So that is pretty much what we want.

Right?

And we can set it using this particular rule using the hex code that I provided.

So let's head over to Atom and inside our h1.

Let's set the color property to that hex code which was 66BFBF, and we wanted to do the same for

our h2, and for our h3 we wanted the color property to be set as 11999E.

So now let's hit save and we can already see the previews of our colors, which is roughly what I expected.

So now if we head back to our web site, hit refresh, our web site is starting to look very very nice.

And we've styled some of our titles to the colors that we were looking for.

So the next one we were looking for was the font weight.

So let's search for that and see what we get.

All right. So we've actually got a property called the fint weight, and you can see there's a whole bunch

of ways that you can specify the weight,

for example, the keyword values or the actual numeric values.

So in our case we actually wanted the keyword ‘normal’ simply, in order to get rid of this bolting here,

and to de-emphasize this subtitle.

So let's head over to the h2, and let's go ahead and add our font weight over here.

And we want to set it to normal. So, hit save.

Hit refresh.

And there we go.

Now it's a little bit lighter in its weight and it looks just a little bit more together.

And we've gotten rid of that pre-specified font weight which was determined by our browser where it set

it to bold.

So now the next one is the line height.

So let's go ahead and set our line height for our h1 over here.

So line height, we can specify it using a number.

So 1 would be the default and 2 would be double height.

Now, the important thing to remember about line height is that the preferred way of specifying line height

is to give a single value without any units.

And in our case we're going to change it to 2.

So let's hit save and let's see what that looks like.

So that will increase the space between whatever is on top of the text of the h1 here

and whatever is below it. Now

in my case I don't actually really like the way that looks.

But if this more spaced out look is what you like then feel free to keep it this way.

But I'm actually going to get rid of this after we've shown exactly how it works.

Now our web site is coming along really nicely.

And feel free to tweak around the layout or the positioning of any of the elements that you see on

our front page here and make it look the way that you want it to.

Now in the next lesson we're going to learn about the final positioning system which is floating.

And we're going to use what we learn in order to position our Skills blocks to make it look much nicer

than the way it looks right now.

So for all of that and more I'll see you on the next lesson.