Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Enhancing Design with CSS!
You have completed Practice Enhancing Design with CSS!
Preview
Welcome back. How did you do? Let’s go over how I solved this challenge.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
How did you do?
0:00
Let's go over how I solved this challenge.
0:02
As mentioned in our intro video,
0:06
our first step is to import some
Google fonts into our layout.
0:08
So let's visit fonts.google.com.
0:12
I already know I want a
font called Lora, so I'll
0:16
type Lora into the search bar and
click on the search result.
0:19
It looks like Lora comes
in eight varieties, but
0:24
I only want to import the versions
I'm planning to actually use.
0:27
Attach too many Google fonts and you
can really slow down your loading time.
0:31
So I'll click select this style on
just regular 400 and 400 italic.
0:37
This sidebar panel shows me
the code I need to import and
0:45
use Lora, but I'm not ready
to make use of that just yet.
0:49
I'll click the Google Fonts logo
to return to the home screen, and
0:54
now search for a
font called Comfortaa.
0:59
This time I'll select
the Bold 700 weight.
1:04
Now, my import statement
is ready to go, so
1:08
I'll copy and paste it into
the head of my document.
1:12
This should go above the line where we
link our stylesheet to our HTML page.
1:17
Let's turn our attention to our CSS.
1:26
In the body element,
let's switch our text to Lora.
1:29
Google provides a very brief font stack.
1:33
Lora will almost certainly load, since
we're importing it from Google Fonts.
1:36
But if something goes wrong, we'll at
least default to a serif typeface.
1:40
The browser default
font-weight is 400,
1:45
which is another way of
saying normal weight.
1:47
So it's not absolutely necessary to
include a font-weight declaration here,
1:51
although you can if you like.
1:56
As for our main element,
1:58
let's round the corners by setting
the border-radius property to 2rem.
2:00
These box-shadow instructions in
step 4 might look a little daunting,
2:11
but fortunately that's
all one declaration.
2:15
These first four values
represent no horizontal offset,
2:31
4 pixels vertical offset,
4 pixels blur, and
2:35
2 pixels spread, which will
increase the size of our shadow.
2:39
The color of our shadow contains no red,
a bit of green, a bit more blue,
2:45
and uses the alpha component
to set the opacity to 30%.
2:51
How about our heading level 1?
2:57
Our first task is to change
the font family to Comfortaa.
2:59
You'll notice that Google Fonts provides
cursive as the fallback typeface choice,
3:05
but I'm going to change
that to sans-serif.
3:10
To see the difference, try
changing the spelling of Comfortaa.
3:13
The browser can't find Comfortaa
anymore, so chooses the default.
3:18
I don't like the look of
that cursive text at all.
3:23
And it will only get all the harder to
read once we capitalize our letters.
3:25
I think sans-serif is a much
more legible fallback.
3:30
Don't forget to change back the spelling
of Comfortaa before you finish.
3:38
We'll increase our font size,
change our text color to white,
3:44
and use the text-transform property
to capitalize our heading.
3:50
If you're wondering why we're
using the text-transform property
4:01
rather than just typing all capital
letters in the HTML, don't forget
4:05
that writing semantic code means
reserving style decisions for the CSS.
4:10
I'm not changing my content, I'm just
using CSS to style my heading in all caps.
4:15
And finally, let's apply a linear-gradient
to our background property.
4:23
The linear-gradient property
can get pretty complex,
4:31
but fortunately this request was simple.
4:35
Just fade from a lighter shade
of blue to a darker shade.
4:37
Since linear gradients go from
top to bottom by default,
4:41
we don't have to make adjustments
to the angle of the gradient.
4:44
Let's check that out in the browser
before we proceed to the next step.
4:49
Our next task was to give
our quote from Jay-Z and
4:55
Alicia Keys a bit more visual interest.
4:58
We'll start with increasing the padding
by 30% on the top and bottom.
5:02
Next, we have a whole bunch of
background properties to add
5:08
to get our skyline
image looking right.
5:12
We could add them one by one.
5:17
But that's a lot of typing.
Fortunately, the
5:35
CSS background shorthand
allows us to combine all five of
5:39
these properties into
a single statement.
5:42
As we preview in the browser, you'll find
the background hex value we've chosen
5:55
doesn't have any impact on our layout,
since it's covered by our skyline image.
6:00
Tthat will change once
we add our final step,
6:05
which is applying the
background-blend-mode property.
6:09
I've chosen luminosity as the value,
but feel free to experiment and
6:19
see the results from
applying other values.
6:24
Check out your new and improved
New York City layout in the browser.
6:49
If you're a sports fan, the blue
and orange color scheme
6:53
might remind you of the
New York Knicks or Mets.
6:56
One more thing before we finish.
You may have noticed, way back
7:00
in the selector for
the main element,
7:04
I included the overflow
property with a value of hidden.
7:08
Let's see what happens if
I comment that line out.
7:12
The problem here is that while I rounded
the corners of my main element and
7:16
you can see the shadow it casts
does indeed have rounded corners,
7:21
the child elements inside don't
inherit the same border-radius.
7:25
The boxes inside my main element
are still rectangles and
7:30
their corners stick out
on all four sides.
7:33
Let's uncomment that
overflow hidden declaration,
7:37
as this is the easiest way to
hide those rectangular corners.
7:41
I've included a few readings on this topic
in the Teacher's Notes, but overflow:
7:46
hidden basically clips any content that
doesn't fit inside an element's box.
7:51
I hope you enjoyed this opportunity
to enhance a layout with CSS.
7:57
Keep on practicing, and
I'll see you next time.
8:01
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up