CSS Tutorial for Beginners - 07 - More on Classes in CSS Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the seventh tutorial on CSS
and we're continuing on with CSS classes
now if you didn't watch the last
tutorial you should go watch that right
now because that was the first tutorial
we did on classes now we're going to go
ahead and use the same exact code that
we used from the last tutorial except
we're going to add one little addition
here we're going to add a block quote
and that is going to be right here so
below the P element tag add a block
quote and I just put in here this is an
indent but you can put whatever you want
and so that shows up right here so
that's the latest addition to our code
so in the last video of course we wanted
to apply different rule sets to our P
element tags and we did that with
classes so we had a blue class and we
had a purple class and that allowed us
to go ahead and individually style these
P element tags rather than do it
globally and you can see that right over
here now
what if we want to add this blue class
that we created right here this rule set
to a different element and in this case
we want to add it to this block quote
well we can go ahead and do that so
let's go ahead and just do some copy and
pasting here and it's the same exact
format we'll put it in the first tag of
the element so we'll just copy and paste
that and so again we can use this class
over and over again in all the different
elements that we want to now of course
up here now we're just specifying the
paragraph element tag so we have to
remove the P and now this will
generically apply this to all the
classes that we have that are tagged
with blue so let's go ahead and save
this and we'll close this out and you
can see now we've got our blue text and
our 25 pixel size for our font size and
our Helvetica font and so that's kind of
a good way to use classes you can apply
it to as many different elements as you
want but you just have to take off the
individual element in front of it so if
you just put a dot and then the class it
will apply it to all of the Blues that
it finds down here every single blue
that it finds it will apply it to it
every blue now
you can apply multiple classes to an
element and we do that by adding a class
name right past our existing class name
and so let's create a class that just
underlines text so we'll just call that
underline appropriately enough and now
let's go ahead and create our CSS rule
and we're just going to call this dot
underline sment so we're just going to
generically apply this to all the
underlying classes that we find and the
CSS rule to underline is - text -
decoration and then underline so that's
the rule - underline text and if we go
ahead and save this we'll close this out
and there you can see we've got our text
now that is underlined and now the cool
thing is we can throw that underline
class wherever we want so let's apply it
to our P element tag as well so we can
reuse it reusability that's what CSS is
all about and we saved it let's go ahead
and reopen this and now we've got
underlined text in several different
areas okay that's going to do it for
this CSS tutorial I will see you guys in
the next video