BrijiRaj.com

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;
}

written by admin \\ tags: background elements, background properties, background styles, border shorthand, border styles, CSS, CSS hacks, css shorthand gudies, css shorthands, CSS tips & tricks, font style shorthand, font styles, HTML, list table shorthand, list table styles, margin and padding shorthand, margin and padding styles, outline shorthand, outline styels

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;
}

written by admin \\ tags: background elements, background properties, background styles, border shorthand, border styles, CSS, CSS hacks, css shorthand gudies, css shorthands, CSS tips & tricks, font style shorthand, font styles, HTML, list table shorthand, list table styles, margin and padding shorthand, margin and padding styles, outline shorthand, outline styels

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 inexplicit 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 (inexplicit)

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;
}

written by admin \\ tags: background elements, background properties, background styles, border shorthand, border styles, CSS, CSS hacks, css shorthand gudies, css shorthands, CSS tips & tricks, font style shorthand, font styles, HTML, list table shorthand, list table styles, margin and padding shorthand, margin and padding styles, outline shorthand, outline styels

Border

The regular border properties:

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

becomes this:
the border shorthand properties

element {
border:
4px
groove
red
}

border examples

p {
border:solid blue;
}


will create a solid blue border…

p {
border:5px solid;
}

will create 5px solid ‘black’ border…

p {
border:dashed;
}

will create a ‘3px’ dashed ‘black’ border…

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.

written by admin \\ tags: background elements, background properties, background styles, border shorthand, border styles, CSS, CSS hacks, css shorthand gudies, css shorthands, CSS tips & tricks, font style shorthand, font styles, HTML, list table shorthand, list table styles, margin and padding shorthand, margin and padding styles, outline shorthand, outline styels

List-style

It’s rarely used. I have searched lot of blogs and sites to get the correct info on this.

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;
}

Here is a simple example:
list-style shorthand property example

ul li {
list-style:square inside url(image.png);
}

written by admin \\ tags: background elements, background properties, background styles, border shorthand, border styles, CSS, CSS hacks, css shorthand gudies, css shorthands, CSS tips & tricks, font style shorthand, font styles, HTML, list table shorthand, list table styles, margin and padding shorthand, margin and padding styles, outline shorthand, outline styels