• RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
Home > CSS, Front End Development > Useful CSS Techniques You Might not Know About

Useful CSS Techniques You Might not Know About

May 10th, 2009

Here is a collection of userful CSS techniques that will help make your life easier for everyday CSS.

Centering Div

This CSS is great for centering any element on the page.

The CSS:

1
2
3
4
5
6
7
8
9
body {
text-align: center;
min-width: 600px;
}
#wrapper {
margin:0 auto;
width:600px;
text-align: left;
}
Min-Height IE Fix

Internet Explorer 6 and lower the min-height property doesn’t work. Fortunately the !important property is ignored aswell. So only the height property is applied for IE 6 and lower.

1
2
3
4
5
#selector {
min-height:500px;
height:auto !important;
height:500px;
}
Header Replace

This CSS replaces header text with an image. This is great for keeping the header text around for SEO/availablity purposes.
The HTML:

1
2
3
<h1>
Title
</h1>

The CSS:

1
2
3
4
5
6
h1{
width: 350px;
height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
}
Link Icons

To make things more clear for users, it’s nice to have an icon beside certain types of anchor tags, like pdf icons beside links to pdfs.

The HTML:

1
<a href="files/holidays.pdf">View Holidays</a>

The CSS:

1
2
3
4
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
Sticky Footer

Ever wanted to keep a footer at the bottom of the page…well here you go. The important part of this is the min-height:100% It keeps the footer pushed to the bottom.

The CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer,
.push {
height: 4em;
}

The HTML:

1
2
3
4
5
6
7
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
Shiny Text

Make your text leap into web 2.0 with shinny text. It overlays a transparent gradient overtop of the text. This won’t work for Internet Explorer 6 and earlier because it can’t handle tranparent PNGs.

The HTML:

1
2
<h5>Shiny Text</h5>
<h1><span></span>CSS Gradient Text</h1>

The CSS:

1
2
3
4
5
6
7
8
9
10
11
12
h1 {
font:100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
Other CSS Resources
  • RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
Author: Shawn Categories: CSS, Front End Development Tags: ,
Comments are closed.