So let's move on to the main section now
and to the content we can add in there.
Now, here in that main part of my page, of course
it's always up to you what you want to have in there,
but in the end, I will have two sub sections, so to say.
A part with a HTML summary and a part about the CSS
summary, though, I will say that the content we add here
is just a very short summary,
a way more detailed summary can be found in that PDF
document, which I provided to you.
Now, that being said, it's now time for two
sub sections here.
And for this, I want to use subtitles to mark
their beginning, their start.
And hence, I'll add more titles,
more headings here, not headers, but heading elements.
And we could use H1 again,
but you should typically only have
one main title per HTML document.
And we already got this main title here,
this main H1 element, and therefore
I'll use H2 elements here to make it clear
that these sub sections still belong to the overall main
page theme of being a CSS and HTML summary.
Now in this first subsection title here,
I'll give this a title of text of HTML summary.
And then I'll already add a second one,
a second subtitle with the CSS summary.
Now these two H2 elements are on the same level.
They're both children of main, but to each other,
they are siblings.
They are on the same level, they have the same
amount of indentation,
which signals that they are on the same level.
And they mark two separate sub sections,
which together make up our main content.
That's the semantics behind the structure we're adding here.
Now let's start with that first sub section here.
Here, we might want to start with a short entry text
where we have a short general definition of what HTML is.
And if I want to have just some standard regular text,
then the paragraph element always is a great choice.
And then we could say HTML and then explain what
that stands for hypertext markup language
is used to define our page content, structure and meaning.
You don't use it for styling purposes.
Use CSS for that instead and I'll press the auto format
shortcut so that some automatic line breaks are added,
which again, as you learned will be ignored by the browser.
And now with that, if we save this,
we got this subtitle here and then this entry text.
Now below that entry text, I want to have a list
with the main HTML features being laid out.
And therefore, we can add a list here with
one of the two main list elements we have.
An unordered list with the UL element or an ordered
list with the OL element.
Now it's up to you, which kind of list you see here.
But I would say it's an unordered list because the main
features which I'm going to lay out here actually won't have
any particular order.
And hence I'll use the UL element to then define my
different LI elements in there, the different list items.
And a list, no matter if it's UL or OL,
always is a great choice if you have
well list content, multiple pieces of content,
multiple sentences, for example,
that make up a list.
Could be your shopping list for the grocery store,
could be your favorite sports or like in this
case, the main HTML features.
And here are the first list item could be that we say
HTML uses elements to describe
which basically means annotate content.
The second list item here could be that we say HTML elements
typically have an opening tag
and then content, and then a closing tag.
And then thereafter, we say,
you can also have void empty elements like images.
And we can also say you can also
configure elements with attributes.
I'll also add one more list item.
Though of course, there are more HTML features
we could add here, but I want to keep this relatively short.
And on that last list item,
I'll just say there's a long list of available elements,
but you'll gain experience over time. No worries.
So that's now my list, and if we save this,
we see all those list items with that default styling,
these bullet points added to them
automatically by the browser.
Now after this list, I'll add one more sentence and
therefore, I'll use a paragraph again
for this regular text and here just want to say,
learn more about all available HTML elements
on the MDN HTML element reference.
And you might've noticed that this actually had a special
style on that screenshot, which I showed you earlier.
So that this part here actually was highlighted,
and that was not just some special styling.
That was actually a link to MDN.
And if you haven't added that link, that's no problem.
But if you did, good job and I will therefore also
add an anchor tag, which I wrap around this text here
around the MDN HTML reference.
And now we just need to configure this link with an
attribute again, to tell the browser
where this link should lead to,
and we need an attribute for that because the content alone
is just the text that should be displayed to tell the
browser where the link actually leads to,
we need that extra behind the scenes configuration,
which attributes provide.
And hence, I'll add to the ref attribute here
and then simply search for MDN element reference
and grab that link here.
Copy that link
and use that here as a value for this ref attribute.
And I'll hide that sidebar now,
and also press the auto format shortcut again,
to make this more readable again.
Now that is my HTML section content.
Now we also got that CSS summary and here it's quite
similar.
We got a paragraph with a little starting text where I say
CSS "cascading style sheets" is used for
styling your page content.
Then below that a list with the main CSS style features
where we could say styles are assigned via
property value pairs.
And that should be in a list item of course,
not in the unordered list like this.
So now it's in a list item and then we have another
list item where we can say,
you can assign styles via the style attribute
that's one thing you could do.
But then I add another list item to avoid code duplication.
You typically use global styles, via the
style element instead,
or maybe let's say e.g via the style element instead.
And then add another list item where I say,
alternatively, you can work with external style
sheets or style sheet files, which you link to.
And then I'll add a last list item where I just want to say
when working with CSS concepts like
inheritance, specificity
and the box model should be understood.
Okay, these are my list items.
Now below the unordered list, we can add another paragraph
where we also say learn more about all available CSS
properties and values on the MDN CSS property reference.
And again, I'll grab a link for that
simply search for MDN CSS properties
to find that CSS reference and I'll grab that
link and then create a link here.
Anchor tag set the ref attribute to that link,
grab the closing tag and wrap this around the MDN CSS
property reference,
press the reformat shortcut,
and now we got that content here as well.
And hence, we now have this page look here
And that is looking okay.
The content is there. It's readable, it's usable.
And it has the correct semantics,
but the styling is still not very close to
what you saw on that screenshot.
And therefore let's now next dive into the styling
of this content here.