Simple CSS Tips that Go a Long Way

  • Tom Kenny

Sometimes it’s the little things that can make all the difference and there are plenty of neat little CSS tips that can help with all aspects of design and development. Here are a few great tips that will help you improve your CSS work and help you get the most out of your code.

simpleCSStips

Reset Browsers’ Default Styling

By default, browsers assign styles to certain elements. The problem with this is different browsers assign slightly different styles so by reseting this you can create a consistent starting base across the board.

The following code sample is Eric Meyer’s Reset CSS and is widely recognised as the standard for resetting default CSS. Make sure to include it in your code before your your own or it may overwrite anything you create.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

CSS Cursor Tip

If left unstyled, HTML buttons by default don’t react to a mouse hover. So when you hover over one, the little hand that is used as a standard on the web to indicate a link will not appear. To rectify this use a simple line of CSS:

input[type="button"] { cursor: pointer; }

This is a simple usability enhancement as anything clickable on the web has the behaviour of turning the mouse cursor icon into the recognisable hand icon. Take this functionality away and you risk causing the user to think that the button is not clickable.

CSS Sprite Images

Sprite images is the term for grouping multiple images into one single file and using CSS to position them as backgrounds to the elements. To see how this is performed, refer back to a previous tutorial here on Inspect Element, Create a Button with Hover and Active States using CSS Sprites.

Doing so reduces HTTP requests which will speed up your site. It will also prevent any flickering when hovering over an element which relies on loading a separate image for its hover state as it will already be loaded in the sprite image.

Examples

nav

Image sprite used for the navigation on ngmoco's Plus site.

Sprite image used on Amazon

Transparent PNG sprite image used on Amazon.co.uk

Focus States for Form Fields

As you will notice in Eric Meyer’s Reset CSS, he has given outline: 0 to everything containing :focus. This removes the default outline browsers render when an element such as a form field has focus. He also clearly states that you should remember to define focus styles.

input:focus { border: 2px solid #972324; }

Forms with clearly defined focus states provide greater usability due to the distinction of which field the user is currently on.

Examples

authenticJobsFocus

neutronForm

Useful Comments

Inserting comments into your CSS file can benefit anyone who else who works on the same site. It can even remind yourself of what you did previously with a helpful comment. Elliot Jay Stocks shows that you can also help anyone who is just taking a sneaky peak at your code.
/* TUTORIAL: http://perishablepress.com/press/2008/08/04/two-column-horizontal-sequence-wordpress-post-order */

Including a link to a tutorial that you used to achieve something on a site is a good way of helping other people find out how you did it as well as giving yourself a good point of reference should you need to use it again in the future.

Center Elements Horizontally

CSS was never intended as a method of content layout but it has been adapted to do so since it was introduced. This is why you will see layouts created with properties such floats and negative margins which certainly not what they were originally designed for.

Another discovery of CSS is centering elements. The code below will center an element that has an ID of container.

#container { width: 960px; margin: 0 auto; }

A common use of this is to center a website within the browser. Setting the margin to 0 and auto applies nothing to the top and bottom of the container and auto to the left and right which is what centers it left and right. Also, a width must be set or else it won’t center.

Unfortunately you can’t just switch the 0 and auto around to center elements vertically as first crossed my mind when I was learning CSS. There are other ways to achieve this but aren’t always perfect.

Override Inline Styles

In the order of specificity, inline styles takes absolute precedence. The only way to override inline styles is to declare a CSS property as important as follows:

div { color: #fff !important; }

Keep in mind that this should only be used as a last resort. You shouldn’t be using inline styles anywhere in your HTML code but you may come across situations where third party scripts apply their own styles inline. In this instance overriding it with this method may be your only option but, once again, it should only be used as a last resort.

Easily Find Elements to Fix Problems

Simply add a red border to an element through CSS as a temporary measure if you’re having problems finding where a div, header or any other element is or what is potentially causing an issue with your layout.

.element { border: 1px solid red; }
It’s a technique that the developers I work with use and it works wonders!

Print Style Sheet

When printing a website, you don’t want to print it as you see it on screen because it:

  1. is a waste of ink
  2. is a waste of paper
  3. includes unnecessary information

By creating a separate CSS file for the purpose of printing, you can create a new layout that gets the most out of the print media. Simple things like hiding common web elements such as the navigation, sidebars and the footer. All of these sections aren’t relevant in the print world, especially the navigation. By doing this, you can focus on the content which is the part that the user wants printed. Keep your logo at the top of the screen so your branding is still there for reference.

Add the following line of code to your HTML and direct it to your print CSS file. Notice the media has been set to print.

Make sure to check out the print stylesheet tips over at A List Apart for specifics when creating them.

More

There are many more tips out there but this is a good starting point for now. I will be revisiting this in the future and showcasing some more examples. For now I recommend you head over to the excellent CSS-Tricks by Chris Coyier for almost all things CSS.