Voiceover: In this lecture, we're going to start
to write CSS for text formatting, so you can see
how CSS works.
It's really easy.
So, we'll jump right into the CSS file here,
to start write some code.
CSS is written in rules.
Each rule consists of a selector, and a declaration block.
To exemplify that, we'll start formatting the main heading.
So, H1 is the selector
because it will select all H1 elements.
This means that all H1 elements will be formatted
with the code we will write in the declaration block,
here in curly brackets.
So, I will start with the text color.
We will choose green in this example.
So, color...
And I just write, green
and then semicolon.
And you see the H1 element actually changed
its color to green.
So, to sum this up,
the property here is color,
and the value of the property here is the name, green.
Next, we want to change the text size, right?
So just write font size
and brackets gives us some suggestions as we write.
And now I will choose just 40 pixels.
You see, it changed?
Maybe 50 pixels.
No, 40 pixels was better.
You see we are already designing in the browser,
we're changing the values of the attributes,
and see which looks best.
Now suppose we wanted to change the font family.
Let's say, to Helvetica New.
Let's do that.
It's font family, right?
And now just type, Helvetica New.
And again, the H1 element changed its family.
Now if that font is not available on your system,
which is likely, if you're on windows.
Let's tell the browser to use Arial instead.
And to do so, we just write Arial after a comma here,
and then the semicolon, as before.
So Helvetica is the first choice,
and Arial is the second choice.
And now, let's go do the same thing for the H2 elements.
We want them to look the same, but a smaller font size.
So let's copy this H1 rule,
and paste it down here, and change this to H2.
Now these two look exactly the same.
The H1 looks exactly the same as the H2
elements down here.
Because for now we didn't change anything.
So let's change this here to, let's say, 25.
And that's a much better font size.
Now, we repeated some rules here.
You see?
The H1 and the H2 have the same color
and the same font family.
And we should actually avoid that,
because repeating code is bad practice.
Instead of repeating, we can just group
the common rules together.
This is something we will be doing a lot,
so just showing it to you.
So, write H1 and H2,
and the declaration block.
So everything that is common here,
I will cut and paste it up here.
And the font family is also the same for these two.
So, did you see what I did here?
Now I can delete this from here,
because it's already declared here
in the common declaration.
Now let's quickly format the paragraphs.
I will first go back to the HTML file
and delete this random text we put here,
just to see how strong, and emphasize and underline works.
As you can imagine, we'll use the P selector here.
And I'll show you another bracket secret here.
Instead of switching to the CSS file,
you can edit CSS right here in the HTML file.
Just click on the P tag,
and then hit Command+E, or Control+E.
Command+E.
And this opens a CSS editing section
right here in this file.
This is called Quick Edit.
Now hit new rule.
Now it automatically puts the P selector
and the declaration block here for us.
OK, I want the font size...
To, let's say, 18 pixels.
Great.
And let's justify this text.
And for that, we use a text align property
and set it to justify.
Very well.
We could also use right, center or left,
but we want to justify here.
I will also adjust the font family.
Do you remember how to do that?
It is font family
and it was Helvetica New
or as a second choice, Arial.
All right.
Maybe you noticed that the link text is still
in original format down here.
Now we could go ahead and format the A tag, right?
That will show you a much better solution.
So let's switch back to the CSS file.
And at the beginning, I will add a rule for the body.
And since everything is inside the body,
this rule will apply to everything visible on the web page.
So this means all elements that have no defined styles.
So this is like a global rule.
So, body, and that's it.
So first thing, I could go ahead and copy the font family
right into the body.
Like this.
OK, now you see that everything
has the Helvetica New font family.
Even the links, which I didn't even style yet.
If I delete this font family declaration down here
for the P element,
it still looks the same because we defined that everything
inside the body will have Helvetica New as font family.
And I will do the same thing with the font size.
We'll cut it here,
paste it here in the body.
So the paragraph is back to the 18 pixels,
but now the links are also at 18 pixels.
Now the reason this works, is because of CSS inheritance,
which is a very important concept in CSS.
We changed the font size in the body,
and so the elements that are inside of the body
inherit its style.
So child elements inherit the properties
from their parent elements.
Unless we overwrite their styles,
as we did right here in the H1 and H2.
Sorry, in the H2 declarations.
All right, I think this was a good introduction to CSS code.
So, congratulations.
You have created some nice, clean CSS code here
without repetitions and have made the text
look pretty good for now.
Isn't that great?
Now this was a lot of stuff to absorb,
so feel free to go through it again
and make sure you understand exactly what we did.
Because it's very important
that you understand everything from here
because from now we will use these concepts
for the next lectures.