CSS Tricks

Vertical Centering Block Level Elements

Positioning can be used to vertically center block level elements.


1 <div id="content">your content here</div>

The CSS:

1 div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}

The top left corner of the div will be positioned 50% from the top. Since we want the center of the div to be positioned 50% from the top you need to set a negative top margin equal to half the height of the div.

This same trick works for horizontal centering as well. Change top to left and margin-top to margin-left and set the negative margin to be half of the width of the element.

1 div#content {position: absolute; top: 50%; left:50%; width:800px; height: 500px; margin-left: -400pxmargin-top: -250px}

The above CSS will center the element both vertically and horizontally.

3D Buttons with CSS Only

3D CSS buttons are easy to create. The trick is to give your elements borders with different colors. Lighter where the light source shines and darker where it doesn’t.

1 div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }

The CSS above will create a button with the light source at the upper left. Usually one or two shades of color change is all that’s needed, but you can experiment for different effects.

CSS Font Shorthand

When using shorthand on the font property you need to specify each property in the following order

1 body { font: font-style font-variant font-weight font-size line-height font-family; }

You don’t need to include every property, but know that for any you don’t include that property will be reset to it’s default.

Setting Multiple Classes on an HTML Element

Easy and easy to forget the proper syntax. If you want to set multiple classes on an html element it should look like:

1 <div class="class-1 class-2 class-3">
2 </div>

with all class names inside the same set of double quotes with a space between each. The CSS specificity is controlled by the order of the classes in your CSS file. If your CSS has:

1 class-2 {color: blue}
2 class-3 {color: green}
3 class-1 {color: red}

then text inside the div will be red as class-1 is the last declared in the CSS. The order the classes appear in the html is irrelevant.

17 thoughts on “CSS Tricks

Add yours

  1. I discovered your “CSS Tricks | Bhaumik Patel” page and noticed you could have a lot more traffic. I have found that the key to running a website is making sure the visitors you are getting are interested in your subject matter. There is a company that you can get traffic from and they let you try it for free. I managed to get over 300 targetted visitors to day to my website. Check it out here: http://bag.sh/16M

  2. Hi this is a excellent post. I’m going to e-mail this to my associates. I came on this while exploring on google I’ll be sure to come back. thanks for sharing.

  3. you’re in reality a excellent webmaster. The site loading velocity is amazing. It sort of feels that you are doing any distinctive trick. Moreover, The contents are masterwork. you’ve done a excellent task on this topic!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: