Hi there, this video we are going to make this part of the single line bold, by leaving this not bold, using something called a Span Tag. Looks like that, we're using a Span Class in this case. It just wraps around, just the words we want to change, and it doesn't break on to two lines, and you style it in your CSS. Let's jump in, work out how to do it, and then, why we'd want to do it, plus, if you've already done a Span Tag you're like, "Don't need this one," flip to the end of this video, I've got like a secret extra little bit that we're going to do, in terms of changing our preferences. A little tasty treat at the end. All right, let's get started. 

So let's talk about Word Wrap, I want to wrap just around this line here, well, just these words here. So let's figure out how to do it, there's kind of two ways. So depending on your research project, depends if you've got, yeah, depends who you got. I'm going to show you both ways. So first of all find the text. We need to wrap it up in a Span Tag. So I'm going to use my sweet 'Command-Shift-P', or 'Ctrl-Shift-P', and I'm going to type in 'wrap', wrap even. So I'm going to wrap with our abbreviation, and we're going to type in 'span'. So either side of it needs span. S-P-A-N, in my accent. You don't have to wrap it, you can just type it on either side. 

Now you've got two ways of implementing it. You've got kind of straight up inline CSS, or you can do what's called a Span Class. We'll do the straight-up CSS straight in here. What you do is you style it, and you start doing, what is it? Font weight, you do. It's called an Inline CSS , we're going to go to our bold, and that hopefully should do it. Let's have a little look. 'Refresh'. If it's not working, go 'Live'. Now it's working; awesome. 

So old version, wonder why that died, but anyway we're back, and that has made it bold. And that is perfectly fine, job done, if you did it that way we're in business. The only trouble with this way is, let's say we also want to color it, so we want to change the color. So you got to put in semicolon, you type in color like we normally do, colon, and I'm going to pick a random color. Forest green, save it, let's have a little look, and it's Forest green. Let's say we also want to do something else, and you can see how, ugly is not the word, it's, yeah, ugly is the word. It just gets long, and, there's so much going on here, this should be over here in our CSS. 

So the other problem is it's not reusable. Say I want to do this again, I want to wrap something else, I'm going to have to grab that bit, and let's say I want to do it to this last word in our first tab here. So I wrap the beginning there, and it's giving me automatically my Span, at the end, closing other spans, so opens up. This is all our stuff, there's our word, closes with a '/span', and it works, but I've got it twice and it's nothing to get big and heavy. So essentially nothing wrong with that but let's show you a classier way to do it. That's a good word, classy, because it's class; see what I did there? 

We're going to give this Class a name, we're going to call this one 'Bold', and over here let's style it there. Maybe just before the tablet starts. So the end of my Global, so this one's going to be called 'Bold'. You kind of see the nicer-ness of this. So what is it? Font Weight, and we're going to pick 700. That's just a classier way, you can't use the joke twice, Dan, come on. Just a nicer way of applying it. Instead of Inline it is this, and the cool thing about it is it's reusable. Because we could call this bold, we could call this one, like, 'Highlight'. Then we get to add a bunch of stuff to it, 'highlight'. Here we could say, it's going to be a color of, random color, what's today? Medium purple. And we can do Font Size, you get what I mean, right? 

20 pixels, just for giggles. So this is quite nice, it's bit heavier over here. Let's have a look how it's doing, but I can reuse that as well. So I can say down here, you are also going to be a Span Tag of, you. Cool. Random shortcut. What do I do, there we go. You are going to have my 'Command-Shift-P', 'Ctrl-Shift-P'. You're going to have a Span Tag, and you're going to have a Span Class of, what was it called? Highlight. All right, let's have a little look, there we go. I'm going to switch it back to bold, and one thing we'll do before we go, a little tasty treat at the end of this video. I'm going to show you something cool, so let me just get this back to, I'm going to leave it as Highlight, and just get rid of this. How does it look now? Perfect. The last one's bold, I'm okay with that, but that was the thing I wanted to do. 

One thing before we go is, explain why we're not doing it in like, say, two separate Div Classes or P-tags. Let's just have a little look. I'm going to close down the Style for the moment, just to show you what it looks like. So I'm going to duplicate it, I'm clicking anywhere in the Div, and I'm using, it's 'Option-Shift-down arrow' on a Mac, and that will be 'Alt-Shift-down arrow' on a PC. And I'll look at doing it this way. Let's separate them out so you can see. 

So let's say we get rid of our Span Class, we're going to do it a slightly different way. I'll pretend that I only want to write the word Daniel. Make it bold, just Daniel. So what I could do is I could create-- so I've got Div tag for logo, I can make two P-tags, right? I'm going to wrap that in a P-tag, no, wrong one. Let's go 'Command-Shift-P', wrap with abbreviation, P-tag, great. That's kind of nice-ish. I'm going to wrap that up. The first big problem is, even though it's on the same line, because a P-tag is a Block Level tag, even though it's on its own line, let's wrap this in a different P tag, P, let's go wrap and tag, previous, previous, let's tidy that up. 

Now when I'm moving around in these big chunks some-- on a Mac I need to-- I don't know if this is true on a PC, it probably is. I hit down the 'Option' key, and use my left and right arrow. That's how I kind of jump across these lines. On a PC give it a try, it might be 'Alt', left and right arrow, and if I hold down the 'Shift' key at the same time, so on my Mac it's 'Option-Shift'. It kind of selects that big jump, so I can kind of hold 'Option Shift', and click my left arrow, you can see, it just kind of highlights all of that. That wasn't what I was telling, but these are two separate P-tags, so now I get to style this with a Class of 'Highlight', and it will work, kind of, except, now in here, oh there's my second one there, it is on two separate lines. 

So I wanted to be on one line, and the Span Tag does that. It is Inline, not Block. So I could now go and find my P-tag, and say, if it's a P-tag inside of logo, display Inline, or Inline block, so that it doesn't drop on to its own lines, and that would work, my problem with it though is that Google, its search engine will see that as a separate bit of content from this. So let's say we did it for logo, so logo was bold but this wasn't. They'd end up on two separate lines, and Google would not connect the two easily. It doesn't know you're all about logo design, it knows you're all about logo, design. So they're two separate kind of parts to the page. 

So I like to make sure, especially for things like H1s and Headings, very often I want them on two lines, and I want to do some different styling to those two lines, just because I'm a Designer, and unfortunately separating with P-tags or two H1s, it's going to break up the content, so that it might not string together for the search engine, and this is just a little nicer, right? All right, goodbye, you, let's tidy it all up. Oh, I promised a little treat at the end. Cool, so I'm going to open up my 'Styles', double click it, drag it over here. 

Every time I close down VS code to go have lunch or go to sleep, I wake back up and I have to do this, you've noticed it before. We have to go to 'View', well I can't Word Wrap again, there's a shortcut, but imagine if we just turn it on forever. So I'm going to show you some parts of going through, and editing this thing, and changing the preferences. It's kind of weird compared to other programs. So what you do is you go to 'View', 'Command Palette'. We've been using our shortcut, 'Command-Shift-P' on a Mac, 'Ctrl-Shift-P' on a PC. You end up at this, and we've been using it to do Emmit Wrap. What we want to do is go to Settings, and out of all of these, we want to go to this one that says User Settings. So open that up, and in here it's worth taking some time to go have a little look through. Things that you were like, "Oh, I would like to change this", the one that I want is Word Wrap. 

So this little search box up here is searching the settings, and I can say 'wrap', and there's Word Wrap, and the controls, it's off by default. We're going to turn it on by default, and we can turn it off if we don't need to. There's all sorts other fun stuff in there, but that's the one I want at the moment, it's, close down Settings, and now every time I open it up, for the rest of this course, it's going to Word Wrap, hopefully. 

All right, that is it, Span Tags. We did Span Inline CSS, so just a Span Tag, and now we've done a Span Class. If you did it something slightly different, how else could you have done it? If you did something else different and it works, send me a screenshot of the code that you made it work. Put it in the comments, or tag me on social media. I'd be interested to see what other ways you-- creative ways you made it work. All right, that is it for Span Tags.