Some useful CSS utilities, classes & hacks

By Colm McBarron | 8 Comments

When I’m creating a typical standards based design I often use a standard collection of css properties to do very common things, so I don’t have to write classes or do as many browser hacks as I would have to do normally.

To reset all margins and padding.

* {

   padding: 0;

   margin: 0;


To make sure that there are no borders on fieldsets or images.

fieldset,img {

   border: 0;


Give Internet Explorer a tags a height, this solves a number of bugs/issues the IE has with a tags, especially when it comes to navigation and increasing their hit area.

* html a {

   height: 1px;


An accessible way to hide text from a visual agent.

.hidden {

   position: absolute;

   top: -1000px;

   left: -1000px;


Form elements tend not to resize in some browsers when a user increases the text size, so by giving them a font-size this allows them to increase in size along with the form element, also textarea’s tend to use a default font face of courier instead of the fonts you’ve specified on your page.

input, select, textarea {

   font-size: 100%;

   font-family: inherit;


Download the css file with all these in it.

This is by no means a comprehensive list but these are pretty invaluable to me for most projects.

Can you add any more?


8 responses to “Some useful CSS utilities, classes & hacks

  1. Thats very useful, cheers for that. I see a lot of people using the Yahoo! “reset css”[1], which whilst useful tends to leave the web developer with a lot to do.

    For example many forget that when you apply padding 0px; to all elements , you then have to go and specify your paragraph and ul margins/padding, otherwise paragraphs are difficult to read etc.


  2. Personally I’m a big fan of reset everything, it sorts out a ton of issues with padding/margins that can throw off a design. But then again I also have a default set of rules for the content area of a page :)

  3. Conditional comments for IE only stylesheets eg:

    Also, this one when you have a fixed-width, centred page, to force Safari & Firefox to always show a scrollbar and stop the page shifting when you go from page to page:

    html { height: 100%; margin-bottom: 1px; }

  4. Kevin – I probably should have phrased that a little better, it’s to do with when you use an a tag for a menu item or other clickable object on a page, the hit area in IE is just the word even if you use ‘display: block’ adding a height in IE forces it to fill the space it should.

Comments are closed.