Understanding CSS Shorthand

While CSS provides many properties that can be controlled in declarations, doing each one individually can be very tedious. To help designers work more efficiently, CSS has some shorthand properties which apply their values to several related properties simultaneously. For example, the border property is a shorthand property that applies values to twelve different border properties at once!

For example, a single CSS declaration, such as

border: 1px solid black;

is the same as writing the following group of declarations:

border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: black;
border-right-color: black;
border-bottom-color: black;
border-left-color: black;

Exiting code block

As we can clearly see, CSS shorthand properties save a lot of typing and space. There are other shorthand properties we will be looking at today.

Understanding Multiple Value Syntax

In addition to the shorthand syntax, that border declaration is an example of using the CSS multiple value syntax. Some properties, such as border, can be given multiple values, separated by spaces.

The effect of giving a shorthand property multiple values depends on the property in question. We will be looking at more of this later in the workshop.

NOTE: Providing more than one font in a font-family declaration is not the same as multiple value syntax; it is instead a unique feature used for fallback fonts.

Creating an Aside Element

The aside element is another semantic structural element designed to markup content that is not directly relevant to the surrounding content.

As we scan our document, let's say we decide that the image and the "experience what is possible..." paragraph make more sense as an aside. With HTML5, we can now represent that role with the aside element.

Step1. Place the cursor on a blank line immediately after the first h2 element.

Step2. To create the aside element, type:

<h2>rediscover yourself</h2>
<aside>
<img src="images/emmehorse.jpg" alt="Emme walking with a horse" />
<p style="color: brown;">Experience what is possible with Emme and her horse partners...</p>
</aside>

Exiting code block

Step3. Save and refresh index.html.

Again, because this is a structural change, you should not see any change in the viewport.

Styling the Aside

To make our aside look more like an island of content, isolated from the rest of our document, we can give it a border using CSS. Let's do that now with a new rule that targets aside elements.

Let's place that new rule with the other element rules in our stylesheet, to keep similar selectors grouped.

Step4. To create a rule that targets our aside element, type:

color: #ccccff;
}
aside {
 border: 1px solid black;
}
footer {

Exiting code block

Step5. Save and refresh index.html.

The aside now has a thin black border. The border stretches all the way across the viewport, because the aside element is a block element. To make this border look less visually jarring, we will have to learn about how CSS can control element positioning.