CSS Tutorial for Beginners - 22 - The ID Attribute Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the twenty second video on
beginning CSS today we're going to look
at the ID attribute and you specify an
ID in CSS by using the hash symbol here
and we'll get to that in a minute but
first let's open up our HTML document
that we've been using to explore all of
the CSS concepts first of all let's give
a generic class that we want to use for
all the paragraphs throughout our site
and so we're going to go ahead and do
that now so let's open up our CSS now
what we're going to do is since we're
going to have a generic paragraph we're
just going to call this paragraph so no
longer be paragraph 3 because we want
paragraph 3 to look like all the rest of
the paragraphs in our website so we're
just going to call that paragraph and
what we're going to do now is get rid of
paragraph 2 because that's going to look
like paragraph 3 and whoops I forgot the
class selector which of course always is
this dot so this will be P dot paragraph
and let's go ahead and save this will
open up our HTML document and there you
can see we've got our two paragraphs
that we wanted to look the same now what
happens is this paragraph obviously we
want to look different remember we put
in all this margin space here so this is
a unique paragraph that we are using so
in this case we actually don't want to
use a generic class selector we want to
use the ID attribute and that is what
the ID attribute is for is for a
specific set of CSS code that you want
to apply against one specific element
and so you're not applying this to any
other elements is only going against one
element and so let's go ahead and do
that let's go ahead and come down here
now you might ask well we're already
doing this with a class selector so
what's the difference the ID attributes
pretty much the same thing and the
answer is they do the same thing the
only difference is this is an aid for
you so that when you're going through
your CSS code you will know when you see
those hash tags that this is an
individual set of code that applies only
to one element and so it's kind of an
aid for you think of it like that it
helps you know that hey I'm not applying
this to any other elements in my website
where
is this class selector we're applying
this to many different elements and so
what you do is you put in the hashtag
first so let's do that
and then we're going to continue to call
this pair of four because it is the
fourth paragraph the only thing is let's
put a home page and the reason you want
to put the page here is because you
could have hundreds of web pages and so
when you come down here you want to know
exactly where this is so this is very
readable it's in paragraph four and it's
on the home page and therefore you'll
know where to go to look for it so we're
not done yet though because now we
actually have to put the ID attribute in
the HTML as well so let's go over let's
actually save this first and then let's
go over to the HTML and we'll go down
here and all we're doing now is
replacing the class with ID that's all
you do and then we'll go ahead and put
in the new name and there we are we're
using an ID attribute and as I said they
actually do pretty much the same thing
the only difference is this is for a
unique element like I said so let's go
ahead and save this and let's open up
our index.html and as you see there's no
difference here right the only
difference now is that when you come
into your stylesheet and you're
reviewing this you'll know oh yeah this
is something I'm applying to all of my
paragraphs throughout my website and
then when you come down to this you'll
know oh this is a unique set of CSS code
for my paragraph for element on my home
page and you'll know where to go to find
it but and so yeah you know what we're
also going to have paragraph one we're
just going to keep that blue text so
let's go ahead and make a ID here and
we'll save paraone homepage and actually
let's save this and let's go ahead and
open up our HTML to update the HTML and
we'll put in ID here and we'll put in
our new name let's save this
and let's open up our document and
everything should look the same and it
does and so if we add a new paragraph we
will use this format we will use our
class selector because we want all of
our paragraphs to look like this but
paragraph 1 and paragraph 4 will use ID
attributes because we want these to be
unique okay that is going to do it for
this video I will see you guys in the
next video