XHTML and CSS Tutorial - 28 - Style More Than One Elements & Span! Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what is going on everybody welcome back
to your 28th CSS tutorial and this is
gonna be an amazing story because in
this lesson I'm gonna be teaching guys
how to apply styles to more than one
element at a time because before we had
to take each element and apply one style
at a time and it took a lot of time and
I'm just way too lazy for that so I'm
gonna teach you guys how to save some
time and also we're gonna be learning
something else if I don't run out of
time in this video so the first thing we
need is just go ahead and add some
normal text on your web page not up
there down here in your body this is
normal text and under this just go ahead
and make a header one you can actually
make whatever header you want but I
chose header one why not and go ahead
and row it right like this is header one
in it and under your header go ahead and
make a paragraph there's my opening P
and in your paragraph text just right
this is a paragraph or anything you want
so anyways like I said what I want to
teach you guys had to do is apply styles
to more than one element at a time so
before what we did is we had a tag for
example our header tag which we would
put h1 and then we would go ahead in
there curly braces apply whatever style
property value we wanted to and then
under that we would have another thing
like P for paragraph and then in here we
would apply whatever same style we want
but what if you had this crazy idea that
I want to apply the same style to two
different tags for example I want to
turn all the text and my paragraph read
and also all the text in my header read
so if we wanted to apply the same style
to more than one element at a time
here's a nice little shortcut for that
instead of writing on several different
lines we can go ahead and write h1 just
like before and we can write a comma and
then after that go ahead and add your
other element on the same exact line so
this saves you the trouble of not only
having to add many elements but on one
line right all the elements you want you
just have to remember to set
rate them with a comma and then you only
apply that rule once and when you apply
it once it's gonna affect all the
elements you told it to so like I said
it saves you some time so let's go ahead
and check out an example right now if we
go ahead and take the property color set
equal to red or something simple
something that shows up good and go
ahead and save that now check it out the
normal text stayed the same right there
because it didn't get affected with our
CSS but the header and paragraph both
turned red even though they're on the
same line and we only said that CSS rule
color read one time it applied it to
both the paragraph and header one
element so again like you can see this
saves you a whole lot of time whenever
you're applying the same style to many
different elements and I did it with two
elements in this example but you can do
with three four or five however many you
want so anyways that's what I wanted to
show you for the first half of this
story now let's just go ahead and delete
everything because that was simple
enough what I want to show you guys now
is something called span now before I
taught you guys how to apply styles to
entire elements for example and that's
in the lesson I just showed you how
would you apply the style to an entire
header or how would you apply a style to
an entire paragraph but say for example
you have a paragraph let me go ahead and
make one real quick on your screen like
this and there's a bunch of text in it
let me let me just type some stuff this
is my first para and I love carrots and
apple pie so you have this wonderful
paragraph on your screen and this
website is looking pretty good so far
but you get this crazy idea that maybe
you want to apply a CSS property to you
know maybe just a couple words well we
know that we can't apply it to the
paragraph or it's going to affect
everything so how do we solve that
problem
well what XHTML did or the wonderful
people who made it they invented a
special XHTML tag and it's called span
EAN and whenever we want to effect just
a group or a block of text what we need
to do is we need to surround that text
with our span tags so let me go ahead
and surround like um I love carrots with
a special span tags now this is a double
tag so it has an opening and closing
span and let me go ahead and end it
right here span in our scene all right
bucky so how do i actually apply a CSS
rule to this well again just like any
other element just go ahead and type the
element name which is span up here and
I'm not just making this word up you
can't like write your name and put it in
here and expect it to work
span is actually a built-in thing so you
know don't go making up words on me
so anyways in your curly brackets just
write it like you write any other normal
CSS property so let's go ahead and
something different than color let's go
ahead and change the font weight this
time let's change this to bold and also
might as well change the color to color
change it to green I should look pretty
good so now let's go ahead and save this
and refresh and check it out none of the
paragraph is affected but your span
which is pretty much like custom made
tags this might be easier way to
understand it that is only part that's
affected so if you ever come across this
problem where you want to apply a CSS
rule but you don't want to affect the
whole tag you can insert these custom
span tags and then only the text that's
in between those tags is going to be
affected so that's pretty sweet and
again like I said span is a keyword that
you need to use you just can't use any
word you want like your name or your
favorite food you need to work use the
word span or else your browser's not
going to understand it so anyways that's
all I have for you guys for this
tutorial so um thank you for watching
and don't forget to check out my next
lesson