BrijiRaj.com

Huh! sick and tired of all the methods to make the ‘Round Corner Box’ in HTML. If you put a query in search engine you will get thousands of result on how to go about it. Some tutorials explain you how this can be achived by using HTML + CSS + JS + images and other by using HTML + CSS + images. Almost all of these will be using 2 to 8 images to attain the desired result. The most popular one was with four images without JS. See my posting ‘Round Corner Stretchable Box‘ on Feb 19th, 2008. What if you can create a Round Corner Box without the use of JS nor images?

As I was stumbling thru the sites I came across the listings for the Round Corner Box in SmileyCat. My eyes got stuck in one of the listing. Achieve the round corner with no images and that too without the use of JS. WOW!!! this was my first reaction. I have gone thru the tutorial and with shamefaced I thought why couldn’t I think about this method when I was spending hours on research to achieve this without the use of images. Read More

written by admin \\ tags: , CSS, CSS hacks, CSS tips and tricks, curved box, HTML, Java Script, JavaScript, JS, round corner box, round edge box, rounded corner box, smileycat.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