10 Useful CSS Tricks to Conquer the World

Well, that might be a slight exaggeration, but these CSS tricks are sure to help improve your toolset! We wanted to drop this article as we use these CSS gems on almost every site we design, yet once upon a time never knew they existed. We’ve also ordered the list so each tip should follow the last in terms of practive & usability.

Hopefully they will give you some new experimentation for your next designs 🙂

1. Reset browser defaults then reset the browser font size

We start with the first lines of CSS any design should use! We know we’ve mentioned the reset before, but it’s a priceless tool. The first part of this is to use the Yahoo UI Reset CSS Package. This resets css tricksbrowser inconsistencies, giving you a fresh & clean foundation to build upon. If you don’t want to download the 9mb file, the code is below:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }

Secondly, we like to reset the browser font size to 10 pixels, by using the following line:

html {font-size: 62.5%;}

This is a good font size to work with, as you can then use em units. For example, paragraphs at 12 pixels and header 1 at 20 pixels? Then write…

p {font-size: 1.2em;}
h1 {font-size: 2em;}

2. Design centered horizontally (fixed width)

Most websites at current are fixed width. Its debatable whether liquid or fixed is the way to go, but usually your client’s audience & market dictate this. To center your layout, apply this CSS code to the wrapper/container div of your page:

div#container {margin: 0 auto;}

3. Controlling position:absolute, relatively

Setting elements with position:absolute allows for complete control over its positioning through a css-fun6distance of either top, left, right or bottom. This distance is calculated from the page boundary (body), unless we nest it inside an element set to position:relative

This may sound confusing, so look at the example below:
Relatively
Absolutely!

If we did not set position:relative to the outside div, then the nested div’s position would instead be relative to the next element up until it finds one, such as the page boundary. You can use this to help with complex layouts.

4. Position an element center screen

If you’d like to position something perfectly center on screen, then use the CSS below

div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}

You must specify the width and height of your div explicitly, and then give it negative margins half of dimensions for top and left, which brings the div back center screen.

5. Global rules that can be re-used

.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}

Setting yourself a few CSS selectors at the opening of your stylesheet can aid your development. Whenever they are required you can simply add the tag depending on your choice.

Our example shows the use of this with images within a blog post, the result of which is here to the right!

6. IE6 double margin on floated elements

A common problem found when working on a design, reasons behind which we’re not even going in to! But it is there alongside all the other lovely ways IE6 likes to feel individual. To correct this problem use display:inline.

div {float:left;margin:40px;display:inline;}

7. Simple navigation bar

It’s always useful to have a default navigation bar to paste into your designs. The CSS here turns a standard unordered list into a horizontal bar of lovely links! First comes the XHTML:

<div id=”navbar”>
<ul>
<li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li>
<li><a href=”http://www.google.com””>Google</a></li>
<li><a href=”http://zenhabits.net/”>Zen Habits</a></li>
</ul>
</div>

Followed by the CSS:

#navbar ul li {display:inline;margin:0 10px 0 0;}
#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
#navbar ul li a:hover {background:#eee;color:black;}

8. Table-less contact form

As we now proceed with building websites table-free, focusing on using DIVs instead (until CSS3 it seems), it’s great to be able to style forms also in the same manner. No longer are tables needed to hold columns and fields in order, all we need is some neat CSS. Found over at JeddHowden.com, we float each form input’s label next to the input box.

XHTML:

<form action=”form.php” method=”post”>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for=”first_name”>First Name:</label>
<input type=”text” name=”first_name” id=”first_name” size=”10? value=”” />
</div>
<div>
<label for=”last_name”>Last Name:</label>
<input type=”text” name=”last_name” id=”last_name” size=”10? value=”” />
</div>
<div>
<label for=”postal”>Zip/Postal Code:</label>
<input type=”text” name=”postal” id=”postal” size=”10? value=”” />
</div>
</fieldset>
</form>

CSS:

form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}

9. Footer hooked to browser bottom

This is an old gem, and all credit goes to The Man in Blue. This CSS hook allows you to ensure your footer stays at the bottom of the browser window. Here is the XHTML:

<body>
<div id=”nonFooter”>
<div id=”content”> *Place all page content here* </div>
</div>
<div id=”footer”> *Place anything you want in your footer here*
</div>
</body>

Followed by the CSS:

html, body { height: 100%; }
#nonFooter { position: relative; min-height: 100%; }
* html #nonFooter { height: 100%; }
#content { padding-bottom: 9em; }
#footer { position: relative; margin-top: -7.5em; }

10. Multiple classes applied to one element

This is not so much useful code, as more of a useful feature most people overlook within CSS selectors. Any element you apply classes to, can have as many classes as you like. For example:

.red {color: red;}
.bold {font-weight: strong;}

We can apply both of these to a paragraph if wanted, by doing the following:

<p class=”red bold”>This text will be red yet also bold!</p>

Hopefully we may have enlightened some readers and given you some ways to use useful CSS in real websites. Sorry that this is the only article we’ve written this week, but our work flow has been quite hectic! Enjoy your weekends and we will have some new content for you Monday 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *