This is the finished HTML part of our website.
This doesn't look good,
so let's continue with our styling.
Back in the code,
I'm still in the index HTML file because,
before we dive into the CSS part,
I first want to add a link to some fonts from Google fonts,
and that will of course create the style sheet
and the reference to it in the HTML file.
Attached to this lecture you can find the code,
the link to the Google fonts as a first step.
So simply take this link and paste it here below our title.
So this should look like this,
maybe also format it correctly.
Besides this, we'll also create our CSS file,
I'll call it simply styles CSS,
And again, back in the HTML file,
below our link to Google fonts,
we'll add our link to the style sheet
with the reference to style CSS.
Again, it's important to add the link to Google fonts
ahead of the link to the style CSS file,
because in the CSS file, we want to use our fonts,
therefore we first have to establish the link to the fonts.
With this, can save our HTML file and by the way,
in case you skipped the last lecture,
you can of course also find this file
attached to this lecture.
So with the HTML part being finished,
we can now go to the styles CSS file.
In here, I will now go through our elements on our page,
basically in a chronological order,
so top to bottom,
therefore I'll first select our body element
and in the body element,
I would like to add three different properties.
The first property is the font family.
We just established the link to Google fonts,
therefore, I also want to make use of
one of these imported fonts, specifically
I want to use this open sans font that we have in here.
Therefore, in single quotation marks,
we will add open sans..
So capital letters at the beginning and the space
and as fall back, we'll again, use our sans serif font.
Besides this, I want to eliminate
any margin around our body element.
So we set the top left bottom and right margin to zero,
and we'll add some background color to our website.
So we use the background color property,
and here I prepared an RGB code with a value of
44 for red, 41 for green and 38 for blue.
I mentioned this already in the last lecture,
in case you missed it, we'll only apply concepts learned
throughout this course already,
therefore I'll not dive too deep into
all of these properties and how these work.
With this in place though, if we check our page,
yup, we are coming a bit closer.
We now have a nicer font
and we have this background color, of course,
and we can actually also open our developer tools
just in case we need these, so like this.
Although not perfectly visible here,
we have links on our website.
For example, these two links appear for our navigation bar
and I don't like the default text decoration here,
so the underscore that we have below our link,
therefore let's go back to the style CSS file
and apply a general style to all anchor texts,
which are our links, in the end.
And this style should simply be
the text decoration property being set to none.
With this, the underscore is eliminated.
These are some default stylings now.
Let's now go into the specific sections of our website.
Specifically, I would like to get started with our header,
with the ID of main header in here.
The header should have the typical look
we learned throughout this course.
So the logo here should be to the left
and the navigation items should be to the right
and of course be displayed next to each other,
not below each other.
I can also zoom in a bit here,
so these should be positioned next to each other.
For this, we'll use the ID selector with the hash here
and refer to the main header.
And in here, we'll now add some well-known properties.
First, I'd like to add the height property here.
Throughout the course, we typically used padding
to increase the height of elements, but here for our header,
I would like to have a fixed height.
Therefore, in this rare case actually,
we define the height here in our CSS rule
and for the height I'll use maybe 80 pixels.
We'll see if this works,
besides that, to arrange the items inside our main header
we'll use flexbox once again.
So this would allow us to position a logo to the left
and the nav items to the right,
and to define the space between, as what it is in the end,
the space between these two different
element types in our header.
So to turn our header into a flex container,
we apply the text display flex property here.
To add space between our elements
and just to make this clear,
we have the anchor tag here and then the nav element,
which contains our unordered list with the list items,
so we want to add space between these two elements now,
and for this we'll use the justified content property,
which is now available in a flex context,
and set it to space between.
With this in place, if we reload the page,
you see that we have the items here to the right
and we have the logo to the left.
Still, both are not on the same level here.
So what do you must do now is we must
align our items along the cross axis,
left to right would be the main axis,
top to bottom here is the cross axis.
Therefore, back in the code,
with the align items property being set to center,
these elements are now on the same level.
So you can see it here and there.
So this looks all right.
What I don't like is the background color.
We don't have a dedicated background color
for the header element here.
Therefore it's hard to differentiate
between our main section and the actual header.
For this, let's add the background color property.
And again, I prepared an RGB color for you
with 29, 26 and 24.
So now the header becomes a bit more obvious.
And what we'll finally add to the header here
is some padding to make sure our elements
are not sitting directly next
to the left and right border of our header,
for this we'll add some padding of
maybe zero to top and bottom
and maybe 20 pixels left, right?
Let's see, yeah, I think this looks okay.
We'll work on these units later throughout this module,
therefore these are just dummy values for the moment.
With this, we can continue with
the next element inside our header.
This is our anchor tag here so the page logo,
and here we'll add some typical properties
regarding the font so font size and font weight,
we'll change the color...
And we'll again, as already done throughout the course,
transform the letters here into uppercase letters.
For this, back in the code, we'll add a new rule here,
now referring to our logo ID that we added to the page logo.
And we'll get started with the font size property,
which will be set to, let's say, 24 pixels for the moment.
We'll also turn the font weight into a bold one
to make it look a bit more like a real logo.
Then, we'll add a different color.
Here again with an RGB code of 238, 164, and 80,
so an orange tone here.
And finally we will use the text transform property
with uppercase here to turn
all letters into upper case letters.
Save this and let's see.
Looks good I think.
I can also zoom in a little bit more
if you want to make it better visible,
maybe like this and like that.
Okay, on to the next part in the header.
And these are our nav items here.
So inside of an element, our unordered list,
and then these list items,
you can ignore this marker by the way,
this is something added by default due to
these little dots that we have ahead of our list items here.
And this also brings us to the change you
want to implement here, I want to get rid of these dots.
And besides that, also position the list items
next to each other.
For this, back in our styles file,
we'll refer to the main header ID once again,
but now to the unordered list inside our header.
So basically this list containing these links
and there we'll set the list style to none
to get rid of these dots.
And if you now go back,
you see this marker here is removed and so are the dots.
And besides this, we'll use the display flex property
once again, because with this,
we have a default flex direction applied to the flex items,
which are the list items in the end
because the unordered list now becomes a flex container.
So with this, these are positioned next to each other.
And now what we could add is maybe
some space between these list items.
I'll add the space by using a margin
on the individual items,
here we are currently working on the parent element.
So on the unordered list, therefore,
I'll first go back to the code
and make sure that we don't have any default margin.
So we set it to zero or padding here on our unordered list.
And now as a next step, we'll go to our list items.
So again with the main header ID selector,
and now not refer to the list, but to these items.
And here we'll now add the margin property
and set it equal to a value of zero for top bottom
and maybe 16 pixels for left and right.
With this in place, yeah, we now have some space
between our two nav items.
With this, we are almost done with our header.
We are still having some styling issues
with our links right here.
I think the first problem is the color.
The second problem is that we don't
have any hover effect for this.
We'll again go back to our code.
Once again, refer to the main header ID selector,
here specifically referred to the nav element
and there to the anchor texts inside our nav element,
because these are the only links
that should have this styling applied.
Here, we'll simply add two properties.
The first one is again, the color with
an RGB code of 185, 131 and 31,
so again an orange tone
and we'll change the default font size also
to let's say, 20 pixels, maybe as I said,
we'll work on these units later throughout this module.
Let's see, yeah, looks good I think.
The last step in the header now is to add the
hover pseudo selector, so to change the color a little bit,
when we hover over one of these anchor tags.
To apply this, we'll again, use the main header,
a de-selector, again, refer to the nav element
and now refer to the anchor tags inside the nav element,
but now add the hover pseudo selector to it.
So whenever we hover over links inside our nav element
inside the main header, then the color should change
to an RGB color of 228, 163 and 44.
This in place, we should now have the slight hover effect.
Yeah, looks also good I think.
So this was the header,
In the next lecture, we'll continue with the main section.