Back to our content.
I want to make more progress towards our desired end result
to that end result we want to have for this first webpage
we're building here.
And for that,
I actually want to highlight my daily goal text.
So the concrete goal I have for today,
because I have to use two paragraphs,
And if we ignore the link, they look exactly the same.
Got the same style, same size and so on.
And of course that's no problem,
but it would be a very common requirement that you maybe
wanna style some element differently than the average
elements of the same type, so that you don't want to apply
all the paragraph styles to all the paragraphs,
but that some paragraphs should have their own styles.
And the problem at the moment is that with that P selector
here in our CSS code,
we target all the paragraph elements on the page.
And now I want to change the styling for one specific
paragraph, this paragraph to be precise.
Now how can we set different styling
for one specific paragraph?
We could bring back to style attribute to directly target
this and just this paragraph.
But whilst this would work,
it would mean that we have some CSS code directly in our
HTML file and in our HTML elements.
And then we have some CSS code in this block
of CSS code in a separate CSS file.
And whilst this would work,
this is simply not something we want to do,
splitting our CSS code like this
will make it harder to maintain as our website and
its code base grows.
Instead, CSS gives us other tools
for selecting single elements.
For example, besides selecting by element type,
which we're currently doing in all our CSS rules,
we can also select by ID.
We can give our HTML elements an ID, a unique identifier,
and every HTML element can receive such an ID.
And here I'll give this paragraph an ID.
So this ID attribute,
which is one of the officially supported attributes.
And then the value is any unique identifier of your choice.
For example, today's dash challenge.
Now I'm writing it like this instead of like this,
because whilst this is,
is typically how we would write text as a human.
It would be harder to use in code when
we want to select by that ID.
When creating a unique identifier in code.
So when you're creating a unique ID here in code.
You want to use this notation where you have all lowercase
words and you replace white space with dashes
so that you have today's challenge like this,
no special characters, no white space, all lower case.
That's a very common way of creating machine-readable unique
IDs because no matter where you're going to use that ID,
for example, in your CSS code, as we'll do in a second,
the browser will have no problem parsing this.
So now with that id assigned,
we can go back to our HTML code and maybe at the bottom
though, the exact position doesn't matter.
We can now add a new CSS rule.
And now we want to add a rule where we don't use the type
selector, but instead the ID selector.
So we select an element that should be affected by this
style, by ID.
And we do this by adding a hash symbol here and then
repeating that ID which we picked
today's challenge in my case with no white
space between the hash and the ID name, the ID value,
this creates a so-called ID selector and after the type
selector and the pseudo selector with hover,
which we had earlier,
this is the third kind of selector we learn about.
Now, there are a couple of other selectors as well,
which we're also going to learn about through out
this course, once we need them,
but this is one of our major CSS selector,
which is worth remembering for selecting items by their ID.
And it is worth mentioning that IDs should really be unique.
So you shouldn't assign that same ID on some other element.
You should not do that.
So hence this rule will per definition only select and
target one single HTML element in our HTML code.
And then here we can again,
write our CSS code as we learned it.
So we can, for example, change to color.
And here again, I prepared a color,
which we can use where I set the red value to 107,
the green value to 96 and the blue value to 83.
And if we do that and I save all files, if I reload,
now we have this slight orange color
on this second paragraph.
Now, in addition,
I want to increase the font size now the size of the text,
and I want to make it bold.
And how can we now achieve this.