From the course: Emmet: Fast and Efficient Web Coding
Emmet and CSS
- Not only can you use Emmet to quickly create HTML but you can also use it for writing CSS. As we've discussed, working with Emmet in HTML is pretty straightforward. After you learn a few key concepts you can pretty much just run with it on your own. With CSS though there are literally hundreds of snippets to memorize. It's great to have so much functionality. But how can you possibly take it all in? The good news is, is that Emmet uses abbreviations that are completely intuitive. In fact, in most cases, the first abbreviation you think of to try turns out to be correct. Here are a couple of examples. If I'm trying to create text align, I can just use T A. And when I hit tab, it'll expand to text align. If I want to go ahead and create a color property I can just type C and hit tab and it'll expand out and show the color property. Many abbreviations are triggered by a single character and some will use a several character combination. Let's look at some basic components of Emmet's CSS abbreviations and how they can speed up workflow. CSS gives values to properties like font size, margin, padding, et cetera. Here I have a rule for an H1 tag and I have a number of various properties that I've specified. Let's go ahead and let's write this exact same rule but let's do it using Emmet. I'm going to go ahead and I'm going to open the H1 selector with the curly braces, and then I'll begin by mimicking what we have right here. I want to create border on the left. So I can do that by typing B L and hitting tab. And then the blinking insertion is waiting for me to insert values. I'm going to do undo and I'm going to write B L plus when I hit tab now, it actually expands out and add some default values. Now, of course, these might not be the values that you want to use every time, but it's a starting point and you can simply change the ones that you may need to. I'll click the end key to get to the end of this line of code. I'm going to hit return and now we'll create our color. So I'm going to hit C tab and it automatically puts black. I'll need to go ahead and just redefine the hex value to be the color that I want to display. I'm going to click end again and now we'll create our font size. Font size is going to be F Z and then it'll expand out to font size and I'll write 30 pixels. We want to go ahead and we want to create font weight. So font weight is just going to be F W hit tab and it expands. And we can specify that we want to use normal. And I'll go ahead and hit padding. I'm going to do padding left, so P L. And we want the value to be five pixels. I can actually just write the value now too by putting P L five and hitting tab, and that'll expand out. We'll talk more about that shortly. And then finally I want to do a text transform capitalize. Text transform is, you guessed it, T T. And then we'll go ahead and change the value to capitalize. I've really found that Emmet helps me to remember code more easily. Abbreviations are simply easier to remember. You'll begin to learn new CSS properties and only have to memorize the abbreviations. You needn't worry about the semi-colons or spaces. Emmet does all of that stuff for you. Emmet lets you quickly type CSS like abbreviations and automatically expands them into full blocks of code saving you a ton of time and hassle.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.