CSS Tutorial for Beginners - 06 - Using Classes in CSS Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the sixth video on beginning
CSS we are going to use the code from
the last video that we did and continue
on now in previous videos a lot of the
CSS rules that we set up were generic
rules so that is when we set the rule up
it would apply to every element on our
webpage and what I mean by that if we
take a look here at the paragraph rule
we set up this would apply towards all
of the paragraph elements that we had in
our HTML document so you can see here
everything is read as it should be the
rule was applied to every P element that
it found so even though these are
separate elements P elements it applied
it to every one of these elements
because we told it to do that
now you might ask the question how do I
select these paragraphs individually and
that is where classes come into play and
so let's say now we want this paragraph
right here to be blue and we want this
paragraph right here to be green and so
we have to use classes as I said and so
we're going to come down here into the
element and we're first going to add our
class name here so you add the class to
the element first and then you create
the rule up here so first we'll create
the class and you say class equals so
that's an attribute that's the attribute
and you type in equals and then it'll be
double quote and you put in the name of
the class you want and it can be
anything but you should make this
something relevant so it'll call this
blue because this is going to be blue
text and then we'll close it okay and
then let's go down here and actually
let's not leave a space there and then
we'll go down here and we'll go ahead
and copy and paste this and we'll make
this green text right here so now we've
got our two classes and so we're going
to come up here and now we can go ahead
and select our classes and let's go
ahead and do that and so we put a dot
here now the dot is used to specify the
class that we defined down here and in
this case we're going to call this blue
and we'll go ahead and change this to
blue and now let's just copy and paste
this
rule and we will now create one for our
green text that we want and now we've
selected the P element with the green
class okay so we're all set so now let's
go back up here and I just wanted to
point out pretty much everything else is
the same if you take a look I mean it's
the same brackets that we have here same
type of rules everything else is the
same is just this dot here that we
specify a class now so we're using a
selector and we're selecting the class
with the dot and so let's go ahead and
save this and let's go ahead and close
this out we don't need this anymore and
let's reopen this and there you see
we've got our blue text and we've got
our green text you know what we probably
should have made this purple or
something because we had our if you
remember in the last video we had our h1
and h2 tags green so let's go ahead and
switch that really quick to purple and
we'll change the class name to make it
more relevant and we'll come up here and
call this purple we'll save this and
there you see we've got our purple text
from our purple class and now we've got
our blue text from our blue class that
we created Oh before we go I wanted to
point out one more thing you'll notice
that we put the class attribute in the
first tag so the it's not in the closing
tag it always goes in the first element
tag here and so that's just the way that
works and it goes inside the angle
brackets for the first element tag as
you can see here so it's always inside
the angle brackets of the first element
tag and so that's how classes work and
I'm going to do another video on this
there's some more nuances to this and
we'll cover that in the next video see
you guys that