Home arrow Tutorials arrow CSS Shorthand Guide

Web Development

Welcome to Web Development section. Please choose a category. 
 
  • Hrvatski tutorijali
    Ovdje su objavljeni razni tutorijali na hrvatskom jeziku na temu PC, programiranje, web development, savjeti, trikovi, optreba racunala itd.
  • Tips / Tricks
    Articles about various tips and tricks concerning Windows, Linux and other OS usage.
  • JavaScripts
    Code snippets, tutorials and tricks for JavaScrip language.
  • PHP & MySQL
    Tutorials, code examples, tips and tricks for PHP and MySQL development.
  • Tutorials
    Place for tutorials about using various application in best and simplest way.
CSS Shorthand Guide PDF Print E-mail
(0 votes)

CSS Shorthand Guide

CSS Shorthand Guide

Sunday, October 23rd, 2005

Ok. Letís set the record straight. There is no official guide for each and every CSS shorthand property value. So letís work together and put one together shall we? Ok. Straight to the business. Anytime Iíve ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and youíre supposed to be set on your way. Well well. Over the years, Iíve found quite some interesting unknown quirky facts about these shorthandsÖ hence this Guide was born.

Background

Backgrounds can be tricky. Nevertheless, effective when condensed correctly. The syntax for declaring the background shorthand values are as follows:

background properties

element {
background-color: color || #hex || (rgb / % || 0-255);
background-image:url(URI);
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;
}


Believe it or not, all these properties can be combined into one single background property as follows:

the background shorthand property

element {
background:
#fff
url(image.png)
no-repeat
20px 100px
fixed;
}

The Unknown

Often times developers find themselves wondering What if I leave out this value or that one? How will that effect the design?. Good questions.

By default, the background property will assume the following when you do not declare each value of the properties.

default background property values


element {
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}

Lesson learned: be careful on what you donít declare. By chosing to not declare a value on a shorthand property, you are explicitly declaring the above default settings. For example, letís look at the following example.

background shorthand example (unexplicit)

element {
background:red url(image.png);
}

This would be the same as declaring the following values:

background shorthand example (explicit)

element {
background:red url(image.png) repeat top left scroll;
}

Font

Font is perhaps the trickiest. However, it follows the same rules as the background shorthand property. All that you do not declare will have unexplicit values. Here is the font shorthand specification:

font properties

element {
font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large);
line-height: normal || (number+unit);
font-family:name,"more names";
}

The default values for the font shorthand property are as follows:

default font property values

element {
font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
}

And of course without any further ado. The font shorthand property syntax:

the font shorthand property

element {
font:
normal
normal
normal
inhert/
normal
inherit;
}

Here is where it gets tricky. The fact that font-style, font-variant, and font-weight all come ďnormalĒ out of the box, you may need to pay a little more close attention when youíre styling elements that come with default browser styles like <h1> - <h6> or <strong> and <em>. For example, styling the strong element:

strong element styled with font

strong {
font:12px verdana;
}

By writing the above into your style sheet, you will be unexplicitly removing the font-weight:bold default browser style that is applied to strong elements.

Last but not least (for -font- that is), a real world example:

font shorthand property example (unexplicit)

p {
font:bold 1em/1.2em georgia,"times new roman",serif;
}

This would be the same as declaring the following properties:

the font shorthand property (explicit)

p {
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:1em;
line-height:1.2em;
font-family:georgia,"times new roman",serif;
}

Border

Letís not waste time discussing the warnings. The same rules apply from here on out. This is all you need to know

border properties

element {
border-width: number+unit;
border-style: (numerous);
border-color: color || #hex || (rgb / % || 0-255);
}

becomes this:

the border shorthand propertie

element {
border:
4px
groove
linen
}

Donít ask me how that would look. The fact that ďlinenĒ is in there, things could get scary. Nevermind the matter, here is where Ďborderí gets funny.

border examples

p {
border:solid blue;
}
/* will create a '3px' solid blue border...
who knows where 3px came from?? */

p {
border:5px solid;
}
/* will create 5px solid 'black' border...
default must be black?? */

p {
border:dashed;
}
/* will create a '3px' dashed 'black' border...
3px black lines unite! */

p { border:10px red; }
p { border:10px; }
p { border:red; }
/* these just don't even work */

One thing to specially take note about declaring a border without a color, the default will be Ďblackí unless otherwise noted through an explicit or inherited Ďcolorí property. See the following examples:

border color examples


p {
border:dotted;
color:red;
}
/* will create a 3px dotted red border */
/* ----------------------------- */
body {
color:blue;
}
body p {
border:5px solid;
}
/* will create a 5px solid blue border */
/* ----------------------------- */

Get it? Got it. Good! (isnít that a song?) Anyway. On with this

Margin and Padding

These are by far the easiest. Just think about the hands of a clock starting at noon, and follow the hour. For the sake of brevity, weíll be working with margin (since itís a shorter word). So for all cases of margin, the same rules apply to padding.

margin properties.

element {
margin-top: number+unit;
margin-right: number+unit;
margin-bottom: number+unit;
margin-left: number+unit;
}

Ö combined into the margin superpowers:

the margin shorthand property

/* top right bottom left */
element {
margin: auto auto auto auto;
}

Of course, you may declare your margin with one, two, three, or four values. Here is how each scenario will be played out:

margin fun

/* adds a 10px margin to all four sides */
element {
margin:10px;
}

/* adds a 20px margin to top and bottom
and a 5px margin to left and right */
element {
margin:20px 5px;
}

/* adds a 50px margin to top
and a 10px margin to left and right
and a 300px margin to bottom */
element {
margin:50px 10px 300px;
}

Understood? Letís keep going. This is fun isnít it! (whatever, you like it).

Outline

Quite frankly, this property has dropped off the existence of the design radar. Mainly because of lack of browsers supporting this CSS 2.1 standard (yep, itís an actual property), but nonetheless, it too has a shorthand property. This property follows the exact same (or same exact - they mean the same thing) specification as the Ďborderí shorthand property. But, for purposes of this being a Guide, it must be here. So:

outline properties

element {
outline-width: number+unit;
outline-style: (numerous);
outline-color: color || #hex || (rgb / % || 0-255);
}

Outline written as shorthand:

outline shorthand property

element {
outline:3px dotted gray;
}

List-style

This is it. The last one. Itís rarely used frequently. Hence rarely. That is why I kept it until the end (sorry, the best was first in my own opinion). Here is the list-style properties:

list-style properties

element {
list-style-type: (numerous);
list-style-position:inside || outside;
list-style-image:url(image.png);
}

Here is the defaults:

list-style property defaults

element {
list-style-type:disc;
list-style-position:outside;
list-style-image:none;
}

And for the sake of final brevity. Here is a simple example:

list-style shorthand property example

ul li {
list-style:square inside url(image.png);
}
/* in this particular case if image.png is not available
then a square will be provided as secondary */
 
< Prev   Next >
What's your favorite Internet browser?
 

Login






Lost Password?

Tools

Coming soon...

Syndicate