So let's work on the list styling now
on these unordered lists.
And here I actually wanna have the same styling
for both lists,
hence we can work with just the ul and li selectors
but if we would want different styles,
then we could work with the ID selector, for example,
and give this second list an id of css-list, for example.
And give that first list an id of html-list.
And then in the CSS file,
we can use the CSS ID selector with hash
and then the ID you wanna target
to target just that element that has that ID.
But again, that's not something we need here.
Just something which I also wanted to mention briefly
because often the ID selector can be very useful.
Here it's not.
Here I wanna target all unordered lists,
and hence, I'll use just the ul selector like this.
And then here I first, of all,
wanna clear the default margin
and padding, which this list has out of the box.
By setting margin to zero,
so to zero pixels but for zero,
you don't need to write pixels,
just zero is enough,
and the same for padding.
Set this to zero as well.
And I will also clear the default list style
of having those bullet points
by setting list-style to none,
and as you learned, because of inheritance,
this will then be applied
to all the list items in that list.
So with that, if I save this,
you see the indentation is gone,
which was achieved with help of margin and padding.
It's gone since I set margin and padding to zero.
And the bullet points are gone.
And now I wanna style the list items manually.
So I'll target the list items here.
And then let's say every list item should now have a margin.
So not the overall list
but the single list items in the list
of 14 pixels top and bottom
but zero left and right.
And again, I'm using that shorthand notation here
where I don't just have one number but two numbers.
First number is vertical axis,
second number is horizontal axis.
And with that, if I save this,
we get some spacing between those list items.
Now, some indentation would be nice
and for that, we could set a margin
to the left, for example, with margin-left
but I'll instead use padding-left.
And for the moment, it doesn't matter
whether we use margin or padding
but in a few seconds, it will matter.
So let's use padding-left here
and I'll set this to 10 pixels.
Now, why will it matter though?
Because I wanna highlight some of these list items.
Some of those list items here
should have a yellow marker on the left,
a yellow border on the left
and some yellow text
to highlight them as extra important so to say.
And for that, I need a way of selecting some
of those list items but not all of them.
Now, the li selector always selects all list items.
Now, we could think about using IDs
but I wanna select more than one list item.
And since IDs need to be unique,
IDs and ID selectors aren't the solution here either.
And that's why we have class selectors and classes,
which we can add to our HTML elements.
All HTML elements can take that special class attribute.
And I'll add it here to this first list item
in the HTML list.
Here I'll add the class HTML attribute
and the value here can be any identifier of your choice,
which typically should be all lowercase though
with different words separated by dashes.
And here I'll use the extra-important identifier.
But again, this identifier text is up to you.
Now, I will add this class to more than one element,
otherwise I could have used an ID.
I'll add it to this third list item here, for example,
and to the fourth one.
And in the CSS list,
I'll add it to the third item,
and I'm adding it to the last item, let's say.
So now some list items have that extra class.
And why did I add that class?
So that I can now target it in CSS
and apply some extra styles.
So here in the styles.css file,
we can now target those elements
that have this class.
And how do we do that?
With a dot and then the class name.
That's this CSS class selector, which we can use.
So here I'll then use extra-important
right after the dot.
No white space between dot and the identifier.
It's directly thereafter.
And now we can set the styles
for all the HTML elements
that have this class identifier.
And here I'll then give them a color of rgb 255, 237, 177
and I wanna give them a border to the left.
And for this, I'll add border-left
but I will actually not just add it
to those extra-important elements
but to all elements.
But to show you why, let's start adding it
just to the extra-important elements.
For this, we, first of all,
specify the width of that border.
And here I'll choose five pixels.
Then this border value wants to know the style
of the border, so which type of border it should be.
And there you can use dashed, for example,
but I'll go with solid
to have a standard solid border.
And then we need to set the color of this border.
And that overall then forms the value,
the border or the border-left,
right, bottom and top properties want.
And you can style the border overall
to set a border on all edges
or target specific sites
with border-left, border-right, and so on.
And that's what we're doing here.
And the color I wanna use is rgb 247, 209, 85.
Now, if I do that,
I have a little border to the left.
Now, because of padding-left,
this looks good as there is some space
between the border and the text
but what's not looking good now
is that the other elements are not on the same level.
You can see this HTML text is a little bit more
on the left than this one.
And the reason for this
is that here on this element,
we got a border which takes up five pixels of width
because that's the border width
and here on this line, we don't have that.
And, of course, we can inspect this
to see that in the dev tools here
with the box model.
This second list item,
which has no border has no border here.
Surprise, surprise.
The first list item, on the other hand,
has that five-pixel border.
To make sure that the text is indented identically,
we cannot set border-left here on extra-important
but instead, set it on the list items
but cut that color and set it to transparent here
as a default.
So by default, all list items have a border to the left,
which is five pixels thick but which is transparent.
So not visible.
And only the extra-important items,
those items then also receive a different border-color
of rgb 247, 209, 85.
So here I'm not redefining the entire border-left again,
though we could do that as well.
But since it is a list item,
which gets this extra-important class,
we know that it already will have a border to the left,
and I now just wanna change the color of that border.
And that's what we can do
with that border-color CSS property.
Again, the alternative would have been
to redefine the entire border-left again,
just with a color this time.
If I comment this out, that would lead
to the same result
but it's a bit redundant
since we know that we already have a border
and we just wanna change a color
and hence, that's the way I'll do it here.
And if I save this,
now the text is on the same level again.
So now we also have
that important highlighting feature here.
Now, speaking of highlighting,
I also wanna highlight the word don't here
in this sentence.
And I wanna change that link styling.
Let's start with highlighting don't here.
To highlight a single word in a text,
we need some way of selecting it with CSS.
Otherwise we can only select the text as a whole.
And that's where the special span element comes in.
We can wrap the text, which we wanna highlight
with the span element.
And the special thing about the span element
is that it has no semantic meaning.
It doesn't change the semantics of that text.
You can add it and it doesn't really change anything.
The only reason why we have the span element
is that we can now use it to change the styling.
And therefore now we can select this span element here
to change the styling of don't.
Now, we can either use the span type selector
but if we're using span in different parts of the page,
maybe not all spans should get the same style
and therefore, we might instead wanna use an id
or a class here.
And I'll again use a class
and give it a class of highlight,
and then target this class in the CSS code.
Target highlight here
and maybe just change the font-weight to 900
or to bold here.
And if I do that, you see now this is bold.
So that's now this word being styled.
Of course, you can also style it in other ways,
for example, also change the color, underline it,
whatever you wanna do.
I'm fine with just this bold styling.
Now, I will come back to that element a little bit later
in this section though
when we learn about a couple of new elements
but for the moment,
let's just keep it like this
and let's move on to that link here.
That link is very hard to read
because it got some browser default styling here
and that's definitely not the styling we wanna have.
Therefore, to give that link our own styling,
we need to select it.
And for selecting it, there are different ways.
We could give those links IDs or classes
or if we know that we have the same styling
for pretty much all links on the page,
then we can also select by HTML tag.
And that's what I'll do.
Now I like to keep my CSS code organized,
such that I start with the tag selectors
and then I have class selectors thereafter.
And hence, I'll insert that anchor tag selector here
after the list item.
Though the order wouldn't matter here
since I'm not using order to determine specificity here
in my code.
Nonetheless, I'll add my anchor tag there.
My anchor tag selector.
And now I, first of all,
wanna get rid of the underlining with text-decoration: none
and I wanna set my own color.
Now, I'll actually keep a purple color
because I'll also give this anchor tag a background color.
So here I'll set this to a purpose color of rgb 36, 3, 102.
But also give it a background-color of rgb 255, 237, 177.
And that should be rgb nor rbg.
So for now I'll save that.
That's the style we got.
Now, some internal spacing would be nice
if that background color
would not sit directly on the edges of the text.
And therefore, we can add some padding
because inline elements also use the box model.
There are some differences regarding top
and bottom margin, but other than that,
it's the same as the box model in general.
And therefore on that link,
we can add some padding,
and I will only add a little bit of padding top and bottom
but add more padding left and right.
Two pixels and six pixels should be good.
I also wanna add rounded corners
with border-radius: four pixels maybe.
If we save that, that's the look we got.
Now, for links, we also often wanna have different styles
if we hover over them.
And you learned that you can achieve this
with those pseudo selectors,
which exist to, for example,
select different states of elements.
And we can use the hover pseudo selector
by adding :hover after this tag type selector here.
So after the a selector with :hover,
I select the hover state here.
And I actually also wanna select the active state,
which is when we touch this on a mobile device
or click on it and hold it clicked,
and therefore, we also have the active pseudo selector.
And since I wanna apply the same styles
to both selector, we can use the group combinator
to add a comma after the first selector
and then add our second selector
so that the styles defined between those curly braces
will apply to both selectors.
And that's not just available for pseudo selectors
but for all CSS selectors.
If you've got the same styles for different selectors,
you can group those selectors together
by separating them with a comma
in front of those curly braces then.
This comma-separated selector list.
So here I'll actually wrap this across multiple lines
or the auto format shortcut did that for me,
and now we can define the hover and active styles.
And the only thing I wanna do here
is change the background-color a little bit.
I'll change it to rgb 250, 201, 39.
With that, now if I hover over this,
it clearly gets highlighted.
And that's now the finished link styling.
And that overall is the finished styling
for this main content here.
Hence the only remaining thing which I now wanna add
is my footer at the bottom,
which has another link, which looks like a button,
and which also has this copyright text.
And that's what we're going to add
and style over the next minutes.