GetDotted Domains

Viewing Thread:
"CSS shorthand, a quick and simple introduction"

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

Sun 05/08/07 at 22:50
Regular
"It goes so quickly"
Posts: 4,083
[B][U]CSS shorthand, a quick and simple introduction[/U][/B]

Cascading Style Sheets have been around for a long time, and are used across a variety of web sites, allowing for the site author to split the presentation and mark-up from one another. Doing this can save development time as well as bandwidth usage, but even then, you’ve still got to type out the initial style sheet.

CSS shorthand property names act as an umbrella, ella ella (sorry), for a group of individual CSS properties, and allow the web author (this meaning you) to set CSS properties as a group, saving yourself typing time and file size bytes.

This article assumes the reader is already familiar with Cascading Style Sheets, and so won’t go in to too much detail about each CSS property, just how to shorthand them. You may infact already know a little CSS shorthand, from various tutorial books or web sites, but just didn’t know it. So with that, lets dive on in …

CSS margin property

The margin property is the CSS shorthand for the four CSS properties:

- margin-top
- margin-right
- margin-bottom
- margin-left

The margin properties set the space around the four sides of any given element, and can be set as such:

p {
margin-top: 5px;
margin-right: 0;
margin-bottom: 15px;
margin-left: 20px;
}


The above example sets the margin for all <p> elements, but can be reduced to a single line of code, using the umbrella margin property, such as:

p {
margin: 5px 0 15px 20px;
}


The above shorthand version will produce the same effect as the predeceasing example, with the upshot that it took up less time and space to set (26 characters, as opposed to 72).

The order in which each setting (or value) appears is important, with the first being the value you want to set for the top margin (5px), the second being the value you want to set for the right margin (0), the third being the bottom margin (15px), and the fourth and final value being the left margin (20px). A simple way to remember is that the settings go in a clockwise direction, starting at the top (midday / midnight).

You’re not limited to setting the value for all four sides, however, as the shorthand property margin can set each side individually, or in groups, if required.

In the example CSS below, you’ll see that the left and right margin settings are the same (30px):

p {
margin-top: 5px;
margin-right: [B]30px[/B];
margin-bottom: 20px;
margin-left: [B]30px[/B];
}


Using shorthand, this can be re-written like so:

p {
margin: 5px [B]30px[/B] 20px;
}


This is because when the margin property has three values set, the first is used as the top (5px), the last is used as the bottom (20px), but the middle value is used for both the left and right margin settings (30px).

You can reduce the code further if you want to use the same value for the top / bottom margin and the left / right margin, so if you were to have the example code below, where the top and bottom margin is set to 25%, and the left and right margin set to 3%:

p {
margin-top: [B]25%[/B];
margin-right: [I]3%[/I];
margin-bottom: [B]25%[/B];
margin-left: [I]3%[/I];
}


Using shorthand, this can be re-written like so:

p {
margin: [B]25%[/B] [I]3%[/I];
}


This is because when the margin property has two values set, the first is used as the top and bottom (25%), and the second is used for the left and right (3%).

Finally, using a single value for the margin property will set all four sides accordingly, so:

p {
margin-top: [B]2em[/B];
margin-right: [B]2em[/B];
margin-bottom: [B]2em[/B];
margin-left: [B]2em[/B];
}


… using shorthand, simple becomes:

p {
margin: [B]2em[/B];
}


The reserved word auto can also be used when setting the margin with shorthand, such as with the example below, which would set the top value to 15px, the bottom value to 25px, and the left and right margin’s to auto:

p {
margin: 15px [B]auto[/B] 25px;
}


One other note, there is no need for a unit type (e.g. px, % or em) to be included if the value is 0 (zero), for example, margin: 0[B]px[/B]; is the same as margin: 0;.

Default settings:

The official default setting for the margin shorthand property is 0, but web browsers generally set their own defaults to a few pixels.

CSS padding property

The padding property is the CSS shorthand for the four CSS properties:

- padding-top
- padding-right
- padding-bottom
- padding-left

The padding properties set the space around the content of any given element, and it’s border. The padding shorthand method works in the same way as it does for the margin properties - just replace padding for margin, for example:

p {
padding-top: [I]27px[/I];
padding-right: [B]14px[/B];
padding-bottom: [U]15px[/U];
padding-left: [B]14px[/B];
}


… in shorthand form, becomes:

p {
padding: [I]27px[/I] [B]14px[/B] [U]15px[/U];
}


Default settings:

The official default setting for the padding shorthand property is 0, but web browsers generally set their own defaults to a few pixels.

CSS background property

The background property is the CSS shorthand for the five CSS properties:

- background-color (note, no ‘u’, as this is the American spelling of colour)
- background-image
- background-repeat
- background-attachment
- background-position

The background properties set the appearance of any given elements background, either with a colour, an image, or both, and can be set as such:

p {
background-color: white;
background-image: url(css-shorthand-bg.png);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: top right;
}


The above example sets the background appearance for all <p> elements on the page to have a white colour, as well as the image css-shorthand-bg.png starting in the top right corner and repeating all the way down (and for it to scroll with the document, but the CSS property background-attachment could honestly fill an article of it’s own, it’s that nutty).

When combined together under the background umbrella, the shorthand looks like:

p {
background: white url(css-shorthand-bg.png) repeat-y scroll [B]top right[/B];
}


… which again is considerably smaller than the previous code sample. Unlike the margin and padding properties, the order in which you set the background CSS shorthand property isn’t as important, as web browsers appear to render the property settings regardless, with the exception being the position setting.

The order in which the position is set is horizontal first, vertical second.

If you were to use the code:

p {
background: white url(css-shorthand-bg.png) repeat-y scroll [B]25px[/B] [I]75px[/I];
}


… the first value for the position (25px) will be set horizontally, while the second (75px) will be set vertically. If you were to swap the two values positions, such as:

p {
background: white url(css-shorthand-bg.png) repeat-y scroll [I]75px[/I] [B]25px[/B];
}


… then 75px would be the horizontal position, while 25px would be the vertical position of the image. The same is true if you were to use percentage values (%) rather than pixels (px).

If only one position is included in the CSS shorthand, it is taken to be the horizontal setting, whereas the vertical setting will default to 50% (the middle / centre of the element).

Default settings:

The individual default (pre-set) settings for the background properties are:

- There is no default background image.
- background-color: transparent
- background-repeat: repeat
- background-attachment: scroll
- background-position: top left (or 0 0 as px or %)

If you’re chosen setting is the default, then you do not need to include it within your declaration (saving even more time and space). For example, if you wanted your background image to be placed in the top left of your <p> elements, with the image repeating and scrolling with the document, you can leave these out as they are the default settings, leaving you with only having to include:

p {
background: [B]white url(css-shorthand-bg.png)[/B];
}


CSS font property

The font property is the CSS shorthand for the six CSS properties:

- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family

It should be noted that the font-size-adjust and font-stretch properties cannot be set within the font shorthand property.

The font properties set the style of the text that appears within an element, including its style, size, and boldness, for example:

p {
font-style: oblique;
font-variant: small-caps;
font-weight: bolder;
font-size: [B]2em[/B];
line-height: [B]1.5em[/B];
font-family: Century, "Lucida Grande", sans-serif;
}


And as you may have guessed, the shorthand will place the above values under the single font declaration:

p {
font: oblique small-caps bolder [B]2em/1.5em[/B] Century, "Lucida Grande", sans-serif;
}


When setting the font size and line heights, you need to include a dividing forward slash (2em/1.5em) between the two. The first value is the font size, while the second is the line height. If you don’t include a forward slash and second value, only the font size will be set to whichever value you’ve included.

When using the font property, the order in which you place your values should be as shown in the above example, which is font-style, font-variant, font-weight, font-size / line-height and [/I]font-family[/I].

Default settings:

The individual default (pre-set) settings for the font properties are:

- font-style: normal
- font-variant: normal
- font-weight: normal
- font-size: medium
- line-height: normal
- font-family: This is specific to a particular web browser / operating system.

As with the background property, default settings will be used if you do not include all the settings in your declaration, for example:

p {
font: 2em sans-serif;
}


… will result in the remaining CSS font properties use the default settings.

One final setting you can add to the end of your font declaration is a desired system font, which values include "caption", "icon", "menu", "message-box", "small-caption", and "status-bar", for example:

font: bolder italic 25px/8px Arial, Century [B]small-caption[/B];

Oddly, this final setting is required to be set within the font shorthand property only, as it does not include it’s own separate property name (i.e. a property called font-system, or system-font, doesn’t exist).

CSS border property

The border property is the CSS shorthand for the three CSS properties:

- border-width
- border-style
- border-color (note, no ‘u’, as this is the American spelling of colour)

For example, if you had the code:

p {
border-width: 8px;
border-style: solid;
border-color: blue;
}


The CSS shorthand would be:

p {
border: 8px solid blue;
}


Default settings:

The individual default (pre-set) settings for the border properties are:

- border-width: medium
- border-style: none (no border is shown)
- border-color: the value of the elements color property.

If you’ve set the color property within the same declaration, then the default colour of the border will also become this, meaning if you intend for the colour of the text and the border to match, there is no need to set the border’s colour separately.

The border property in itself can only set a single type of border for all four sides in a declaration, which may not be what you want to do, so the top, bottom, left and right sides can be set individually if required, for example:

p {
border-top: 6px solid blue;
border-bottom: 8px dashed red;
border-left: 10px solid yellow;
border-right: 12px dotted;
}


CSS outline property

The outline property is the CSS shorthand for the three CSS properties:

- outline-width
- outline-style
- outline-color (note, no ‘u’, as this is the American spelling of colour)

The outline shorthand method works in the same way as it does for the border properties - just replace outline for border, except that an outline can only be set around the entire element, so there is no outline-top or outline-right properties.

You may have the CSS code to produce an outline as such:

p {
outline-width: 12px;
outline-style: dashed;
outline-color: red;
}


The CSS shorthand would be:

p {
outline: 12px dashed red;
}


Default settings:

The individual default (pre-set) settings for the outline properties are:

- outline-width: medium
- outline-style: none (no outline is shown)
- outline-color: the value of the elements color property (same as border-color).

For those of you who have not yet come across this CSS property, an outline is effectively a second border setting for an element, with the main difference being that it does not take up any physical space on the page, but laps over any content is comes in to contact with.

It should be noted that currently, Windows Internet Explorer doesn’t support the outline property, which is likely why you haven’t come across it.

CSS list-style property

The list-style property is the CSS shorthand for the three CSS properties:

- list-style-image
- list-style-type
- list-style-position

The list CSS properties allow you to alter the way your HTML lists appear on screen, such as using an image in-place of a bullet point, or the type of shape used as the bullet point.

As is probably expected by now, the follow CSS:

ul {
list-style-image: url("css-shorthand-list.png");
list-style-type: square;
list-style-position: inside;
}


… converts in to shorthand as such:

ul {
list-style: url("css-shorthand-list.png") square inside;
}


The same method applies to an <ol> ordered list, for example:

[B]ol[/B] {
list-style-image: url("css-shorthand-list.png");
list-style-type: decimal;
list-style-position: inside;
}


… converts in to shorthand as:

[B]ol[/B] {
list-style: url("css-shorthand-list.png") decimal inside;
}


The order in which the list-style properties are set is generally unimportant, as web browsers appear to be able to handle any combination.

Default settings:

The individual default (pre-set) settings for the list-style properties are:

- There is no default list style image
- list-style-type: disc
- list-style-position: outside

CSS color property

You can set the colour of your text, background, border and outline using either a reserved name (red, blue, black, white, etc), the rgb colour code (rgb([I]255[/I], [I]255[/I], [I]255[/I]);), or the hex code as the color property value (remember US spelling), each of which are simple and effective.

You can also set the hex code type with shorthand, although the savings are all of three letters. If you are using a code that consists of three pairs of two matching characters, you can remove one character from each pair, for example:

p {
color: #[B]f[U]f[/U]f[U]f[/U]f[U]f[/U][/B]
color: #[B]fff[/B] [S]/*(shorthand)*/[/S]
}

p {
color: #[B]9[U]9[/U]f[U]f[/U]f[U]f[/U][/B]
color: #[B]9ff[/B] [S]/*(shorthand)*/[/S]
}

p {
color: #[B]f[U]f[/U]0[U]0[/U]f[U]f[/U][/B]
color: #[B]f0f[/B] [S]/*(shorthand)*/[/S]
}


Don’t forget about the defaults, the cascade, or the inheritance!

While CSS shorthand can shave of seconds and bytes from your styles, don’t forget about the all important default settings, the cascade and inherit features of CSS. There is no point, for example, in setting a list item to use a disc as it’s type, or to be positioned inside, as these are the default settings.

It’s also important to remember that using the umbrella CSS property that includes default (pre-set) values will use those default values if you don’t set any alternative.

It is also pointless to add settings for parts of your web page that may have already been inherited from a parent element, for example:

div#content {margin: 7px; font-family: arial; padding: 5px;}
div#content h1 {margin: 8px; font-family: courier; padding: 4px;}
div#content p {margin: 15px;
font-family: arial; padding: 3px;}

<div id="content">
<h1>heading</h1>
<p>text</p>
</div>


In the above case, you don’t need to add font-family: arial; separately to the style properties for div#content p, as this property gets inherited from the parent declaration of div#content.

Most importantly, don’t forget that the CSS shorthand properties reflect a block of settings, and combined with the existence of default settings, may cause you a little confusion when using multiple sources for your style sheets.

For example, you may create a "basic.css" file, that contains your site-wide CSS that you want to apply to all your web pages, and call it as such using:

<link rel="stylesheet" type="text/css" href="/[I]basic.css[/I]">

… and within "basic.css", you place a declaration to add an arrow pointing up to the bottom right of all your level one (<h1>heading</h1>) headings, such as:

h1 {
margin: 5px;
padding: 5px 25px;
background: #000 [B]url(arrow-[I]up[/I].png) bottom right no-repeat;[/B]
color: #fff;
}


… which would produce this web page. However, on one particular page, you might decide to use a different background image of an arrow pointing down.

Adding a <style> element with the CSS to use a different image to your chosen page is how to do it, and you would probably expect this code to do the trick:

<style type="text/css" media="screen">
h1 {background: url("arrow-[I]down[/I].png");}
</style>


… which would produce this web page, which probably isn’t what you were expecting. What’s happened?

When using CSS shorthand, default settings may exist to save you from having to explicitly set them yourself, which are mentioned within each section above.

So instead, because all you want to do is change the background image, while retaining all your other settings, you would need to use the individual CSS setting:

<style type="text/css" media="screen">
h1 {background[B]-image[/B]: url("arrow-down.png");}
</style>


… which would produce this web page, the layout you actually wanted.

All done!

Hopefully this little article will have helped you cut down your CSS typing a little, as well as saved your visitors a little extra of their possibly limited bandwidth, and given your web site the impression that it loads just that little bit faster.

For smaller web sites, the savings may not seem that much, but as time goes by, and your CSS file begins to grow, you’ll find CSS shorthand to be a very handy thing to know about.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.
There have been no replies to this thread yet.
Sun 05/08/07 at 22:50
Regular
"It goes so quickly"
Posts: 4,083
[B][U]CSS shorthand, a quick and simple introduction[/U][/B]

Cascading Style Sheets have been around for a long time, and are used across a variety of web sites, allowing for the site author to split the presentation and mark-up from one another. Doing this can save development time as well as bandwidth usage, but even then, you’ve still got to type out the initial style sheet.

CSS shorthand property names act as an umbrella, ella ella (sorry), for a group of individual CSS properties, and allow the web author (this meaning you) to set CSS properties as a group, saving yourself typing time and file size bytes.

This article assumes the reader is already familiar with Cascading Style Sheets, and so won’t go in to too much detail about each CSS property, just how to shorthand them. You may infact already know a little CSS shorthand, from various tutorial books or web sites, but just didn’t know it. So with that, lets dive on in …

CSS margin property

The margin property is the CSS shorthand for the four CSS properties:

- margin-top
- margin-right
- margin-bottom
- margin-left

The margin properties set the space around the four sides of any given element, and can be set as such:

p {
margin-top: 5px;
margin-right: 0;
margin-bottom: 15px;
margin-left: 20px;
}


The above example sets the margin for all <p> elements, but can be reduced to a single line of code, using the umbrella margin property, such as:

p {
margin: 5px 0 15px 20px;
}


The above shorthand version will produce the same effect as the predeceasing example, with the upshot that it took up less time and space to set (26 characters, as opposed to 72).

The order in which each setting (or value) appears is important, with the first being the value you want to set for the top margin (5px), the second being the value you want to set for the right margin (0), the third being the bottom margin (15px), and the fourth and final value being the left margin (20px). A simple way to remember is that the settings go in a clockwise direction, starting at the top (midday / midnight).

You’re not limited to setting the value for all four sides, however, as the shorthand property margin can set each side individually, or in groups, if required.

In the example CSS below, you’ll see that the left and right margin settings are the same (30px):

p {
margin-top: 5px;
margin-right: [B]30px[/B];
margin-bottom: 20px;
margin-left: [B]30px[/B];
}


Using shorthand, this can be re-written like so:

p {
margin: 5px [B]30px[/B] 20px;
}


This is because when the margin property has three values set, the first is used as the top (5px), the last is used as the bottom (20px), but the middle value is used for both the left and right margin settings (30px).

You can reduce the code further if you want to use the same value for the top / bottom margin and the left / right margin, so if you were to have the example code below, where the top and bottom margin is set to 25%, and the left and right margin set to 3%:

p {
margin-top: [B]25%[/B];
margin-right: [I]3%[/I];
margin-bottom: [B]25%[/B];
margin-left: [I]3%[/I];
}


Using shorthand, this can be re-written like so:

p {
margin: [B]25%[/B] [I]3%[/I];
}


This is because when the margin property has two values set, the first is used as the top and bottom (25%), and the second is used for the left and right (3%).

Finally, using a single value for the margin property will set all four sides accordingly, so:

p {
margin-top: [B]2em[/B];
margin-right: [B]2em[/B];
margin-bottom: [B]2em[/B];
margin-left: [B]2em[/B];
}


… using shorthand, simple becomes:

p {
margin: [B]2em[/B];
}


The reserved word auto can also be used when setting the margin with shorthand, such as with the example below, which would set the top value to 15px, the bottom value to 25px, and the left and right margin’s to auto:

p {
margin: 15px [B]auto[/B] 25px;
}


One other note, there is no need for a unit type (e.g. px, % or em) to be included if the value is 0 (zero), for example, margin: 0[B]px[/B]; is the same as margin: 0;.

Default settings:

The official default setting for the margin shorthand property is 0, but web browsers generally set their own defaults to a few pixels.

CSS padding property

The padding property is the CSS shorthand for the four CSS properties:

- padding-top
- padding-right
- padding-bottom
- padding-left

The padding properties set the space around the content of any given element, and it’s border. The padding shorthand method works in the same way as it does for the margin properties - just replace padding for margin, for example:

p {
padding-top: [I]27px[/I];
padding-right: [B]14px[/B];
padding-bottom: [U]15px[/U];
padding-left: [B]14px[/B];
}


… in shorthand form, becomes:

p {
padding: [I]27px[/I] [B]14px[/B] [U]15px[/U];
}


Default settings:

The official default setting for the padding shorthand property is 0, but web browsers generally set their own defaults to a few pixels.

CSS background property

The background property is the CSS shorthand for the five CSS properties:

- background-color (note, no ‘u’, as this is the American spelling of colour)
- background-image
- background-repeat
- background-attachment
- background-position

The background properties set the appearance of any given elements background, either with a colour, an image, or both, and can be set as such:

p {
background-color: white;
background-image: url(css-shorthand-bg.png);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: top right;
}


The above example sets the background appearance for all <p> elements on the page to have a white colour, as well as the image css-shorthand-bg.png starting in the top right corner and repeating all the way down (and for it to scroll with the document, but the CSS property background-attachment could honestly fill an article of it’s own, it’s that nutty).

When combined together under the background umbrella, the shorthand looks like:

p {
background: white url(css-shorthand-bg.png) repeat-y scroll [B]top right[/B];
}


… which again is considerably smaller than the previous code sample. Unlike the margin and padding properties, the order in which you set the background CSS shorthand property isn’t as important, as web browsers appear to render the property settings regardless, with the exception being the position setting.

The order in which the position is set is horizontal first, vertical second.

If you were to use the code:

p {
background: white url(css-shorthand-bg.png) repeat-y scroll [B]25px[/B] [I]75px[/I];
}


… the first value for the position (25px) will be set horizontally, while the second (75px) will be set vertically. If you were to swap the two values positions, such as:

p {
background: white url(css-shorthand-bg.png) repeat-y scroll [I]75px[/I] [B]25px[/B];
}


… then 75px would be the horizontal position, while 25px would be the vertical position of the image. The same is true if you were to use percentage values (%) rather than pixels (px).

If only one position is included in the CSS shorthand, it is taken to be the horizontal setting, whereas the vertical setting will default to 50% (the middle / centre of the element).

Default settings:

The individual default (pre-set) settings for the background properties are:

- There is no default background image.
- background-color: transparent
- background-repeat: repeat
- background-attachment: scroll
- background-position: top left (or 0 0 as px or %)

If you’re chosen setting is the default, then you do not need to include it within your declaration (saving even more time and space). For example, if you wanted your background image to be placed in the top left of your <p> elements, with the image repeating and scrolling with the document, you can leave these out as they are the default settings, leaving you with only having to include:

p {
background: [B]white url(css-shorthand-bg.png)[/B];
}


CSS font property

The font property is the CSS shorthand for the six CSS properties:

- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family

It should be noted that the font-size-adjust and font-stretch properties cannot be set within the font shorthand property.

The font properties set the style of the text that appears within an element, including its style, size, and boldness, for example:

p {
font-style: oblique;
font-variant: small-caps;
font-weight: bolder;
font-size: [B]2em[/B];
line-height: [B]1.5em[/B];
font-family: Century, "Lucida Grande", sans-serif;
}


And as you may have guessed, the shorthand will place the above values under the single font declaration:

p {
font: oblique small-caps bolder [B]2em/1.5em[/B] Century, "Lucida Grande", sans-serif;
}


When setting the font size and line heights, you need to include a dividing forward slash (2em/1.5em) between the two. The first value is the font size, while the second is the line height. If you don’t include a forward slash and second value, only the font size will be set to whichever value you’ve included.

When using the font property, the order in which you place your values should be as shown in the above example, which is font-style, font-variant, font-weight, font-size / line-height and [/I]font-family[/I].

Default settings:

The individual default (pre-set) settings for the font properties are:

- font-style: normal
- font-variant: normal
- font-weight: normal
- font-size: medium
- line-height: normal
- font-family: This is specific to a particular web browser / operating system.

As with the background property, default settings will be used if you do not include all the settings in your declaration, for example:

p {
font: 2em sans-serif;
}


… will result in the remaining CSS font properties use the default settings.

One final setting you can add to the end of your font declaration is a desired system font, which values include "caption", "icon", "menu", "message-box", "small-caption", and "status-bar", for example:

font: bolder italic 25px/8px Arial, Century [B]small-caption[/B];

Oddly, this final setting is required to be set within the font shorthand property only, as it does not include it’s own separate property name (i.e. a property called font-system, or system-font, doesn’t exist).

CSS border property

The border property is the CSS shorthand for the three CSS properties:

- border-width
- border-style
- border-color (note, no ‘u’, as this is the American spelling of colour)

For example, if you had the code:

p {
border-width: 8px;
border-style: solid;
border-color: blue;
}


The CSS shorthand would be:

p {
border: 8px solid blue;
}


Default settings:

The individual default (pre-set) settings for the border properties are:

- border-width: medium
- border-style: none (no border is shown)
- border-color: the value of the elements color property.

If you’ve set the color property within the same declaration, then the default colour of the border will also become this, meaning if you intend for the colour of the text and the border to match, there is no need to set the border’s colour separately.

The border property in itself can only set a single type of border for all four sides in a declaration, which may not be what you want to do, so the top, bottom, left and right sides can be set individually if required, for example:

p {
border-top: 6px solid blue;
border-bottom: 8px dashed red;
border-left: 10px solid yellow;
border-right: 12px dotted;
}


CSS outline property

The outline property is the CSS shorthand for the three CSS properties:

- outline-width
- outline-style
- outline-color (note, no ‘u’, as this is the American spelling of colour)

The outline shorthand method works in the same way as it does for the border properties - just replace outline for border, except that an outline can only be set around the entire element, so there is no outline-top or outline-right properties.

You may have the CSS code to produce an outline as such:

p {
outline-width: 12px;
outline-style: dashed;
outline-color: red;
}


The CSS shorthand would be:

p {
outline: 12px dashed red;
}


Default settings:

The individual default (pre-set) settings for the outline properties are:

- outline-width: medium
- outline-style: none (no outline is shown)
- outline-color: the value of the elements color property (same as border-color).

For those of you who have not yet come across this CSS property, an outline is effectively a second border setting for an element, with the main difference being that it does not take up any physical space on the page, but laps over any content is comes in to contact with.

It should be noted that currently, Windows Internet Explorer doesn’t support the outline property, which is likely why you haven’t come across it.

CSS list-style property

The list-style property is the CSS shorthand for the three CSS properties:

- list-style-image
- list-style-type
- list-style-position

The list CSS properties allow you to alter the way your HTML lists appear on screen, such as using an image in-place of a bullet point, or the type of shape used as the bullet point.

As is probably expected by now, the follow CSS:

ul {
list-style-image: url("css-shorthand-list.png");
list-style-type: square;
list-style-position: inside;
}


… converts in to shorthand as such:

ul {
list-style: url("css-shorthand-list.png") square inside;
}


The same method applies to an <ol> ordered list, for example:

[B]ol[/B] {
list-style-image: url("css-shorthand-list.png");
list-style-type: decimal;
list-style-position: inside;
}


… converts in to shorthand as:

[B]ol[/B] {
list-style: url("css-shorthand-list.png") decimal inside;
}


The order in which the list-style properties are set is generally unimportant, as web browsers appear to be able to handle any combination.

Default settings:

The individual default (pre-set) settings for the list-style properties are:

- There is no default list style image
- list-style-type: disc
- list-style-position: outside

CSS color property

You can set the colour of your text, background, border and outline using either a reserved name (red, blue, black, white, etc), the rgb colour code (rgb([I]255[/I], [I]255[/I], [I]255[/I]);), or the hex code as the color property value (remember US spelling), each of which are simple and effective.

You can also set the hex code type with shorthand, although the savings are all of three letters. If you are using a code that consists of three pairs of two matching characters, you can remove one character from each pair, for example:

p {
color: #[B]f[U]f[/U]f[U]f[/U]f[U]f[/U][/B]
color: #[B]fff[/B] [S]/*(shorthand)*/[/S]
}

p {
color: #[B]9[U]9[/U]f[U]f[/U]f[U]f[/U][/B]
color: #[B]9ff[/B] [S]/*(shorthand)*/[/S]
}

p {
color: #[B]f[U]f[/U]0[U]0[/U]f[U]f[/U][/B]
color: #[B]f0f[/B] [S]/*(shorthand)*/[/S]
}


Don’t forget about the defaults, the cascade, or the inheritance!

While CSS shorthand can shave of seconds and bytes from your styles, don’t forget about the all important default settings, the cascade and inherit features of CSS. There is no point, for example, in setting a list item to use a disc as it’s type, or to be positioned inside, as these are the default settings.

It’s also important to remember that using the umbrella CSS property that includes default (pre-set) values will use those default values if you don’t set any alternative.

It is also pointless to add settings for parts of your web page that may have already been inherited from a parent element, for example:

div#content {margin: 7px; font-family: arial; padding: 5px;}
div#content h1 {margin: 8px; font-family: courier; padding: 4px;}
div#content p {margin: 15px;
font-family: arial; padding: 3px;}

<div id="content">
<h1>heading</h1>
<p>text</p>
</div>


In the above case, you don’t need to add font-family: arial; separately to the style properties for div#content p, as this property gets inherited from the parent declaration of div#content.

Most importantly, don’t forget that the CSS shorthand properties reflect a block of settings, and combined with the existence of default settings, may cause you a little confusion when using multiple sources for your style sheets.

For example, you may create a "basic.css" file, that contains your site-wide CSS that you want to apply to all your web pages, and call it as such using:

<link rel="stylesheet" type="text/css" href="/[I]basic.css[/I]">

… and within "basic.css", you place a declaration to add an arrow pointing up to the bottom right of all your level one (<h1>heading</h1>) headings, such as:

h1 {
margin: 5px;
padding: 5px 25px;
background: #000 [B]url(arrow-[I]up[/I].png) bottom right no-repeat;[/B]
color: #fff;
}


… which would produce this web page. However, on one particular page, you might decide to use a different background image of an arrow pointing down.

Adding a <style> element with the CSS to use a different image to your chosen page is how to do it, and you would probably expect this code to do the trick:

<style type="text/css" media="screen">
h1 {background: url("arrow-[I]down[/I].png");}
</style>


… which would produce this web page, which probably isn’t what you were expecting. What’s happened?

When using CSS shorthand, default settings may exist to save you from having to explicitly set them yourself, which are mentioned within each section above.

So instead, because all you want to do is change the background image, while retaining all your other settings, you would need to use the individual CSS setting:

<style type="text/css" media="screen">
h1 {background[B]-image[/B]: url("arrow-down.png");}
</style>


… which would produce this web page, the layout you actually wanted.

All done!

Hopefully this little article will have helped you cut down your CSS typing a little, as well as saved your visitors a little extra of their possibly limited bandwidth, and given your web site the impression that it loads just that little bit faster.

For smaller web sites, the savings may not seem that much, but as time goes by, and your CSS file begins to grow, you’ll find CSS shorthand to be a very handy thing to know about.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

Freeola & GetDotted are rated 5 Stars

Check out some of our customer reviews below:

Continue this excellent work...
Brilliant! As usual the careful and intuitive production that Freeola puts into everything it sets out to do, I am delighted.
Impressive control panel
I have to say that I'm impressed with the features available having logged on... Loads of info - excellent.
Phil

View More Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.