Let's get started with the text
below our image here.
The first thing I'd like to change is,
I would like to center the text below our images.
We can do this with the text align property.
And as you learned,
text aligned means that if we apply this property
to an element, the content,
the text content of this element will be centered.
Now, which element holds our text?
Well, it's the paragraph.
Therefore,
what we'll do now is we'll go back to our code
at again, our destination class selector.
So the list element in the end.
And there we want to access all the paragraphs
we have in here,
and then add our text aligned property
with a value being set to center.
With this, the first task is done.
Second thing I don't like is I think I want to have
uppercase letters as we had it here
in the, in the H1 element.
So this would also look better down here.
This can be applied now to our destination class.
So do you list items in the end, therefore let's do this.
Let's add what
the text
transform property with a value of uppercase.
With this in place,
the rule gets inherited by our paragraphs here.
You see inherited by our list elements.
Therefore,
this looks better and there is one third thing
I'd like to change.
If we zoom in a bit here, you see,
we still have this differentiation between the city
and the country.
But I think adding some color to the country here
would emphasize this a bit more or highlight
this a bit more.
As we have our
strong element in here,
we can refer to this element and change the color of it
easily.
For this,
we go back and maybe down here again at the destination
class and they are now referred to the strong element.
And in here, we'll now add a color with an RGB code
of zero,
160
and 117.
So such a slight green tone here.
And let's check this.
Yeah, I think this looks a lot better.
Still, I think our work on the paragraph is not done yet.
I think we should also increase the font size a bit
and also get rid of this black color here.
A slightly grayish tone would look better, I think.
So let's work on these things.
So the font size and the color next in our paragraphs.
So we leave our strong element
and go back to this paragraph.
Here, we will now add a fixed font size
of 24 pixels,
and we'll add a different color, which should have as a set,
a slight grayish tone with an RGB code of 124,
123
and 123.
Let's see.
Yeah, it looks better, I think.
And what we could also do,
if we check the paragraph, we have a margin of 24 pixels.
Let's maybe reduce the margin a bit to bring the text
a bit closer to the image.
So in here
we can now add
a margin
of maybe
20 pixels top bottom,
zero left right.
Let's see.
Yeah, I think this is just a slight change,
but it looks better now.
Now you see that the image and a paragraph below
belong together.
This means we are coming closer to finishing
the section styling.
What is missing of course is the H2 element here.
Let's work on this now,
actually just some steps we already did for other elements.
I would like to transform the text to uppercase letters.
We will align the text to the center
and then work on the font size and the color
and see if the margin is all right.
So let's select our H2 element.
Maybe above the destinations because it's well,
the header of these,
and we'll select it with our highlights ID.
You remember in the
index HTML file,
we have the section ID highlights for the section
and in this ID,
we have the H2 element as a direct child.
So we will select the highlights and here,
the H2 element and there, as I said,
let's get started with transforming the text to uppercase,
aligning the text
to the center,
adding a fixed font size,
and here would like to have a bigger font size
than we have it below for our paragraph.
So maybe 40 pixels here.
And then I'll also add a different color again,
not the black one we have by default.
Here, I prepared a color for you with an RGB code of
59,
65
and 64.
See?
Yeah, this looks a lot better, I think.
And maybe we can also
check the margin here.
We have a margin of 33 pixels.
Yeah, let's maybe decrease that margin a little bit.
So let's go back and let's say the margin
top bottom
should be 24 pixels
and zero left right.
See, yeah, I think this looks better.
With this change being in place,
we actually finished the content of our highlight section.
So this means the H2 element and the unordered,
the list with the list items.
What is missing now is the styling
of the actual section elements of the parents, so to say.
And with that,
we also have a little issue that might cause some confusion
at first sight.