CSS Tutorial for Beginners - 27 - The SPAN element Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 27th tutorial on
beginning CSS we're going to look at the
span HTML element in this video and like
the div element it goes hand-in-hand
with CSS so that's why we're going to
deal with this element in the CSS series
now a span is similar to the div but on
a much smaller scale a span element is
inline and selects a small chunk of HTML
so maybe some text or something inside a
paragraph and so again it's inside an
element as opposed to the div which
selects several elements so if we open
up our HTML code we can see that first
div that we created in the last video
this div main we've got several elements
here we've got a header element we've
got a paragraph element now a span might
select some text inside a individual
element so again a div compromises
several elements a span works inside a
individual element that's why it's
called a inline element so again you may
want to select some text here now one of
the popular ways to use the span HTML
element is to highlight some text that
you want to stand out on your web page
so let's go to our individual paragraph
that we created of course with this ID
and what do we want to highlight in here
let's highlight this area right here
that says hagfish lampreys and bony fish
so what we're going to do is we're going
to put a span so we'll embed this and I
just cut and paste this right here I had
already typed it out so this is going to
be a class so what does a class mean
that means again we'll create a class in
our style sheet in a moment of course
we're going to call it highlight so
again here's the HTML element span and
then like every HTML element we need to
close it and where do we want to close
this will close this after a bony fish
so let's do that and let's go ahead and
save this and let's go ahead and open up
our style sheet now we'll go
the way down here and let's create a
class and again I already had this typed
out so I'll just copy and paste the
class in here now we're just going to
make this a generic class so remember
the period identifies it as a class and
then everything that is tagged with
highlight will get highlighted with the
highlight class and then so we're going
to use a background color and this is
yellow so it will be highlighted in
yellow so let's go ahead and save this
now let's open up our web page and there
you can see we've got a highlight now so
we selected this HTML text with our span
HTML element now we can do some other
things too we can we can actually make
some this 32,000 here for instance we
can make that red so let's go ahead and
do that and so let's go back into our
HTML and let's find that 32,000 and I'll
go ahead and copy and paste what I
already typed out now we're going to use
this style remember style is for inline
and so again this is a different way we
can specify our CSS so in this one we
created a class we put it in our style
sheet and this one we're just going to
embed the CSS right into our HTML so
we'll use the style attribute and again
we've used that before we're going to
make this red we want this to stand out
and then of course we need to close out
the span of course so let's go ahead and
save this let's open up our web page and
there you see we have the text now in
red so again one way to think of the
span and dilled elements think of them
like containers with the div we are
putting all these elements in a
container with the span we are putting
stuff in a container just inside an
individual element okay that is going to
do it for this video I will see you guys
in the next video