Variation 4: highlighted words in text

- [Instructor] So for variation number four, we're switching on to Jacklyn's design. Here what's she's done is designed for Connie, who is a visual designer from Florida and in here, what she's done is added some colors into some texts. How do we go about doing this? Well what we can do is use another tag called a span tag. Now a span tag is very similar to a div tag. Div is more for general bigger areas of content, while span is kind of a like a link within texts but just a generic area for text.

So, how do you use a span tag? Now what I want to do, is am gonna go back to my code and which words do I want to highlight. Maybe something like independent digital artist maybe, let's do that, so we gonna go to our text our index dot html and find this. So, I want to highlight these three words and maybe some other things like geometric abstraction. So, what we gonna do is we gonna just quickly put a span tag around this and this automatically takes that, am gonna cut that and put that at the end.

So what am trying to do here is cut out three words into their own group the rest is gonna stay as it is. Now, what we'll see on our page is nothing. Now, how do I highlight this area and say, well this one should be in pink. What we can do is just say well, I want this h1's span tag to be a text color. So, here what we gonna say in our style sheet is, well let's kind of group this together. So this is the section h1, maybe this is part of the h1 itself let's say.

So, h1 span you have some span tags in there now, and the color of this is the salmon color. So am just gonna pick this from here, nice. And what we see on the page is these words highlighted. Now if I did wanna highlight a different word in different color, just like Jacklyn's done some pink and green for instance, what I can do in here is do the same thing and add a class. So, for instance what I can say is maybe, geometric abstraction am gonna select this span tag, and then take this end point and put it around abstraction, and in the moment because they're both span tags, they'll both be in pink but I want the pink one and maybe a blue one or a green one to be a different color so let's highlight that.

So let's highlight that by giving it a class of green let's call it just a kind of highlighter, generally I don't like using things like span class green, green is too, if we changed it to blue later on it's not green anymore. So for now we'll just kind of go with that. So what we gonna say is here we gonna pick an h1 a span tag, but not just any span tag just the classes, the labels of green. And then we gonna do something like this, we gonna give it a color of green.

Now we don't use the green in the site at the moment so am just gonna quickly get it from my brands here it is, which one is it maybe it's green. We just gonna add it up, so I can pick it out there it is, and this is gonna be hash we need the hash at the start we paste that in, there we go, so let's just check this out there we go it's in green. So what we've done here is we've highlighted two different words using span tags. Span tag is just a generic tag for holding text.