Before we dive deeper into more CSS concepts,
let's style our content
of our hero-content div here a bit more.
So we'll focus on the h1, the paragraph,
and the anchor element in here.
Let's get started with the h1 element,
and for this I'm back in the style CSS file
and I'll again use our descendant combinator.
So we'll refer to the hero-content ID
and then to the h1 element in this container.
First, the color of the text should be white
and we'll transform the text to uppercase again,
as we did it for our page logo.
Besides that, I would like to increase the font size to,
let's say, 50 pixels here.
Let's see what this looks like.
Yeah, I think this is better.
The font family does not look perfect here.
I would like to use another font family
we imported already here in our index.html file.
This time I would like to use this Raleway family.
So for this, we will add the font-family property in here
and set it to Raleway in quotation marks,
and our fallback again will be a sans-serif font.
And you notice already from previous lectures,
the h1 element, by default,
gets a margin applied by the browser.
Can see this here,
this 41.5 pixels here.
And I would like to get rid of this margin
and set it to zero like this.
Let's now continue with our paragraph.
Again, I'll use our descendant combinator.
So, #hero-content p {
And there I'll again use a white color
and I'll use text-transform: uppercase
to turn all the letters into uppercase ones.
I'll also add a fixed font size,
so not the default one applied by the browser.
Oops, sorry, not font-family,
font-size, it is.
And this should be smaller than the h1 font size,
so maybe 24 pixels here.
Let's see.
Yep, this looks good.
But the font weight here is too big,
so I would like to reduce this.
And for the smaller font weight
as can be seen in here, we have to weight at 700.
I would like to use a smaller weight
and this should be a font weight of 300 only.
Let's see.
Yeah, this looks a lot better, I think,
because the focus should be on the h1 element here first.
And besides that, yeah, I think this looks all right.
So we can now focus on to our third element,
the anchor tag,
and this should actually be a button in the end.
Right now, it's just, well, a link with the underscore.
So again, we'll use our descendant combinator,
#hero-content a {
to specifically style this anchor tag.
And I'll get started with text-decoration: none
to remove the underscore.
Then I'll add a background color
because it should become a button in the end,
so we will have to see what this button should look like.
And I prepared another RGB color for this.
This is 255, 251, and 0.
So a yellow tone, it is.
Let's see.
Yeah, becomes better.
What's missing now of course already
is the padding to get some distance
between the content and the border.
So let's add this padding immediately.
And here for the button,
I would like to have a smaller padding
on the top and the bottom
and the bigger padding left and right.
So we'll go with 12 pixels top and bottom
and 24 pixels left, right.
Yeah, like this.
Doesn't look too bad, I think.
Then we'll also change the text color
because if I zoom in, you see it has this blue color.
I don't like this.
So let's also add a color of simple black here.
And also add a font size of 24 pixels again
to have a default fixed font size
we add to this element here.
Let's see if this looks good.
Yup, this looks okay.
But the text is a bit too thin as I would say.
So for this, we should increase the font weight maybe.
And we can do this as we know with the font weight property,
and we have two options to do this, actually.
We can either set it to 700,
so this will be 300 for a thinner font weight
and 700 for a bolder font weight by default,
or use bold here written like this.
Both is working as you can see.
Now it's a bit better readable.
If I would untick that box, you see it's slightly thinner.
And if I would change bold to 700,
the result would be the same.
So you can see if I untick it, thinner and bigger.
Still to have both your inner code
I will keep bold right here.
Typically you would follow one convention here,
so numbers or texts.
With that our text looks all right.
What's missing now is some general box styling
we basically applied to all our boxes.
This means we should have a look at the border radius here
for our good old rounded corners,
which we could set to eight pixels.
And then we'll also apply a box shadow.
Once again, with two pixels left to right,
four pixels top to bottom,
eight pixels blur radius,
and an RGB code of 68, 67, and 67.
And with that, I think, yeah,
our box here looks pretty cool.
What's still missing here is
maybe a bit more margin between our paragraph
and the anchor tag.
That's a bit too close.
For that we can either add a top margin to our anchor,
to our button,
or we'll just add a bottom margin here to our paragraph.
That's what I will go for.
Margin bottom, maybe 32 pixels.
Let's see.
Yep, this moves it down a bit.
And with that, it looks all right I would say.
One thing is still missing though,
as I just saw,
we should add hover effect
if we hover over the Discover places button here,
because at the moment we don't get any feedback
instead of the change in cursor by default.
So for this,
we'll go to our code again at
the #hero-content a:hover selector.
So this means we again use a descendant combinator,
meaning that in the hero content ID
if we hover over an anchor tag then,
well, what should happen,
we will just add a slight change of the background color.
By default, we have this RGB code here.
Let's take this one maybe
and I'll just alter it slightly to maybe 238 right here.
Let's see if this works.
We do that.
Yeah, you see it gets slightly darker
and I think this does the trick right here.
This means our hero-content part is all right.
This looks really good.
But our hero with the background image,
it's still a problem
because it should not only be behind our hero-content here,
it should also be behind the header.
The problem is that,
if we remember back what we learned about the document flow,
that each element is displayed one after another
for block elements in this case.
And therefore, well,
we kind of have to find a way to bring this main section,
specifically the hero part here
which contains the background image,
behind our header.
Maybe the position property
offers some values that can help us here.