10 Useful CSS Skills Maybe You Don’t Know

Reading-The-Book-icon We have learned 10 CSS Essential Skills before, the following is 10 useful CSS skills maybe you don’t know. Of course, if you are an experience CSSer, please skip this article. :) Or left a comment to share more skills to us. Hope you enjoy it.

1. Shortening CSS Font Style


Normally you can define the font with css like:

font-size:1em;
line-height:1.5em;
font-weight:bold;
font-style:italic;
font-variant:small-caps;
font-family:verdana,serif;

In fact, you also can do the same like following:

font: 1em/1.5em bold italic small-caps verdana,serif

Please notice, you must define font-size and font-family attribute, the others like font-weight, font-style,font-varient can be elided—default value will be used.

2. Using Multi-class Together


Usually we assign one class for one attribute, but it not means we only can assign one—in fact, you can assign how many you want.

<p class="text side">…< /p>

3. CSS Border Default Value


When you write css for border, you would set the color, width and other style. For example:

border: 3px solid #000

In fact, if you set the style solid, the default width value will be set 3-4px, and the default color will be set to the font’s color. So if this is what you want, only solid be needed, the other can be elided.

4. !important Will Be Elided By IE


In the css, normally the last setting takes precedence, however, any marked behind !important statement will be an absolute priority, besides IE. For example:

margin-top:3.5em !important;margin-top:2em

The top bound is 2em on IE, and 3.5em on others.

5. Replace Images


We will write HTML like following:

<h1><img src="/widget-image.gif" alt="Buy widgets"/></h1>

because we want the keywords “Buy widgets” can be indexed by search engine.  Maybe the following is a better solution, isn’t it? :)

HTML code:

<h1><span>Buy widgets</span></h1>

CSS code:

h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
position:absolute;
left:-2000px;
}

6. CSS Box Model Hack


Why does the CSS box model need a hack?  According to the W3C, an assigned ‘width’ (and ‘height’) of a box refers to the ‘content area’ of a box only. The padding, borders, and margins are then added to this value to arrive at the total box width. If the ‘width’ property is omitted, the total box width is the same as the ‘content area’ of the surrounding container element. All well and good. Unfortunately, all CSS enabled versions of IE before IE6/strict use a different box model. Consider the following CSS:

#box
{
width:100px;
border:5px;
padding:20px;
}

and HTML code:

<div id="box">…</div>

When viewed in a ‘standards’ browser the dimension from border edge to border edge will be ’150px’. (100+5+5+20+20=150)  But before IE6 version, the width is 100px.

A CSS hack:

#box
{
width:150px;
}

#boxdiv{
border:5px;
padding:20px;
}

and HTML code:

<div id="box"><div>…</div></div>

Then the width is 150px on all browsers.

7. Center Block Element


If your sites use fixed width layout and all contents be placed on center.  The css probably similar the following:

#content
{
width:700px;
margin:0auto;
}

All contents  in <div id="content">< /div> will be center. But if you want your sites work fine for all browsers( include IE6 above ), you need to change like following:

body
{
text-align:center;
}

#content
{
text-align:left;
width:700px;
margin:0 auto;
}

8. Vertical Center With CSS


Vertical center is very simple for a table element, only need to set the cell: vertical-align:middle. But it is not applied to CSS layout. For resolve this issue, we only need to set the cell height and box height the same.  For example, a navigation menu height is 2em, only need to add:

line-height: 2em

into the css, then vertical center is done.

9. CSS Locate on Container


We can locate an object anywhere in the HTML document, of course on a container. Consider the following CSS:

#container
{
position:relative;
}

and HTML code:

<div id="container"><div id="navigation">…</div></div>

If you want to place the navigation left 30 px, top 5px, then the css similar:

#navigation
{
position:absolute;
left:30px;
top:5px;
}

10. Extend The Background Color To The Bottom of The Screen


If you place a navigation menu on the left sidebar, set page background to white, and you hope navigation’s background be blue, consider the following CSS:

#navigation
{
background:blue;
width:150px;
}

it seems work fine, but the issue is, the navigation will not extend to bottom, then background will not yet. So we can do it like:

body
{
background:url(blue-image.gif) 0 0 repeat-y;
}
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

2 Responses to “10 Useful CSS Skills Maybe You Don’t Know”

  1. Jacob Ras says:

    Already knew them, but nice list!

  2. Timothy McClanahan says:

    If you use a strict DTD, you don’t need the box model hack, IE will magically work the way the spec says (as far as the box model is concerned, anyway).

Leave a Reply