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!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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