Creating a website can involve a lot of code including various HTML elements and accompanying CSS properties to style them. Notably, a lot of that code can be text that needs to be modified to fit well on the page and be visually appealing.
This is a prime example of how the CSS shorthand methods can be used. In past articles this option was covered for both CSS background and border properties. This allows a developer to add in property values to style an element without having to add in each individual style inside the CSS brackets. Instead, they can all be added on one line.
In this brief tutorial, you will learn how to do the same shorthand styling method with the CSS font property. Sample code and images will be provided in the guide to help you along. Feel free to experiment with your own code to see how it works.
What is the CSS Font Shorthand?
The shorthand method of styling is just as the name suggests, a shorter way to style in CSS. To make easy sense of this, first take a look at the following HTML and CSS code examples.
Here, you have a quick sample HTML code setup for testing. You may notice the use of ids on the paragraph tags. If you are not already familiar with how to use ids or classes on HTML elements, please refer to this article for a quick tutorial on the process.
<body> <h2>Udacity CSS: Font Shorthand Tutorial</h2> <hr> <p id="sample1">Howdy reader! Have a great day!</p> <p id="sample2">Hello there friend! Cheers to you!</p> </body>
With no CSS styling applied on to the page, this will be the output.
Moving over to the CSS stylesheet, you can apply individual font styling to the target HTML elements. In this case, the first paragraph tag with the id of “sample1” will be used.
#sample1{
font-family: "Times New Roman", Times, serif;
font-size: 30px;
font-weight: bold;
font-style: italic;
}With that bit of code saved and the page reloaded, the resulting output should appear as shown in the image below.
As you can see, the styles properties were all applied without issue on the first paragraph element. That is how the normal font styles can be written in for use.
How do I use the CSS Font Shorthand Method?
Using the shorthand method is easy to do. You simply call the property named “font” and assign the values you want to apply with spaces in between each. You can add values from the following CSS properties in the shorthand method.
- font-size/line-height
- font-variant
- font-weight
- font-style
- Font-family
Important Note: For the CSS Font Shorthand method to work properly, it MUST have values for font-family and font-size set. If they are not, the shorthand code will be ignored by the stylesheet.
Take a look at the sample CSS code below for both of the paragraph elements. You can see the use of the shorthand option in the “sample2” element.
#sample1{
font-family: "Times New Roman", Times, serif;
font-size: 30px;
font-weight: bold;
font-style: italic;
}
#sample2{
font: italic bold 30px Times, serif;
}As you can see from the sample code, the shorthand method only takes one line as opposed to the four used before. This will still give you the same visual output as before.
Why Should You Use The Shorthand Method?
Using the CSS font shorthand method to set values for an element is a great way to reduce the code lines and organize your details. Having a large set of sprawling code can become overwhelming, especially when the project grows.
However, it is something that should be discussed with other members of a project as it is not always the best solution. Not every person may feel it’s best to use the all encompassing shorthand method.
One thing to remember about using the shorthand option is that it sets values for all of the properties included in its reach. For example, take a look at the sample HTML and CSS code below.
HTML Code
<body> <h2>Udacity CSS: Font Shorthand Tutorial</h2> <hr> <p>Paragraph Sample Element</p> </body>
CSS Code
p{
font: italic bold 30px Times, serif;
}This gives you the following output, much like before.
Any property values that were not set in the shorthand are considered to be set as the default values for the specified properties. This can lead to values being reset in the stylesheet. For a quick visual explanation of this, take a look at this CSS code.
p{
font-weight: bold;
font: italic 30px Times, serif;
}In that example, the property of font-weight was set to bold. However, note that the font shorthand was used below it. Remember that the shorthand method covers all of the values within it. This includes the font-weight property.
As the font-weight property was not set in the shorthand declaration, it will now be set to the default of none. This results in the set font-weight property above it being reset providing the following output.
As you can see in the image above, the bold effect applied is not present. It was reset due to the use of the shorthand method below it. This is something to keep in mind when working with the shorthand method on any element.
Great CSS Concepts to Learn
Diving through the various options and tools available in CSS can be a bit overwhelming at times. However, it’s great to remember that when you are first starting out, it’s perfectly fine to feel that way.
Sometimes knowing the right direction to look towards or at least the ground floor concepts to work on can make all the difference. As a suggestion towards that goal, the basics of the CSS box model is a wonderful place to start. Knowing how the box model operates provides a wealth of understanding on how your HTML elements are working together.
Once you have that out of the way, the concepts of CSS Grid and Flexbox positioning are both amazing pieces of knowledge to grab. These areas not only help you understand how to make your content sit properly, but also how to dive into more creative style ideas as well.
With whatever you choose to focus on, remember to have fun and don’t be afraid to fail. It’s part of the natural process of progress. The end result is something you really want to stick around for.
___________________________________________________________________________
Why stop at just web development? The power of programming is empowering people to do even more with their designs. If you are looking to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
