So by now, we already learned a lot
about HTML and CSS and how we use these two languages
to bring something onto the screen.
Time for a little wrap-up of what we learned
up to this point.
Most importantly, we learned about HTML elements
and you learned that an HTML element typically
is made up of an opening tag and a closing tag.
And between those tags, you have the actual content.
In case of the h1 element,
which is used to create a main heading, a main title.
The content between the opening and closing tags
is the text of that title.
Other examples for elements
would be the paragraph element
for a regular paragraph of text
or the link element for creating a link.
And the link element also is a another great example
for another key HTML feature, attributes.
We can add attributes to HTML elements
to add extra functionality or configuration to them.
And for example, the anchor element,
which we use to create a link needs this extra attribute
to know, or to tell the browser
where does link should lead to,
because between the opening and closing tags,
we actually only have the text
that should be turned into a link,
but the destination of the link of course,
is a separate thing.
And that's therefore is a great example
for a scenario where we need an HTML attribute.
Now, those HTML attributes are added like you see it here.
You have an attribute name, which is standardized,
just like the HTML elements themselves are.
So different elements support different attributes.
Some attributes can be added to basically all elements
and some attributes can only be added to some elements.
For example, this href attribute cannot be added
to all elements.
Now, after it is attribute name,
we have an equal sign without any white space
between name and equal sign.
And then after the equals sign,
we directly have the so-called attribute value
between double quotes.
That's important.
We always have those double quotes.
And between those quotes,
we have a value that makes sense for the attribute
with which we are working.
Earlier in this course,
you saw the style attribute
and there we had some CSS code as a value.
Now for the link, it's the actual address
this link should be leading to.
Now, we also learned about CSS though,
and we learned that we can add CSS directly to elements,
but that we typically instead write global CSS
as we are doing it here.
The advantage with global CSS is that we have a clear split
between HTML code and CSS code,
and that makes working on our code easier.
And we can also select multiple elements in one go
and apply the same styling to multiple elements
without annoying copy and pasting.
Now for a global CSS,
you create those CSS rules between those style tags.
That's important.
You have to put your CSS code between those style tags
to ensure that the browser understands your intention.
And then you select the kind of element you wanna style
by the element name, without the angle brackets,
and then between curly braces, opening and closing,
you have your CSS property value assignments.
You specify certain CSS properties,
which are also standardized.
So just like elements and attributes,
CSS properties are standardized.
You can't invent your own ones.
And then after a colon,
you have values for those properties.
And the just as with HTML attributes,
different CSS properties want different values.
A value of center, for example, of course makes no sense
as a value for the color property
and vice versa.
So that's how you can add CSS.
Now, as pages tend to become more complex,
you also have to this general HTML page structure,
this skeleton,
and you can split your code
into metadata and actual visible content of your page.
The visible content should go between the body tags
and your metadata, like the styling, but also this title,
which shows up in the browser tab
and in search engine results
should go between those head tags
and both head and body should then go between the html tags.
And you also add this version at the top here.
Now, one important word about putting tags into tags.
So putting elements into elements like we do it here.
This is a totally normal and common thing.
It's one of the main strengths
and important features of HTML
that you can nest HTML elements into each other.
Here, for example,
we have a style element inside of a head element,
inside of html.
And if we scroll down here,
we've got an anchor element inside of a paragraph element,
which is inside of the body, which is inside of html.
This is something you do all the time
when you write HTML code,
since you can only fully express different kinds of content
by combining and nesting different HTML elements.
And we're only getting started regarding that
at this point here.
Now that's a quick summary of first summary
of what we learned.
Now let's dive in deeper.