XHTML and CSS Tutorial - 30 - Styling Using Classes Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what's going on guys it's Bucky and
welcome to your 30th XHTML and CSS
toriel 30 tutorials that's a milestone
someone should give me an award or
something but anyways in this tutorial
I'm gonna teach you guys how to control
styles by using something called a class
now what a class is is it's similar to a
span in the sense that we can affect the
same element in different ways so let me
break this down for you a little more
clear before we've been using elements
to apply styles to everything on the
webpage that was the same element for
example if we had eight paragraphs and
we applied a style to the paragraph tag
it would affect all eight paragraphs but
whatever sane alright Bucky I want half
my paragraphs to be read and half of my
paragraphs to be green well we can't
apply a style to the paragraph tag
because it would affect all of the
paragraphs so in order for us to get
more control or more customization over
our webpage we need to use something
called a class now let's go ahead and
well we might as well use that paragraph
example so let's go ahead and make two
paragraphs on your screen so the first
one can be like let's go ahead and type
I want this text to be red explanation
point because we really mean it so let's
go ahead and copy this and paste it but
we'll change this paragraph to boy oh
boy I wish I was green and why I
capitalized green I have no idea but I
did it what are you gonna do about it
so anyways we have two paragraphs one
where we want the text to be red and one
where we want to text to be green so
every thinking all right maybe I'll go
ahead and for this paragraph go ahead
and do red and for another paragraph go
ahead and do green but that's not going
to work because it's either gonna make
all your paragraphs red or all your
paragraphs green so what is the solution
to this problem well the answer my
friend you
it's classes so in order to make a class
here's what you do the first thing you
do in order to tell CSS you're going to
be working with the class is put the
period or a dot whatever the heck you
want to call it and now name your class
anything you want except the cuss word
because that's just rude so I'm gonna
name mine red text by the way you
probably want to name it something
descriptive where don't name it like
baked beans and applesauce because that
has nothing to do with the red text a
name is something that you notice what
it is
so anyways go ahead and put your period
and then write the name of your class
and then inside your curly braces what
you want the rule to be I want color red
so anything that belongs to the class
red text is gonna have red text
simple enough so let's go ahead and add
another class just so I can show you
guys that you can name it anything you
want I'm gonna go ahead and name this
baby green Goblin's that sounds like a
name for a mom what's that show legends
of the Hidden Temple but was green
Goblin's even a thing as I said let me
see silver snake purple penguins and
green Goblin's might as well anyways
like I was saying so now we have a class
red text and another class green
Goblin's and let's go ahead and make the
rule for green Goblin's anytime anything
belongs to the class green Goblin's
their text is going to be of course
green hence the name green Goblin's so
simple enough so now you're saying
alright let's go ahead and save this and
see what happens if you just refresh it
check it out our paragraphs are plain
old plain old because we didn't apply
the class to those paragraphs yet so in
order to do that here's what you need to
do for this paragraph since we want this
one to belong to the class read text we
need to add an attribute called class
and we need to set it equal to the name
of that class but don't include the
period whenever you're right it is your
XHTML attribute just go ahead and drop
the period
and write the name of your cost which is
read text so go ahead and copy that and
paste it in here so now let's go ahead
and save it refresh and see what we got
now this paragraph is the only paragraph
that belongs to the class read text so
this is the only paragraph that's going
to turn red so now you can see that we
have some more customization so now if
we want this paragraph to belong to the
class read text and this paragraph to
belong to the class green Goblin's
go ahead and save this in refresh we can
see that this text is now green so
before this tutorial we really had no
way of segregating the two paragraphs
and you can make them any color you want
I chose the red and green don't choose
black and white because that's just a
racist and anyway it's like I was saying
we can now segregate the classes and add
more customization to the same element
whereas before when we had one element
we had one rule where affected all the
elements on the page all the paragraphs
on page all the headers on page they got
the same rule well now we can split them
up and for this example it wasn't really
useful because I mean we could just use
span or anything we could even use a div
but this is the most useful way anyways
what am I trying to say here later on
once we start developing websites that
have like hundred of elements per page
this is gonna be a huge huge help for
you guys and you guys will see later on
just how helpful this is so this is
probably a tutorial that you want to put
in your favorites because you do not
want to forget about this one so thank
you guys for watching that's all I have
for you guys for this tutorial so I
guess I'll see you in tutorial number 31