Spans, divs and classes, name a more iconic trio. Nuanced HTML/CSS styling


Hey, I’m Anna Lytical and let’s add a rainbow. Before we dive
in be sure to subscribe below and ring the bell to be notified of all my future
videos. Now let’s dive in. We ended up with a new font family and a new font
size but now let’s turn the word amazing into a rainbow we know how to turn our
heading one into red, orange, etc but how do we style an individual piece of this
even if we were to put it into an h1 tag next to it how could we file that one
only because we wouldn’t still be styling both of them this is where HTML
containers come in and you can kind of think about them like the Tupperware of
the web there are two kinds of containers we have a container called
div and a container called span div and span don’t add any styling by default
but they make it easier for you to group elements and style them individually so
you can see where they are I’ll add a border so you can see the div goes all
the way across and the span is just where the text is you can think about
div is a bigger container a span as a smaller container let’s clear this all
out we can put each letter of the word amazing into its own span inside of this
h1 tag and it won’t affect the styling if we tried it with a div it would put
each letter on its own line okay now what we know that we can style the spans
directly we want to we could change this color red that’s gonna make them all red
stuff isn’t this the same problem we were just having well now that we’ve got
each element in its own span we can use a class you can apply a class to
specific elements if we want to make a red class and type a period and then red
this will set anything with the class red to be red but class equals red
inside of this first span tag save this now we just get the first ‘a’ to be red
for orange we can do the same and we should actually make sure to use the
class and I’ll quickly go ahead and do this for the rest of the colors there
you have it your first HTML rainbow and if that isn’t queer enough for you then
do it for every word in the next video I’ll show a bit of an
easier way to add a rainbow and we’ll add glitter because it’s drag! thanks for
watching and don’t forget to Like and subscribe

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *