Nothing is more certain to turn away visitors than a slow-loading website, so it’s worth doing everything you can to make your site load as quickly as possible. Common techniques include compressing images and removing unnecessary markup from your pages; however, one often-overlooked aspect is your site’s CSS. With a complex page layout, a CSS file can easily run into the tens of kilobytes, adding significantly to a website’s initial load time.
Fortunately there are a number of CSS shorthand tricks you can use to dramatically reduce the size of your CSS files, and save typing at the same time! Let’s explore them.
Background shorthand
Backgrounds are one area where you can save a lot of space. There are 5 properties related to an element’s background:
background-color: color | transparent | inherit
background-image: uri | none | inherit
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
background-attachment: scroll | fixed | inherit
background-position: [ percentage | length | left | center | right ] [ percentage | length | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
(These are discussed in more detail in the Controlling background images and colours tutorial.)
However, you can declare all of the above properties in a single line by using the background
property, as follows:
background: [ background-color || background-image || background-repeat || background-attachment || background-position ] | inherit
An example
Here’s a selector that:
- sets a blue background colour on an element
- adds a teddy bear image to the background
- makes the bear repeat vertically
- stops the bear scrolling with the element, and
- positions the bear at the top left of the element
.teddyBear
{
background-color: blue;
background-image: url("teddy.jpg");
background-repeat: repeat-y;
background-attachment: fixed;
background-position: left top;
}
All of the above properties can be reduced to a single background
property as follows:
.teddyBear
{
background: blue url("teddy.jpg") repeat-y fixed left top;
}
Much neater!
Initial values for background
properties
Whether you use the longhand or shorthand approach to define backgrounds, you can leave out one or more properties. Those properties then take on initial values instead, as follows:
background-color:
transparent
background-image:
none
background-repeat:
repeat
background-attachment:
scroll
background-position:
0% 0%
For example, these two lines of code both achieve the same effect:
background: url("teddy.jpg") fixed;
background: transparent url("teddy.jpg") repeat fixed 0% 0%;
Border shorthand
There are four ways you can write border properties as shorthand:
- You can set the width, style, or colour of all 4 borders at once
- You can set the width, style, or colour of individual borders in one go
- You can set the width, style, and colour of 1 border in one go
- You can set the width, style, and colour of all 4 borders at once
Let’s take a look at these techniques in detail.
Setting the width, style, or colour of all 4 borders
The longhand way to set border width, style, or colour is to set them on each of the 4 borders individually, using the following properties:
border-top-width: border-width | inherit
border-right-width: border-width | inherit
border-bottom-width: border-width | inherit
border-left-width: border-width | inherit
border-top-style: border-style | inherit
border-right-style: border-style | inherit
border-bottom-style: border-style | inherit
border-left-style: border-style | inherit
border-top-color: color | transparent | inherit
border-right-color: color | transparent | inherit
border-bottom-color: color | transparent | inherit
border-left-color: color | transparent | inherit
Using the border-width
, border-color
and border-style
CSS shorthand properties, you can set any or all of these 3 properties on all 4 borders at once:
border-width: border-width | inherit
border-style: border-style | inherit
border-color: color | transparent | inherit
For example:
.thickDashedRedBorder
{
border-width: 10px;
border-style: dashed;
border-color: red;
}
Setting the width, style, or colour of individual borders
You can also use border-width
, border-style
and border-color
to set individual borders (or pairs of borders) in one go, using the same techniques as for margin and padding. For example:
// Top dotted, right dashed, bottom groove, left ridge:
border-style: dotted dashed groove ridge;
// Top & bottom dotted, left & right dashed
border-style: dotted dashed;
See Margin and padding shorthand below for more info.
Setting the width, style, and colour of 1 border
If you just want to style a single border — either the top, right, bottom, or left — you can use shorthand for this too:
border-top: [ border-width || border-style || border-color ] | inherit
border-right: [ border-width || border-style || border-color ] | inherit
border-bottom: [ border-width || border-style || border-color ] | inherit
border-left: [ border-width || border-style || border-color ] | inherit
An example:
.thickDashedRedBottomBorder
{
border-bottom: 10px dashed red;
}
As with the background
shorthand property, you can leave out any of the three properties and they will take on their initial (default) values:
border-width:
medium
border-style:
none
border-color:
- Browser-dependent, but often
black
Setting the width, style, and colour of all 4 borders
You can also set the width, colour, and/or style of all 4 borders in a single line. The ultimate in border shorthand!
border: [ border-width || border-style || border-color ] | inherit
Example:
.thickDashedRedBorder
{
border: 10px dashed red;
}
Again, if you miss out any of the three properties, they’ll take on their initial values.
Colour shorthand
The usual way to specify a colour in CSS is to use its 6-digit hex value, as follows:
color: #ff0000; // red
color: #000000; // black
If any of the 3 pairs of hex values contain repeating digits, you can omit the second digit, saving space:
color: #f00; // red
color: #000; // black
If you prefer to work with decimal numbers or percentages rather than hex, you can:
color: rgb(255,0,0); // red
color: rgb(0,0,0); // black
color: rgb(100%, 0%, 0%); // red
color: rgb(0%, 0%, 0%); // black
You can also use predefined English colour names, which are easier to remember:
color: red;
color: black;
Here’s a list of all the available colour names.
Font shorthand
There are 6 font-related properties in CSS:
font-style: normal | italic | oblique | inherit
font-variant: normal | small-caps | inherit
font-weight: normal | bold | bolder | lighter | 100, 200 ... 900 | inherit
font-size: absolute-size | relative-size | length | percentage | inherit
line-height: normal | number | length | percentage | inherit
font-family: [[ family-name | generic-family ] [, family-name | generic-family]* ] | inherit
For example, you might set the appearance of text paragraphs as follows:
p
{
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1.2em;
line-height: 130%;
font-family: "Times New Roman", serif;
}
CSS gives you the font
shorthand property that lets you combine all of the above properties into a single line:
font: [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family> ]
So you can write the above properties as a single font
property as follows:
p
{
font: normal small-caps bold 1.2em/130% "Times New Roman", serif;
}
When using the font
property, you have to specify at least font-size
and font-family
. All other values are optional, and default to the initial value of normal
if omitted.
List shorthand
You can set 3 properties on list elements (ul
, ol
, and dl
) in CSS:
list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
list-style-position: inside | outside | inherit
list-style-image: uri | none | inherit
For example, the following CSS sets the bullet used for unordered lists to an image called bullet.png
, using a hollow circle if the image is unavailable, and positions the bullets inside the list elements’ content boxes:
list-style-type: circle;
list-style-position: inside;
list-style-image: url("bullet.png");
As you’ve probably guessed, you can specify all these properties at once using the list-style
shorthand property, as follows:
list-style: [ list-style-type || list-style-position || list-style-image ] | inherit
So the above list style could be specified using:
list-style: circle inside url("bullet.png");
If you miss out any of the list-style
properties, they take on the following initial values:
list-style-type:
disc
list-style-position:
outside
list-style-image:
none
Margin and padding shorthand
You probably know that you can set margin widths on each of the four sides of an element’s box using the following properties:
margin-top: margin-width | inherit
margin-right: margin-width | inherit
margin-bottom: margin-width | inherit
margin-left: margin-width | inherit
You can also use the margin
shorthand property in various ways to shorten your margin declarations.
To set a 10-pixel margin width on all four sides at once, use:
margin: 10px;
To set a 10-pixel margin on the top and bottom and a 20-pixel margin on the left and right, use:
margin: 10px 20px;
To set a 10-pixel margin on the top, a 20-pixel margin on the left and right, and a 30-pixel margin on the bottom, use:
margin: 10px 20px 30px;
Finally, to set the margins to 10 pixels on the top, 20 pixels on the right, 30 pixels on the bottom, and 40 pixels on the left, use:
margin: 10px 20px 30px 40px;
Padding shorthand works in exactly the same way as margin shorthand. For example, you can write:
.myBox
{
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;
}
as:
.myBox
{
padding: 1em 2em 3em 4em;
}
Outline shorthand
CSS lets you set outlines on most page elements. Outlines are similar to borders in that they sit around the edges of the box. However, outlines differ from borders in the following way:
- They don’t take up space in the page
- They can be non-rectangular
- You can’t specify outlines on a per-edge basis as you can with borders
You specify individual outline properties in a similar way to borders:
outline-color: color | invert | inherit
outline-style: outline-style | inherit
outline-width: outline-width | inherit
Or you can use the outline
shorthand property to specify all 3 properties at once:
outline: [ outline-color || outline-style || outline-width ] | inherit
For example, the following code sets a red dotted 5-pixel outline on all img
elements:
img
{
outline: red dotted 5px;
}
The special invert
colour can be used in outlines; rather than using a specific colour, it inverts the pixels of the outline, ensuring that the outline is always visible.
Leave a Reply