47 CSS Tips & Tricks To Take Your Site To The Next Level

CSS is a wonderful language for presenting web pages. It’s not too difficult to learn, though like most things, it does have a learning curve. Where many people seem to get tripped up is in specific solutions to specific problems. Fortunately there’s a good chance that someone before you has already had the same problem and even better has found a solution.

Here are 47 of those solutions. 47 CSS Tips, Tricks, and Techniques to add to your CSS toolbox. Some you may be familiar with while others may be new to you. The tips below span from beginner to more advanced CSS code. Hopefully you’ll find a few techniques that will be both new and useful to you and perhaps some will find their way into your next project.

For those, who don’t know what is CSS? And what it can do? Than CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

Please follow the link below for detail introduction.

CSS always plays a vital role in web design and it always gives you opportunity to make your website user friendly. Unfortunately, there is no well defined way for you to find out about visitors thinking towards your blog or its design. It’s always essential to play safe and give others what they like using creative solutions. CSS isn’t always easy to deal with. Over the last many years web-designers and developers have written many articles about CSS and developed many useful tips and techniques, which can save you a lot of time – of course, if you are able to find them in time. That is the only reason why we created this article to give you as many as CSS tricks in a single place.

You may be interested in the following related articles as well.

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

CSS Tips, Tricks, and Techniques for Your Website

If you’re working with WordPress then of course, the WordPress Codex is always the best place to learn about WordPress and its tweaks with CSS. However, if you are into web designing business than there are thousands of resources available for CSS tips. But unfortunately, it’s too much for a simple user. This the only reason we compiled this fairly comprehensive list of the 47 Exceptional CSS Tips, Tricks, and Techniques to unleash the power of your favorite mark-up language.

Most of these tips what follows will work cross-browser. Where there are differences between browsers alternate solutions have been provided if they exist. With that said let’s dive in.

01. Horizontal Centering

To horizontally center block level elements in CSS you need three things. You need to explicitly set a width on the element, set the left and right margins to auto, and include a proper doctype to keep older versions of IE from going into quirks mode.

div#page {width: 960px; margin: 0 auto}

The above will center the div with an id of page inside it’s parent container.

02. Vertical Centering Text with Line-Height

If you want to vertically center text within a containing block who’s height is fixed, simply set the line-height of the text to be the same as the height of the containing block

The HTML:

<div id="container">some text here</div>

The CSS:

div#container {height: 35px; line-height: 35px}

03. Vertical Centering Block Level Elements

Positioning can be used to vertically center block level elements.

The HTML:

<div id="content">your content here</div>

The CSS:

div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}

The top left corner of the div will be positioned 50% from the top. Since we want the center of the div to be positioned 50% from the top you need to set a negative top margin equal to half the height of the div.

This same trick works for horizontal centering as well. Change top to left and margin-top to margin-left and set the negative margin to be half of the width of the element.

div#content {position: absolute; top: 50%; left:50%; width:800px; height: 500px; margin-left: -400px;  margin-top: -250px}

The above CSS will center the element both vertically and horizontally.

04. Fluid Images

To create fluid images set a max-width on the images to be 100%

img {max-width: 100%}

Unfortunately IE doesn’t do max-width. However IE treats the width property as though it was max-width. For IE use a conditional comment and set

img {width: 100%}

For a more details about creating fluid images in older versions of IE click the link above.

05. 3D Buttons with CSS Only

3D CSS buttons are easy to create. The trick is to give your elements borders with different colors. Lighter where the light source shines and darker where it doesn’t.

div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }

The CSS above will create a button with the light source at the upper left. Usually one or two shades of color change is all that’s needed, but you can experiment for different effects.

06. CSS Font Shorthand

When using shorthand on the font property you need to specify each property in the following order

body { font: font-style font-variant font-weight font-size line-height font-family; }

You don’t need to include every property, but know that for any you don’t include that property will be reset to it’s default.

07. Setting Multiple Classes on an HTML Element

instantShift - CSS Tips and Tricks

Easy and easy to forget the proper syntax. If you want to set multiple classes on an html element it should look like:

<div class="class-1 class-2 class-3">
</div>

with all class names inside the same set of double quotes with a space between each. The CSS specificity is controlled by the order of the classes in your CSS file. If your CSS has:

class-2 {color: blue}
class-3 {color: green}
class-1 {color: red}

then text inside the div will be red as class-1 is the last declared in the CSS. The order the classes appear in the html is irrelevant.

08. Rounded Corners

instantShift - CSS Tips and Tricks

When CSS3 is fully supported across browsers rounded corners will be as simple as:

.element {border-radius: 5px}

which will set a 5px radius on all 4 corners. For now we need some browser specific CSS combined with a little JavaScript to make this work in all browsers.

In Safari, Chrome, and other webkit browsers we use -webkit-border-radius and in Firefox and other Mozilla based browsers we use -moz-border-radius.

.element {
	border-radius: 5px
	-webkit-border-radius: 5px
	-moz-border-radius: 5px
}

Webkit and Mozilla use different syntax when specifying one corner.

.element {
	border-top-left-radius: 5px
	-webkit-border-top-left-radius: 5px
	-moz-border-radius-top-left
}

For non Webkit and Mozilla browsers a little jQuery plugin will mimic the border-radius property.

$(".element").corner("5px");

The jQuery corner plugin allows for more than setting the radius of the corner. You can also set the corner to show as a number of other patterns.

09. Link Style Order

When setting CSS on the different link states, the link states need to be set in a particular order

a:link  
a:visited  
a:hover  
a:active

An easy way to remember is LoVe HAte. LVHA – Link, Visited, Hover, Active.

10. Clearing and Containing Floats

There are two basic methods to clearing CSS floats. The first is to use the clear property

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>

Say in the above html you have your content and sidebar div floated to the left and you want to ensure the footer div sits below both. You would use the clear property

#content {float: left}
#sidebar {float: left}
#footer {clear: both}

You could also use clear: left or clear: right depending on which way the content and sidebar are floated.

If on the other hand your html was:

<div id="header">
	<img id="logo" src="" alt="">
<p id="tagline">

</p></div>

and both the logo and tagline are floated, your header div will collapse and show as having 0 height. You can either add an empty div (<div class="clear"></div>) and then clear the empty div as above or you can use the overflow property on the header div to contain the floated elements

div#header {overflow: hidden}

The above will keep the header div from collapsing even if everything inside has been floated.

11. Conditional Comments

instantShift - CSS Tips and Tricks

Conditional comments are an ideal way to target IE browsers only, since IE is often the browser that won’t cooperate. The basic form of a conditional comments is:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
< ![endif]-->

The above will load an IE specific stylesheet only when the browser viewing the page is Internet Explorer. You can further target specific versions of IE.

<!--[if IE 6]> - targets IE6 only -->
<!--[if gt IE 6]> - targets IE7 and above -->
<!--[if lt IE 6]> - targets IE5.5 and below -->
<!--[if gte IE 6]> - targets IE6 and above -->
<!--[if lte IE 6]> - targets IE6 and below -->

You can specify any version of Internet Explorer and through a combination of conditional comments you can server different CSS styles to different versions of IE.

12. HTML Hack for IE

Another way to target IE specifically is to use the HTML * hack. Internet Explorer allows you to use something other than the html element as the root of your document. By placing an * in front of html in your CSS (*html) you can target IE only as other browsers will ignore the declaration.

div#content {width: 580px}
* html body div#content {width: 600px}

IE will use 600px for the width of the content div, while other browsers use 580px.

The above works for IE6 and below. When not in standards mode, but in quirks mode this will work on IE7 as well. You can also target IE7 (in quirks mode) specifically with

*+html body div#content {width: 620px}

13. CSS Specificity

When two or more CSS selectors are sending conflicting instructions to a single html element, a choice must be made as to which styles to apply. This is done through CSS specificity calculations and is expressed in the form of (a.b,c,d)

Element, Pseudo Element: d = 1 – (0,0,0,1)  
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)  
Id: b = 1 – (0,1,0,0)  
Inline Style: a = 1 – (1,0,0,0)

In the following examples the specificity increases as you move down

p: 1 element – (0,0,0,1)
div: 1 element – (0,0,0,1)
#sidebar: 1 id – (0,1,0,0)
div#sidebar: 1 element, 1 id – (0,1,0,1)
div#sidebar p: 2 elements, 1 id – (0,1,0,2)
div#sidebar p.bio: 2 elements, 1 class, 1 id – (0,1,1,2)

14. min-height fix for IE

Sadly IE still doesn’t comply with min-height. However it does treat the height property as though it was min-height. Knowing that, we can sort of get min-height working in Internet Explorer.

.element {
	min-height: 500px
	height: auto !important
	height: 500px
}

The first line above sets the min-height for non-IE browsers. The last line essentially sets min-height in IE as IE will treat height as we expect it to treat min-height. The middle line above is to ensure that non-IE browsers don’t use 500px as the height of the element. Using !important will override the height declaration below in all browsers, except IE.

Another way to target IE only is to use _height. Only IE6 will treat _height as height. All other browsers will ignore it. You have to specify _height after any height declaration as IE will use whichever comes last.

.element {
	min-height: 500px
	_height: 500px
}

15. Base Font-Size

Using fluid measurements like 'em' or % on your fonts is a great way to help create more fluid designs. It can be a pain though to calculate ‘em’s for every different element. A simple trick is to set your base font to be the equivalent of 10px. Since the default font-size of browsers is 16px you can set a base font-size with the following:

body {font-size:62.5%}

10/16 = 62.5%

Now if you want your h1 to be 24 px the calculation is much easier

h1 {font-size: 2.4 em}

16. 100% Height

100% height is one of those things CSS doesn’t do so easily. When you specify an element to have a height of 100%, the 100% refers to the containing element’s height. The containing element would then need to be 100% the height of its containing element and so on. The trick is to set the height of the outermost elements to be 100%

html, body {height: 100%}

We need to add one more thing. If your content exceeds 100% height then it will overflow its container. To correct this we’d need to set min-height on the content’s container

#content {min-height: 100%}

You can use one of the methods above for serving min-height to IE.

17. CSS Drop Caps

Drop Caps can easily be styled by taking advantage of the CSS pseudo-element :first-letter.

p:first-letter {
	display: block;
	float: left;
	margin: 5px 5px 0 0;
	color: red
	font-size: 1.4em;
	background: #ddd;
	font-family: Helvetica;
}

This should work in all modern browsers. CSS3 introduces the ::first-letter notation to distinguish between pseudo-elements and pseudo-classes, but this new notation is not yet compatible with IE. For now use the single :first-letter notation.

18. Remove Dotted Outline on Links

Easy with the CSS outline property

a {outline: none} or a {outline: 0}

The outline is useful for accessibility so think twice before turning it off completely. You may only want to set it for one of the specific link states mentioned above.

19. Text-transform

Through the CSS text-transform property you can make sure certain blocks of text are either uppercase, lowercase, or only the first letter of each word is uppercase

p {text-transform: uppercase}
p {text-transform: lowercase}
p {text-transform: capitalize}

20. Font Variant

Another trick with type is to use the font-variant property to create small caps

p {font-variant: small-caps}

If the font you’re working with doesn’t have a small caps variation, know you’ll be creating pseudo small caps, which may or may not look as good as you’d like.

21. Removing the Border from Image Links

By default any image that is wrapped in a link will have a border around the image (similar to the way text is underlined). Removing the border is simple

a image {border: none} or a image {border: 0}

Since I never want to see the border around image links I usually set the above on every site I develop.

22. Using a CSS Reset for Cross-Browser Compatibility

instantShift - CSS Tips and Tricks

One of the issues in cross-browser web development is that different browsers use different default values for various CSS properties. By explicitly setting a property like margin to be 0 for certain html elements we can assure that the margin will be 0 on that element in all browsers.

The best way to do that is to use a CSS reset file like the ones developed by Eric Meyer or Yahoo or you can develop your own.

Using a CSS reset ensure that all browsers are on the same page so to speak.

23. Setting Padding on Background Images

Since background images don’t create a new CSS box you can’t directly set padding on them. What you want to do is use the background-position property on the background image to create the same effect.

background-position {top-value left-value}

Top values can be top, center, or bottom and Left values can be left, center, or bottom

Both can also take values in % or px or any other measurement. So to create 5px of padding around a background image you would use:

{background-position: 5px 5px}

24. Stretching a Background Image

To create a background image that can expand and contract with it’s containing element you want to create an image larger than needed, large enough to accommodate the largest possible size of the containing element. Then use the background-position property to center the background image

{background-position: 50% 50%}

The above will center your background image in the containing element. The image will grow and shrink to fit the size of the containing element and always be centered. You’ll want to make sure the center of the image contains the most important part of the image since only the center is guaranteed to visibly show.

25. Wrap Links Around a Background Image

Again since a background image doesn’t create a new CSS box you can’t directly wrap a link around it. You can either wrap the link around the containing element or wrap the link around all the content inside the containing element.

<a href="">
<div id="bkgd-image">

your content here

</div>

</a>
<div><a href="">

your content here

</a></div>

Either of the above will essentially let someone click your background image as though it were a link.

26. Background Images as List Bullets

instantShift - CSS Tips and Tricks

Sometimes it’s nice to be able to use an image as a bullet instead of one of the supported list-style-types.

ul {list-style: none}
ul li {
	background-image: url("path-to-your-image");
	background-repeat: none;
	background-position: 0 0.5em;
}

27. Swap Background Images on Hover

There are two very similar ways to achieve this. The key in both is to use the :hover pseudo-class to change either the url of the image or the position of an image sprite

.element {background-image: url("path-to-an-image")}
.element:hover {background-image: url("path-to-a-different-image")}

.element {background-position: top-value left-value}
.element:hover {background-position: different-top-value different-left-value}

Unfortunately IE only accepts :hover on a link and not another element. You can use something like the suckerfish system to dynamically add a class for IE and simulate the :hover behavior.

28. Visibility or Display?

On the surface both the CSS visibility and display properties seem to do the same thing, hide or show an element on the page. Beneath the surface they work differently.

  • {visibility: hidden} – The element holds the space, but isn’t seen
  • {display: none} – The element does not hold space. Other elements collapse to fill the space

Most of the time you likely want to use display: none, unless your goal is to leave an empty open space on your page.

29. Cross-Browser Transparency

Not all browsers currently support the CSS3 opacity property. However we can still make transparency work across browsers.

.element {  
    filter:alpha(opacity=50);  
    -moz-opacity:0.5;  
    -khtml-opacity: 0.5;  
    opacity: 0.5;  
}

From the bottom up:

opacity is the CSS standard and will work in current Webkit and Mozilla browsers as well as Opera

  • -moz-opacity is for older versions of Mozilla Browsers
  • -khtml-opacity is for older versions of Safari and any browser using the khtml rendering engine
  • filter:alpha(opacity=50) is for Internet Explorer

30. Target IE7 (and below) and IE6 (specifically) without Conditional Comments

instantShift - CSS Tips and Tricks

We all know how difficult IE can sometimes be when it comes to CSS. However instead of cursing IE under your breath or out loud you can easily write IE specific code that other browsers will ignore. My own preference is for conditional comments, but here’s a quick trick you can use in your main CSS file.

.element {
	background: red; /* modern browsers */
	*background: green; /* IE 7 and below */
	_background: blue; /* IE6 exclusively */
}

With the exception of IE, all browsers will ignore the asterisk in front of the property. Everything other than IE6 will ignore the underscore. The order of the above properties is very important due to CSS precedence rules.

31. nth-child

The nth-child CSS pseudo-selectors allow you to target the 3rd or 7th or nth element in a list. Another use would be to style odd and even rows in a table differently. The alternative is to add a class specifically to the list-item you want to style differently, but that’s not very flexible. The nth-child syntax looks like this:

ul li:nth-child(3) {
	background: blue
}

The above would select the 3rd item in the list and give it a blue background

ul li:nth-child(3n+3) {
	background: blue
}

Similarly the code above would style every 3rd list item with a blue background

Unfortunately no current version of IE supports it. However there is a way to simulate the 1st bit of code above for IE7 and IE8.

ul > li:nth-child(3) is the same as ul > *:first-child + * + *  

The code above will also target the 3rd element in the list in a way that IE7 and 8 understand. Not quite as useful as being able to use (3n+3) to target every 3rd list-item, but better than nothing. Hopefully IE9 will support nth-child.

Another and perhaps more practical solution currently is to use jQuery, which supports all CSS3 selectors.

32. Basic 2-column CSS layout (fixed width, centered, header and footer, sidebar on right)

The above is a pretty common website layout and it’s rather easy to code.

The HTML:

<div id="wrapper">
	<div id="header">
	</div>
	<div id="content">
	</div>
	<div id="sidebar">
	</div>
	<div id="footer">
	</div>
</div>

The CSS:

#wrapper {width:960px; margin:0 auto}
#content {float:left; width:600px}
#sidebar {float:left; width:360px}
#footer {clear: both}

The specific widths are arbitrary, but it is necessary to include a width. The keys are centering the wrapper as described above in this post, floating both columns, and clearing the footer div. You could also float the sidebar div to the right. Either will work, though I find it easier to float both in the same direction.

33. Basic 3-column CSS layout (fixed width, centered, header and footer, sidebars on right and left of the content)

Expanding on the above 2-column layout is this common 3-column layout.

The HTML:

<div id="wrapper">
	<div id="header">
	</div>
	<div id="primary">
	</div>
	<div id="content">
	</div>
	<div id="secondary">
	</div>
	<div id="footer">
	</div>
</div>

The CSS:

#wrapper {width:960px; margin:0 auto}
#primary {float:left; width:230px}
#content {float:left; width:500px}
#secondary {float:left; width:230px}
#footer {clear: both}

Again the widths are arbitrary, but necessary. You can float the secondary div to the right if you prefer.

34. CSS Triangles and Other Shapes

CSS borders come together at an angle at any corner. This isn’t obvious when setting a border that’s the same color on all sides or if your border-width is only a few px. Making the width much larger and setting different border-colors on different sides lets you see this clearly. Taking advantage of these angles we can use the border-property to create some interesting shapes.

Creating a triangle is a matter of setting the border-color on 3 of the 4 sides to transparent. You also want to set the width and height of the element to be 0 in order for all 4 corners to meet at a point. You can set the border opposite the triangle to 0 as well, but the adjacent borders need to maintain a width or the entire element with borders will collapse to a single point.

The HTML:

<div class="triangle"></div>

The CSS:

.triangle {
	border-color: transparent transparent green transparent;
	border-style: solid;
	border-width: 0px 300px 300px 300px;
	height: 0px;
	width: 0px;
}

With a little experimentation you can create moe interesting shapes, especially if you combine several elements.

35. Prevent a Line Break

Sometimes the text in a link or heading will break where you don’t want it to. A simple way to prevent this is:

h1 { white-space:nowrap; }

36. Class vs. Id

Use an Id for elements that are used once and only once on a page

The HTML:

<div id="content"></div>

The CSS:

#content {background: #fff}

Use a class for elements that may be reused on the page

The HTML:

<p class="large-text">
</p>

The CSS:

.large-text {font-size: 1.4em}

37. Replace Text with an Image

Better typography through more font choices is here, but there are still limitations to using it in practice. Sometimes the easiest solution is to use an image. However you also want the original text to be there for search engines and screen readers. A simple way to have both text and image is to use the text-indent property.

h1 {
	text-indent:-9999px;
	background:url("h1-image.jpg") no-repeat;
	width:200px;
	height:50px;
}

The height and width should match those of your image

38. Style the Element that has Focus in a Form

A nice usability tip is to let people filling out a form know which input currently has focus. You can do this easily using the :focus pseudo-selector

input:focus { border: 2px solid green; }

This way your users will know exactly which field is ready for input

39. Understanding !important

!important is a way to override CSS specificity. In general it’s not the best solution since the more you use it, the more you end up needing to use it again. It can make your CSS unmaintainable in a hurry. It can be useful due to a quirk in IE. When you have something like the following

h1 {
	color: red !important;
	color: blue
}

browsers should show the h1 with a color red. IE, however will show the style that comes last instead of following the rules of precedence. So the above code would show your h1 as red in all browsers except IE where the color would be blue.

40. Simple Debugging in CSS

Sometimes your CSS doesn’t seem to be working like you expect and you want to isolate one element in your html to see what space it occupied. An easy way to do this is to give the element a border temporarily

.element {border:1px solid red}

One downside of the above is the extra px in the border could temporarily throw your layout out of whack, since it increases the width of your element. You may find at times it drops a floated element further down the page for example. Still it can be a quick and easy way to see what’s going on and you can overcome the width limitation, by temporarily decreasing the width you’ve given to the element to compensate for the extra width the border adds.

41. Create a CSS Frame for Images

instantShift - CSS Tips and Tricks

Many images look nice a frame. You typically frame pictures before hanging them on a wall so why not add a frame to images on your website. Just like what you can see how every article image here at instantShift is framed using modified verion of this very same trick.

The trick is to wrap your images in a div and add a simple class.

The HTML:

<div class="frame"><img src="" alt="" height="" width=""></div>

The CSS:

.frame {
	border: 2px ridge #000;
	 padding: 10px;
	background-color: #fff;
}

.frame img {
	border: 2px solid #ooo;
	padding: 1px;
	 margin: 10px;
}

You can use a variety of border-style values to create different looks to the frame (groove, ridge, inset, outset, double, dotted, dashed, solid). The padding and background-color on the frame div will create the look of a mat around your image. Adding border, padding, and margin to the image itself can create the effect of having a second mat around your image for an extra effect.

Once set up all you’ll need to do to add your frame to any image is wrap it with a div and assign the class. You can even create several different styles of frames and then pick and choose which to use for each image.

42. Mobile Specific Stylesheets

As more and more people are accessing the web via smart phones and other mobile devices we need to make sure our sites display well on different platforms. Fortunately html allows you to serve different stylesheets for mobile devices.

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">

43. Letterpress Type Through CSS

The basic idea is to make use of the CSS3 property for text-shadow to create the letterpress effect.

.element {
	color: #222;
	text-shadow: 0px 2px 3px #555;
}

The trick is to use a shadow color that’s lighter than the text color and offset it a little and add a bit of blur. The values above for the text-shadow property are:

text-shadow: x-offset y-offset blur color;

44. Setting Page Breaks For Print

Some people will want to print your pages and you may want your pages to print in a more readable form. For example you may have a table of data on a page and you’d prefer the entire table be printed on one page as opposed half the table ending up at the bottom of one page and the other half at the top of the next. CSS offers a way to force a page break in some places and prohibit in it others.

First you’ll need to direct your styles to printed media through @media print

<style type="text/css">
@media print
table {page-break-inside: avoid}
</style>

The above will tell printers to do what they can not to break the table over two pages. CSS provides a total of 3 properties related to printed page breaks. Possible values in parenthesis.

page-break-before (auto, always, avoid, left, right, inherit)

page-break-after (auto, always, avoid, left, right, inherit)

page-break-inside (auto, avoid, inherit)

45. Creating Circles With Border-Radius

The CSS2 border-radius property can be used to create circles in all browsers that support the property. The trick is to set the height and width of the element so they’re the same and set the border-radius of the element to be half that value.

.cirlce {
	width: 300px;
	height: 300px;
	background-color: red;
	border-radius: 150px;
	-moz-border-radius: 150px;
	-webkit-border-radius: 150px;
}

border-radius is the CSS standard property

  • -moz-border-radius is for Mozilla based browsers like Firefox
  • -webkit-border-radius is for webkit based browsers like Safari and Chrome

Unfortunately none of the above will work in any current version of Internet Explorer.

46. CSS Tooltips

You can create a lightweight CSS cross browser tooltip easily with a few lines of code.

The HTML:

This is the <a class="tooltip" href="#">Tooltip Link<span>This will be the text that shows up in the tooltip</span></a> You can place any text you want here.

The CSS:

a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline;  position:absolute;}

You can add more styles to the above to suit your design. The key is the span is set to display: none until you hover over the link. When you hover over the link the display is changed to show inline and given a position of absolute. position: relative is necessary on the link in order to ensure the tooltip is positioned in relation to the link and not another containing element.

47. Creating a Fixed Header

Instead of letting your entire page scroll you might want to hold the header with your logo and navigation fixed in place and only let the content below scroll.

The HTML:

<div id="header">header </div>
<div id="content">content </div>

The CSS:

#header {  
   position:fixed;  
}

You want to make sure to keep the header and content divs separate and then use position: fixed on the header. Other ideas you can try are creating a scrollable table with a fixed header within your page or keeping both header and footer fixed while allowing your content to scroll between them.

Further Resources

Other Resources

Image Credits

Find Something Missing?

Please feel free to share any other CSS tips, tricks or technique that you think would be a great addition in this collection and that has not been listed already.

Like it? Share it.

203 Comments

  1. Very helpful article. Some of them I use everyday but still a great resource to often come back to :) Thanks.

  2. really nice tips for css, keep up the good work Steven Bradley. thanks

  3. Wow. Great post. This is really going to help me improving my CSS skills. You know sometimes I stuck with some CSS issue and look for help on Google and ended up wasting an hour or two for right fix.

    You made my day man!
    Please make more posts on CSS. Really great resource.

  4. Very helpful collection of tips, thanks for posting this. It’s going in my library.

  5. Brilliant post! Pretty neat tricks. Can’t wait till the day when all browsers would render webpages the exactly alike. Hope that isn’t too much wishful thinking.

  6. Thanks for the list. This should be titled “A complete guide to keeping your sanity while writing CSS”. A wealth of tricks here I either keep on a sticky or have on an individual bookmark.

  7. WOW! Great list man!
    Some amazing stuff to learn! It would really take off any blog with these killer tips!

    Thanks for sharing!

  8. Great job of highlighting some popular uses of CSS. Straight to the point with just enough explanation. Thanks Steven!

  9. Nice collection, makes for a great quick reference point.

  10. Awesome, just awesome.

  11. Thanks everyone. I’m glad you like the post and hope you can put some of these tips and tricks to good use.

  12. GREAT post. Loved it – very useful for anyone who has ever dealt with CSS.
    Thanks!

  13. Best article I’ve seen here to date.

  14. #25, the second bit of code, is invalid markup (at least for anything not HTML5).

    You cannot wrap tags within <a> tags.

    This is what I do, which has the added benefits of being valid HTML and semantic!

    HTML:

    SITE_NAME
    

    CSS:

    a#logo
    {
    	display: block;
    	background: transparent url(logo.png) no-repeat 0 0;
    	width: 96px;  /* set actual width of logo */
    	height: 30px; /* set actual height of logo */
    }
    
    /* hide the text under the logo, so if a client disables CSS, they still see your site name in plain-text */
    a#logo span
    {
    	display: none;
    	visibility: hidden;
    	z-index: -1;
    	font-size: 0;
    }
    
  15. Okay, your site stripped the div and anchor tags, instead of displaying them in text format.

    I said: You cannot wrap DIV tags within A tags.

  16. Geez–it also stripped the example code. Just convert all your comments to their html entities equivalent, instead of ruthlessly stripping every tag from the comment.

    Convert the square brackets to their equivalent less than and greater than form.

    [h1][a href="/" id="logo"][span]SITE_NAME[/span][/a][/h1]

  17. Thanks for the wonderful tips & tricks Steven, always worth when designing stuff. On my bookmarks!

    • Same. Great stuff!

  18. I didn’t know that overflow:hidden; cleared floats! Cool! A very complete and useful post. Thank you!

    a little feedback.

    on #25, Wrapping an anchor tag around a div tag is against the spec (whether it works or not), so I’d be wary of recommending it as a solution. In those cases I put an anchor tag within the div, set the anchor to display block and set it’s dimensions accordingly to fill the space within the div.

    #24 is a bit misleading as it’s not actually stretching the background. In those cases, for a real stretching background, I do the following:
    the outer container (say div) I set to position:relative; overflow:hidden; background:none;, then within that element, I place an tag set to display:block; position:absolute; width:100%; z-index:-1; …..the z-index sometimes needs some playing with to ensure the layer stays visible, but, in any case, it’s a ‘real’ stretching background… sadly though the src/url of the img cannot be defined in css (so an ‘almost real’ stretching background :-).

  19. Wow… very nice post. keep up good work !!

  20. Hey! Very informative and useful resource you brought out here.
    Great work…Thanks for sharing it.

  21. awesome post … thanks for sharing it !

  22. You should check alpha/transparency – it doesn’t validate. Besides in #35 is an error – you typed “white” twice. Otherwise very handy list – thanks

  23. Great Brother, i really like your experience :)

  24. in my last comment, the comment system stripped my reference to the img tag. #24 should read:
    “I place an IMG tag set to display:block; position:absolute; width:100%; z-index:-1;”

  25. Great post.
    Only a note: at point
    23. Setting Padding on Background Images.
    I think in background-position property the order is horizontal – vertical.
    Thank for posting and congratulations.

  26. Great CSS resource. Very useful list. Thanks.

  27. This is a great post. Not just a good post but a great one! I’ll send it to my designer friend who is helping me with http://theeasyapi.com to make sure that we are using the best practices on our site.

  28. Really thorough article..

    Lots of useful info… especially on some of the more difficult aspects of css such as conditional style sheets etc.

    Great Post..

  29. nice list…would have been even better if there were example previews of what your are talking about !!!

  30. Nice Comprehensive list!

  31. Wow, there’s a whole lot of information here. Surprised you didn’t mention box-shadow. The text and box shadow have recently been added to my arsenal.

  32. …… what a great list of CSS Tips and Tricks with thorough explanations even I can understand !! There’s a lot of great information for specific tasks…. all in one place…. excellent post !! Thank everyone involved with bringing this project to the next level, for all of us to learn with !!

  33. Amazing and implausible article thanks for sharing the post.

  34. Great list. In #21 it should be a img {…} instead of a image {…}

  35. To #29.:

    “…filter:alpha(opacity=50…” – this doesn’t work for IE8. M$ “invented” a new filter for that purpose:

    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

  36. Nice post. Thanks

  37. Excellent list of tips. It’s worth mentioning 2 additional things in order to simplify CSS and improve browser rendering speed:
    1. Avoid using the very common * star attribute for margin and padding resetting (*{padding:0}) and use specific tags instead (h1, h2{padding:0})
    2. Try to classify elements in a way that you don’t use more than 2 selectors in a definition (for example, instead of #sidebar ul li a{color:red}), add an id to that ul and type (#ulId a{color:red})
    Thanks

  38. wow thanks

    You have posted such a nice article. Thumbs up! Very nice article.

  39. great post, one of the best css tips i’ve seen in a while!

  40. really good tips for CSS

  41. very informative article

  42. Fantastic post, I didn’t know about a lot of these, but its really helped clean up my style sheet. Think the amount of coding has halved on my web sites now which has speed up loading time. Thanks for the help.

  43. Great tips, I hope to see more like this!

  44. These are good tips and tricks to take site to the next level.This will be helpful for me and I will follow these tips for my site.I must say that this post is very informative.

  45. great piece of work ! I like it a lot ! keep doin like that ! :D

  46. Useful article. Thanks for sharing.

  47. Good list. Quite variant in the level of complexity. Some were not only tricky, but useful. Thanks.

  48. Great tools here! I wish I would’ve found this a long time ago!

  49. Thanks, this was an extremely resourceful article. Even if you’re familiar with these techniques sometimes you need to look them up to verify your coding is accurate.

  50. nice post.. thanks for sharing.

  51. thanks for sharing.. great post

  52. Cool job.thanks.by the way,the comment box doesn’t display normal in chrome.please check it

  53. The simple de-bugging part is very useful, especially for designers who are learning CSS. This article is very good, and pleasing to read the good code.

  54. youre really a quality job, you gave me very useful information

  55. Good tips, I use a lot of these on a regular basis and they help me out a lot.

    Great post.

  56. Hi….

    this is really lot of information….

    Thanks,
    aravindtemplates.com

  57. #44 only works in Opera. How’d it make the list?

  58. My bad Jason. I should have only used page-break-before and page-break-after, which are supported beyond Opera. You’re right about page-break-inside only being support by Opera.

  59. Thanks for the wonderful tips & tricks Steven, always worth when designing stuff. On my bookmarks!

  60. WOW! Great list man!
    Some amazing stuff to learn! It would really take off any blog with these killer tips!

  61. Great Tips….Thanks for Sharing

  62. Good tips, I use a lot of these on a regular basis and they help me out a lot.

  63. Hello There, I’m thankful that I found a very useful tips here, thanks for sharing!! Barnet

  64. awesome tips thank you!

  65. awesome tips thank you!

  66. honestly when it said 47, i thought that was awesome because thats my lucky number! but im not into css much anyways, only simple html.

  67. I like to post this comment .It helps a lot.The one thing I do know for sure, if that day comes, is that when it’s wedding cake cutting time, I will NOT make the same mistake I witness at every wedding. I will not be serving Champagne with dessert, but rather the slightly sweet and fizzy dessert wine,..

    Thanks and Regards

  68. I like to post this comment .It helps a lot.The one thing I do know for sure, if that day comes, is that when it’s wedding cake cutting time, I will NOT make the same mistake I witness at every wedding. I will not be serving Champagne with dessert, but rather the slightly sweet and fizzy dessert wine,..

    Thanks and Regards

  69. thask you blog keyifoyun.com

  70. wow… artikel yang panjang…

  71. First of all thanks a lot for the informative and useful information. I have just been searching for some information about CSS tricks and accidentally I have noticed this your entry. Well, this website is really great and full of various and attractive information about everything. Thanks a lot one more time for the great and informative article and keep up publishing these great posts in the future too.

  72. Good trick, thanks for share

  73. This will be bookmarked. Thank you.

  74. very nice tips , this will be bookmarked

  75. Great said of coding tips. This is just what i needed!

  76. Thanks and Regards

  77. Thanks for a such a great post. Worth reading…

  78. this will be bookmarked

  79. Really good tips, those tips are very usefully, thanks

    Here are few code writing tips
    http://www.templatespoint.com/blog/2010/10/code-writing-tips/

  80. Well, this website is really great and full of various and attractive information about everything. Thanks a lot one more time for the great and informative article and keep up publishing these.

  81. wow, really wonderful site. I learnt lot of things

  82. Cool tips and tricks.very helpful indeed!

  83. what a ton of comments here! I wish I had this many on my blog.

  84. Just getting into creating my own style sheets and the CSS stuff really helped. Thank you.

  85. Thanks so much for the article, most of these on CSS and other programming languages are much less intuitive. Great stuff!

  86. Cool tips and tricks, thanks for sharing this. I like the CSS3 tips and tricks@

  87. Love the title on this post! What a random number, 47! Very catch though I shall try this on one of my own posts.

  88. very great and informative post. thanks a lot for sharing it.

  89. Cool tips and tricks.very helpful indeed!

  90. Cool tips and tricks, thanks for sharing this. I like the CSS3 tips and tricks and I will be bookmarking you now.

  91. Hmm I actually thought that i knew most of the css techniques but some things listed are new for me and great to read, thanks a lot for sharing!

  92. Thanks so much for the info. i just started learning CSS and this article is very helpfull.

  93. Hello,

    Very interesting post but I don’t understand point 7 “Setting Multiple Classes on an HTML Element”. Why would i use three classes to set a color.
    A better css example is:
    class-2 {float:left;}
    class-3 {padding-top:20px;}
    class-1 {color: red}

  94. That’s really great i will use it all help for my own website

  95. Great list. Some are things I use everyday and some I’ve never seen and just got really excited about! The triangle? Far out…. not the most useful thing but good to remeber the silly fun things too :)

  96. Thanks for these css tips. Was looking for a batch list like this well done.

  97. This is elite. I’m bookmarking this!!! All the tips you need to know are here :) I learned a few new ones and now I have a decent list to remind me of the ones I already knew as well. Cheers!

  98. wow this is really one gr8 tutorial…i will be bookmarking it…

  99. I like the CSS3 tips and tricks and I will be bookmarking you now.

  100. This saved me a lot of headache again :)
    thanks once more

  101. Useful tips at one place for UI designer.

  102. Thanks for this tips, i use some of them in my new website

  103. Why my comment didn’t appear? i want only to thank you for your work, but i think that i can’t.

  104. This tutorial is really cool is awesome. Just got me really helped out. Am so grateful for this one.

  105. Great tips!
    Thank you for your sharing!

  106. Been looking for some of these tricks to fix my css problem, and thanks I’ve found one solution already.. keep on coming. Thanks

  107. i like these site. i was looking for someting like these
    interesting job keep on the good job

  108. There are certainly some tricks that are very usefull, so thank for the summary!

  109. BION I’m irmpessed! Cool post!

  110. Thanks for this article…I have learned a lot about CSS and web design from this blog…

  111. This tutorial is very impressive for me ….

  112. What an awesome collection of CSS stuff! Really useful, using a lot of these in a new project of mine

  113. Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your webpage? My website is in the exact same niche as yours and my users would genuinely benefit from some of the information you provide here. Please let me know if this ok with you. Thanks a lot!

  114. This was awesome tutorial! Excellent simple and easy to understand. Thanks for taking the time to share.

  115. What an awesome collection of CSS stuff! Really useful, using a lot of these in a new project of mine resim paylas

  116. What an awesome collection of CSS stuff! Really useful, using a lot of these in a new project of mine

  117. Pretty awesome selecting you’ve got here – must say, not to keen on

  118. Best article I’ve seen here to date.

  119. This is a great blog posting and very useful. I really appreciate the research you put into it.

  120. Thank’s Steven Bradley this is the best article i have never seen it helps me
    a lot thanks once again

  121. saoo blog adam olun

  122. Useful information, many thanks to the author. It is puzzling to me now, but in general, the usefulness and significance is overwhelming. Very much thanks again and best of luck.

  123. Thanks for sharing. We have had much help from this site already!

  124. I was thinking of using BlogEngine but then I saw that most of the sites I looked either had comments full of spam

  125. I was thinking of using BlogEngine but then I saw that most of the sites I looked either had comments full of spam

  126. This is a bank of css tricks.
    can you visit also my blog

  127. Waoooo Just simply Awesome

  128. Great collection. Thanks for this useful sharing.

  129. Great list of resources. I always have a copy of this sitting in the background when I’m designing..Great for a quick reference..Good work

  130. Nice post.Thank you for taking the time to publish this information very useful!I’m still waiting for some interesting thoughts from your side in your next post thanks.

  131. its really alot of CSS tricks i will bookmark that page … thanks author

  132. #14 is so smart, dude! two thumbs up

  133. its beautiful thanks

  134. I love the precious information you offer on your articles. I can bookmark your weblog and have my youngsters test up right here generally. I am moderately certain theyre going to be informed numerous new stuff here than any one else!

  135. nice ideaing

  136. This overview is very helpful.
    Thanks

  137. I learn a lot of things from your article. The stuff you are using that is very useful and helpful. Thanks for sharing a very informative article.

  138. very helpful for learning css details.thank u..

  139. its really help full.. guys expecting more things.. plz share some more tips and tricks

  140. Good work …
    Its very helpful
    Thanks a lot for sharing :)

  141. Well worth to read this article, thanks for sharing this information. With this article you offered me got a chance to know about this, anyway i say Great Article!

  142. Thanks for this great tips I will try put some of it to practice.
    Should really read some more from you

  143. I learn a lot of things from your article. The stuff you are using that is very useful and helpful. Thanks for sharing a very informative article.

  144. This overview is very helpful.

  145. Css is getting more stronger and fancy. Now there are a lot of tag what i think should be there to make the site more fancy

  146. Been looking for some of these tricks to fix my css problem, and thanks I’ve found one solution already and keep on coming. Thank you !!! Been looking for some of these tricks to fix my css problem, and thanks I’ve found one solution already and keep on coming. Thank you !!!

  147. So useful, thanks a lot for posting

  148. Because of the nature of our website we get a lot of questions from people starting in webdesign on HOW to start. Will ad your site and article to the list to help them in their quest to master the art of html and css. Thanks ..

  149. Very usefull, thnx man!

  150. Thanks i was looking for this really nice

  151. the most helpful collection of css tips :-)… thank you Steven Bradley for the effort

  152. Thanks. Nice share..i like it

  153. Nice informative article, Steven. Bookmarked for future reference.

  154. Good Post for a beginner.

  155. very very good and useful post.
    Thanks a lot

  156. Wow!! I must say that this is super awesome CSS resources, must be bookmarked!!

  157. Wow! Awesome your sharing! Thanks for sharing.

  158. These really are some great tips, especially those related to IE.

  159. Great post. I found these CSS tips very useful and the basic tips can work as a refresher. :P

  160. Thanks for the great post, really usefull tips.
    Another tip is to make a nice css menu with a generator tool like Swimbi – http://swimbi.com

  161. Very helpful collection of tips, thanks for posting this.

Leave a Comment Yourself

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>