Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:11Length:33 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 IntelliSense for CSS Class Names

In this lesson, I will demonstrate an extension that provides code hinting for CSS class names, even if the CSS is pulled from a CDN.

Related Links

2.4 IntelliSense for CSS Class Names

Hello, and welcome back. As you may have noticed, there has been a pattern in the extensions I've been installing so far. And this pattern is that I really like plug-ins that help me to complete my code quicker. I've got two snippets plug-ins and one auto close plug-in, all of which will finish typing out some of my HTML for me. So I really like those kind of plugins and this particular lesson is gonna be no different because I'm gonna use a plugin now that gives us IntelliSense for typing out CSS class names. And what this does is it gives us auto completion for CSS classes such as container here. And the suggestions it gives us in the auto complete feature are going to come from whatever CSS files are linked in our documents, including external links. So if we're linked to Bootstrap, as we are here, it's going to see that. And it's going to load all of those classes, so that when we start typing out a Bootstrap class here, it will auto-complete it. Even though we don't have the Bootstrap CSS files here locally on our machine. So I'm gonna come back to our extensions here and I'm gonna do a search for CSS IntelliSense. And sure enough, before I finish typing it out, we can see it here. It's the second one, IntelliSense for CSS class names. So I'm gonna go ahead and click on Install, and then it will ask me to reload the window. And there we go. We have it down here. So we can click on that and read more about it. And before I mention some broken image links that you might see when you're looking at the documentation here. And this is an example of that, so if you go to marketplace.visualstudio.com and do a search for this particular plug-in, you'll see all of this same information but these images will be working. But again this is basically just an auto complete feature for CSS. So if we jump into our code, let's go to our HTML file and let's say we wanna start over with our container here. And instead of using the Bootstrap 3 Snippets plugin, I'm going to just type this out. So, I'm gonna type in div class =, and you will notice that when we type in our opening quotation mark here that it gives us a list of potential classes we could use. So this is not something that was here before. Before we would just start typing and we'd have to know the class name and type it out by hand, but now we can type in cont and there we go. We can see container or container fluid. And we just click on that or hit Enter after we select it, and it will finish filling it out for us. So again, this is a great auto complete feature that takes a look at all of the CSS on your local files, as well as any CSS you've linked to externally such as this bootstrapcdn link, and it will recognize all of the classes in there. So that when you start typing in class names it will give you that auto complete to speed up your process, and to help you do things a little bit more efficiently. So thank you for watching and I'll see you in the next lesson.

Back to the top