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.
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
Image sprite used for the navigation on ngmoco's Plus site.
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
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:
- is a waste of ink
- is a waste of paper
- 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.
nice article Tom … looking forward for more tips man ..
Great tutorial (lol… I also really like the astonishing typography of your site)…
Also remember that the !important statement is not recognized by IE<6 so it's a good way to tell something different to all the other savvy browsers (including IE7 and 8 which are not not savvy).
great job. the simple things we sure overlook a great deal. thanks for this.
thanks for this great tips
(On CSS Cursor Tip
input.button { cursor: pointer; })I think you can also use this snippet instead of defining a whole new class for input buttons:
input[type="button"] { cursor: pointer; }Nice tips.. thnks..
Instead of adding a class to each button, consider using CSS attributes, thus: input[type="button"] {cursor: pointer}; will automatically style all button elements.
Just a thought.
Great CSS tips that can really enhance a well structured site.
cool, nice! i need to bm this..
nice reminder…
Thank you very much for these good CSS tips: especially the resetting of browsers’ default will be really useful.
@le and @dan, indeed you can. I completely forgot about that when writing this article. Edited the article to reflect this.
Thanks!
That Meyer Reset is out-of-date. Make sure to use the most recent version: http://meyerweb.com/eric/tools/css/reset/index.html
Great content, as someone who is deep into learning css I found that most of these points were relevant when I started out, and have helped me a great deal since. Although I must say that using reset.css may not be the best recommendation for new coders. From my experience it was better to figure out what elements had what styles assigned to them and remove them when necessary. I found it a better way of learning what the inherent properties of the elements were, and therefor speeding up the learning process.
Regarding your tip ‘Easily Find Elements to Fix Problems’.
Try
.element { outline: 1px solid red; }
instead of
.element { border: 1px solid red; }
Border adds space in width and height – outline just shows up on your page and doesn’t add extra space and destroys your layout.
Instead of this debug line:
.element { border: 1px solid red; }
Try this instead:
.element { outline: 1px solid red; }
`border` will affect layout (i.e., will reposition `.element` by a few pixels, depending on border width), while `outline` does not. However, `outline` doesn’t work in IE 8 or below; `background` is a good substitute that also generally doesn’t affect layout.
If only webkit respected focus attributes and didn’t surround every focused input with glowing borders. Great tips!
To reset browser *basics* settings, I guess that a one line piece of code would do:
* { margin:0; padding:0; }
Warning: Outlines shouldn’t be removed or you will brake accessibility on your website.
@Tom,
Keep in mind that the attribute selector (i.e. input[type="button"]) doesn’t work in IE6. Not a big deal, but would be important to remember for a client project.
Great article for CSS tips. Bookedmarked.
Tom, Using outline is better to identify issues as it will not effect the elements around it because it does not take space like a border does. Outline also considers the edges.
holy crap everything in this footer is huge! anyway, some good (although perhaps basic) tips. i’m sure it’ll help some design peeps.
I use background instead of border when debugging the style sheet – border can add 2px from the sides and break the layout.
Thanks for the tips!
Heard most of these before. But a worthwhile list! Another good tip is to create individual smaller more manageable style sheets for layout, type, colour etc. Rather than one behemoth with thousands of lines. Although apple+shift+L “jump to line” shortcut in coda helps too!
Thanks for these great tips, love to use them in my next design.
some of are know but some are new and good css tips
Hi,
If you want to reset every element (including inputs etc.) which isn’t specified at the top I think you can just use:
[code]
*{
margin:0px;
padding:0px;
}
[/code]
I would use the .element { border: 1px solid red; } trick all the time till I found Firebug.
nice collection of tips, the printable css stylesheet should be used more on modern websites
Great writeup! I have linked to this article from my website.
Thanks for the awesome CSS tips! I think resetting the default styles is extremely helpful when you want to start with a totally clean slate.
width + margin:0 auto; to center horizontally… i can’t believe i didnt know that one!!!
superb write up…
Very nice ideas! I like it and brings me still to be a better designer !
Love the article.
some caveats to using css resets, both of them performance related:
1. don’t just use a reset style sheet out of the box. Instead of overwriting a rule from the reset sheet, edit/refactor the reset sheet to avoid redundancy. Also, when your markup is finalized, remove unused selectors and rules from the reset sheet. There’s a great firefox plugin that helps you with this called dust-me selectors.
2. Don’t use a universal selector (*) to perform a reset. This is only going to slow down the rendering of your page, since the css engine has to apply your rule to all of the elements then override them later.
Very Nice Article! Thanks for sharing.
I kind of disagree on the first one (css reset) but that’s my personal preference.
Using margin to center horizontally doesn’t work on some older browsers. It’s common to pair these CSS attributes with a text-align:center on the parent element (like body) and a text-align:left on the element you want to center (in this case, #container).
And probably the most helpful tip I can provide:
Add overflow:hidden to the parent elements of floating elements. This solves all of the issues with Firefox not setting correct height’s on the parent element and has no adverse effects in other browsers.
Hi, nice post
but:
“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.”
the “following line” doesn’t appear
Great – like that reset to default idea as basic code.