So let's add some styling
and of course the style's CSS file is the file
we need to go for that.
Here, we can set up all kinds of CSS styling,
and we will add more and more styles
throughout this section.
But the first kind of style I want to start with
is the page background color,
which is a very light purple color,
a white color with a slight purple-ish touch.
And I want to change the overall font family
for all those HTML elements on the screen.
Now, as you learned,
you could also change styles without an extra CSS file.
You could target an html element
and add the style attribute,
and then add the styles for this element here
through that styles attribute.
That would work.
But, the downside of this approach
is that, A, you write all your CSS code
directly inside your HTML code,
which, for bigger pages with lots of HTML code,
can get hard to read and manage for you as a developer,
and, B, you have a lot of code duplication,
which also means that if you want to change some style,
you often have to go into the different attributes
of a lot of HTML elements to adjust it
for all those elements.
And, for those reasons, you typically work
with global styles.
You can add global styles with the style element
in the head section as well.
But, since that then still leads to large HTML files,
with lots of CSS code in them,
it's more common to use external CSS files,
as we are doing it here.
And therefore here is the place
where I want to write my CSS code.
Now, as I just said, I want to set
an overall background color and an overall font family.
And therefore I want to target a high-level HTML element
so that I do affect the overall page.
And the body element sounds just about right,
since I want to affect the entire visual content.
And for this, we can target the body element
with that body type selector,
because you'll learn that global CSS styling
is applied by a writing those CSS rules,
where you have a selector
and you'll learn about the type selector.
You'll also learn about the ID or class selector,
and that you can combine selectors.
We'll use all of that throughout this section.
Here, I'm using the type selector.
And then once you've got a selector, you add curly braces.
And between those curly braces,
you write the actual CSS code.
You target different CSS properties to, then,
assign different CSS styles, to those properties,
different values, which you set
for those different CSS properties.
That's what we do here.
And here, if you want to change
the overall document background color,
we can simply target that background color, CSS property,
and then set it to any color of our choice.
And here I picked a nice little RGB color, red green blue,
which is 244, 234, 255.
This gives us a light background color
with a slightly purple touch.
And you did learn that RGB colors are just one kind of color
or one way of setting colors.
And you can go through those different ways
of setting colors by hovering over a color
here in visual studio code,
and then clicking on that color definition here.
And then it also switches to this hexadecimal definition,
which is an alternative or to the HSL definition,
Hue Saturation Lightness.
And these are simply different ways of defining a color,
of setting a color,
and you can set all colors with all those different ways.
And here I'm just using the RGB way of defining a color.
And if we save this,
we now have a slightly purple-ish background.
It's very light.
You should be able to see it if you're following along in
your browser.
And, with that,
we get the right background color.
Now I also want to change the font family,
so the font which we use.
And again,
I could do this for the individual HTML elements,
also by targeting them here,
but we can also utilize a HTML concept or a CSS concept
called inheritance.
I can set a font family here on the body selector
and set this to Roboto, in single quotes,
comma sans-serif, to set the font family to Roboto,
or, if that's not available, for some reason,
to sans-serif as a fallback.
And if I save this, we see that, indeed,
the font did change here.
Now, why did it change, though?
After all, I did not target the H1 element.
Well, that's this inheritance concept,
which we can also see if I inspect this H1 element.
Here, we see that various styles affect this element.
And we see that we got some browser default styles here.
But if we scroll down,
we also see that it got some inherited styles from body.
And here it's this font family style,
which is all is applied to this H1 one element.
Now you did learn that not all CSS properties
are inheritable.
Basically you can use common sense to guess
whether a property is inheritable or not.
The background color, for example, is not inherited.
Here, we just have his background color applied
to the body as a whole, but it's not inherited,
but the font family typically is.
So, here, this H1 element is inheriting the font family,
and that's why it is using this Roboto font now.
And that's a good first step,
but it's not all I want to do for the header here.
Instead, I also want to change the text color
of this H1 element,
and I want to increase its font size a little bit.
And to do this, I'll go back to my CSS code
and also select the H1 element directly, like this.
Now, if we target it like this,
then we can set CSS properties,
which will only affect all H1 elements,
but no other elements on the page,
no matter if the properties are inheritable or not.
And therefore here I can then, for example,
set the font size to 52 pixels.
It's up to you which value you want to use here,
but I'll go with 52 pixels,
since I think that's a nice size here.
And I'll set the color to a purple color
with RGB and then 88, 49, 196.
Now, pixels, by the way,
is one of the available units
for setting sizes and dimensions.
We'll learn about other units
throughout this course as well,
but this will set a size in device, independent pixels,
which means that it will automatically be scaled
to look similar, both on high- and low-resolution devices
so that you don't need to worry about the resolution
of your end users' devices.
And, the other, if we now set these two extra properties,
we now have a bigger title, which is purple.
Now, it would also be nice if both the title
and the image would be aligned to the center
and we can achieve this by targeting
the header element itself.
So this wrapper around H1 image,
and on this header, we can then set the text,
align CSS property, as you learned to center its content.
And that is important
and a common source of confusion.
Text align does center or align the content of the element
on which you set it.
So it aligns to content of header and, to be very precise,
it aligns the text content or content
that is treated like text, or put in other words,
it aligns the in-line content.
And you did learn about the difference
between block and in-line elements as well.
Block elements are elements which always, by default,
occupy the full available width,
and the complete line in the browser
when they are displayed.
Examples for block elements would be header and main,
but also H1.
And that's why the image is in a new line here
because the H1 element occupies the entire width
of that screen, even though the text
actually does not take as much space.
It doesn't allow any other elements next to it.
Even if we would shrink the width with that width property,
even if I would set a width here of 100 pixels only,
then it would wrap the text,
but it would still not put the image in the same line,
because block elements, by default,
always occupy the entire line
and they don't allow any elements next to them.
That's just how they work.
On the other hand, in-line content
like plain text or images, do sit side by side.
Here, it just doesn't work because that text,
which would be a in-line element
is inside of the H1 element, which is not.
But the image element here is a in-line element.
The text inside of H1 is a in-line element.
And hence, if I set text aligned center here on header,
all that in-line content is centered.
If we inspect the image here, this image element,
we see that it's centered because the text align center
style is affecting it.
And the same is true for the H1 element.
Here, we also have text align center from the header,
which in the end is responsible
for centering the content in H1.
So that's another key concept, in-line and block elements.
You'll learn about that
over the last course sections as well.
And if you wonder which elements are in-line
and which elements are block elements,
again, common sense will get you pretty far.
Whichever kind of content that typically should sit
next to each other like text and maybe text and images,
or links inside of text,
any contents that typically should not force a line break
indeed is in-line content in HTML
and, on the other hand,
content where you would expect a line break thereafter,
like after a paragraph of text or after a title,
such type of content typically is block content.
And that's it for the basic header styles.
But now I want to add some spacing
around my header here, for later.
And I also want to change the image size a little bit.