Theory
Theory
Comments

Shorthand properties

There are normal properties in the CSS that control a single display parameter, and there are shorthand properties that control several parameters simultaneously.

For example, the font-size property is normal, since it only controls the font size. Whereas the font property is shorthand, since it assigns six parameters at once: the font size and name, the line height, and several others. The browser always “decodes” the shorthand properties into normal ones. For example, the following is an example of a shorthand property:

font: 16px/26px "Arial", sans-serif;

The browser “decodes” this information into a set of normal properties and their values:

font-size: 16px;                  /* Was assigned in font */
line-height: 26px;                /* Was assigned in font */
font-family: "Arial", sans-serif; /* Was assigned in font */
font-weight: normal;              /* Was not assigned in font */
font-style: normal;               /* Was not assigned in font */
font-variant: normal;             /* Was not assigned in font */

If the value for the normal property was not specified in the shorthand property, then the browser uses the original value of this property during the decoding process. In the example the value 16px for font-size was taken from font, whereas the original value normal was used for the font-weight.

A shorthand property always assigns the values to all of its components. The original values are used for non-explicitly defined components. Therefore, shorthand properties should be used with caution. For example, if you forget to describe the line height:

font: 16px "Arial", sans-serif;

In this case, the browser uses the original value for the line-height, which may ruin the visual presentation of the text.

It’s now time to add a pretty background to the blog page. We use the shorthand background property to achieve this.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>The website of a beginning coder</h1> </header> <main> <img class="avatar" src="img/raccoon.svg" width="80" height="80" alt="Avatar"> <nav> <h2>Recent Posts</h2> <ul> <li><a href="day-1.html">Day One. How I forgot to feed the cat</a></li> <li><a href="day-2.html">Day Two. I want to become a coder</a></li> <li><a href="day-3.html">Day Three. My cat is offended at me</a></li> <li><a href="day-4.html">Day Four. How I almost got sick</a></li> <li><a href="day-5.html">Day Five. I am relaxing</a></li> <li><a href="day-6.html">Day Six. How I failed to understand anything</a></li> <li><a href="day-7.html">Day Seven. Muffin gave me an assignment</a></li> <li><a href="day-8.html">Day Eight. It’s getting very serious</a></li> <li><a href="day-9.html">Day Nine. Or more precisely night</a></li> <li><a href="day-10.html">Day Ten. Summing up</a></li> <li><a href="day-11.html">Day Eleven. Everything should be taken in moderation</a></li> <li><a href="day-12.html">Day Twelve. Everyone loves cookies</a></li> <li><a href="day-13.html">Day Thirteen. I found an article</a></li> <li><a href="day-14.html">Day Fourteen. A New Format</a></li> <li><a href="day-15.html">Day Fifteen. The Selfie Gallery</a></li> </ul> </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found <a href="https://htmlacademy.org/courses">interactive courses in HTML and CSS</a> and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> Skills section </section> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; /* Set the property below */ } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .avatar { border-radius: 10px; } nav { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; color: #ffffff; } nav a { color: #ffffff; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

Goalscompleted

Assign the shorthand background property with the value
#ffffff url("img/bg-page.png") no-repeat top center to the body tag.

Shorthand properties

Comments

Log in

Sign up

Restore access