Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Some of the syntax options in CSS don't really give you any additional functionality. They are just designed to save you time. Shorthand notations are designed to do just that, save you time when writing what would otherwise, be multiple property declarations. Now essentially, the font shorthand notation allows us to define font-families, font-size, font- style, font-weight, font-variant and line-height, all in one property. It is a real timesaver.
But as with any shorthand notation, you need to be aware of the syntax to avoid any unintentional styling. So I have the shorthand.htm file open from the 04_09 folder. And I am just going to preview that in the browser so you can kind of see what's going on here. So we have a couple of headings, we have some lists that list all of the properties that we can set with the font shorthand notation. We have a couple of headlines here and we have another list that shows some of the optional keywords that we can set by using font shorthand notation as well.
We are going to experiment with that in just a moment. So I want to go back up into my styles and I want to focus on the body selector. Now currently in the body selector, we are using three separate font properties to define some of our values for text. We are using the font-family, font-size and line-height. And we haven't talked about line-height a lot yet. We are going to examine that property in just a little bit, but line-height basically just controls the spacing of the lines of text in your files, like your paragraph and thing like that.
So what I am going to do is I am going to remove the -family and just use font. So whenever we are doing the font shorthand notation, that's how we define it, just font and then a colon. Now after that, we need to start declaring some explicit values and we typically need to do these explicit values in order. So I am going to type in normal space normal space normal. Now what are those? Well, this would be font-weight, font-style and font-variant.
After that, I'm going to have the size of the text. So in this case we are going to use 100%, so I am going to use 100%. Now notice that I'm not using commas to separate these guys at all. I've used them here in the fonts tag, but nowhere else. Everywhere else I just need spaces between them. Now we have a line-height of 1.5 and the way that we do line-height in the font shorthand notation is pretty interesting. Right after the 100%, right after the font size, whatever that may be, you can do a / and then pass the value in 1.5.
Notice there is no space, between this at all, no white space, it's all sort of one unit there, and then we follow that with the font stack that we want. And you have to do them in that order. So I am going to go ahead and get rid of those two properties that we don't need any more. I am going to save this and preview this in my browser. And absolutely nothing changed. That's because we are passing the exact same values that we passed before, the only difference is, we are doing it with one line or one property now, rather than three or four properties.
Now you might be wondering about these. Do we have to pass in the values; normally it's not, because that's not really saving me a whole lot of time. No you don't. You can use the extremely stripped-down version of the font shorthand notation. Let me show you the absolute minimalist version you could possibly use. I am going to remove all those normals, and then I am going to remove the line-height declaration. Whenever you do for font shorthand notation, you have to pass in atleast two things. That would be the size of the font and the family of the font.
And they need to be done in that order, size first, family second. If I save this and test the page, the only change I am going to notice is the line-height. Everything else stays the same. So I can go back in and add that line-height back in if I want. 1.5, save, test. Okay, Same thing we had before, We just don't have all those normals on the front end. Leaving those off can sometimes cause unintended consequences. Essentially, if you leave off any of those values, what happens is that normal is passed as a default value, 9 out of 10 times; that's not going to cause you a problem.
But every now and then, it will. So I want to take a closer look at how this could maybe cause you some issues. I am going to go right back down into my styles, just a little bit further down into this little section where it's asking me to add some styles. And I want to add a shorthand class, so I am just going to call it shorthand, and inside that I am going to do font 1.2ems space Arial comma Helvetica comma sans-serif, so we'll do our font stack right there.
And that's going to be my shorthand notation. Because we are not declaring font-weight, font-style or font-variant, the value normal is going to be passed for every single one of those. So if I go down to say one of our headings down here, for example, for headings the default font-weight is bold. If I go in and apply that class, and I just go ahead and apply the class of shorthand, save this file and test it, notice what happens to my heading. It is no longer bold.
It's not bold anymore because the shorthand notation is passing normal as the value for font-weight. It's doing that automatically, and if I'm not paying attention, I can have that value be inherited or overwrite values that I wanted in other instances. So you have to be very careful when using this sort of minimalist strip-down version. Now if you do want to pass one of those values, you don't have to pass all three of them. I could come back into this font shorthand notation and just type in bold. I can just pass whichever one I want, so I could say, small caps for font-variant.
I could say italic for font-style, or I can say bold for font-weight. So if I save this and preview this back in my browser, you can see that now our heading is back to being bold again, perfect. Now if you go down into the bottom of your code here into this bottom list, you can see that it talks about keywords that can also be passed in using the font shorthand notation. Now these optional keywords are basically asking the user agent to use whatever font and whatever formatting they use for these particular items on the page.
They are caption, so if there's a specific formatting for caption that a browser or user agent has, an icon, menu, message-box, small-caption and status-bar. Now I have read a few articles here and then where people have said, well, I don't' know why you would ever use those? Frankly they are very useful, because if you have a widget that you're creating for an application or a web page, and you are unsure of what the sort of native styling is on that particular OS or that particular user agent, you can use these optional keywords and you are going to get the same formatting, let say the status-bar would get in the browser or the icon would get in the browser.
So let's go ahead and try those. You will notice that we have a class called keyword. I am going to go right up here and I am going to create that keyword class, and I am just going to use the font shorthand notation, and let's just go through some of these. I am just going to try icon first. So I am going to save that and preview it, and you can see we have got a slightly different formatting that's going on here. It's using a sans serif font, the font-size is a lot smaller. Let's try menu next. Feel free to try all of them. So I will try menu, and we will test that, little bit larger, but pretty much the same font, may be the last one we will try is this status-bar.
So status-bar and all the browsers pretty much have a status-bar, so we will try that. And that's a lot smaller, we are getting the same formatting that you would get in the status-bar of the browser as well. So the optional keywords, you probably won't use them a lot, but in case of building any type of user interface widgets or applications, you might find them really handy to have around. The font shorthand notation can save you a lot of time. But I really don't want you to lose sight of the fact, that it can pass unintended formatting values to elements if you're not careful with it.
There are some shorthand notations, like margins and padding that we will look at a little bit later that I use almost all of the time that I type this properties in. But with the font shorthand notation, I only use it if I'm extremely confident that the rule that I'm passing in is not to overwrite the formatting of other elements on the page or pass default styling that I don't want. Either way, when you use it, make sure that you test it thoroughly to make sure that you're getting the formatting that you expect.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.