15+ CSS Tips and Tricks

15+ CSS Tips and Tricks


15+ CSS Tips and Tricks

CSS (Cascading Style Sheet) is not very difficult to learn. The hardest thing is to ensure the CSS layout being displayed identically among different browsers.

Even though CSS3 will be released soon, but I believe it will take quite a long time for all the browsers to start supporting it, especially all the old browsers like Internet Explorer 6 *AHEM*.

Right, here is a list of CSS tips and tricks that I believe will help you! You might also want to use some of the tools that will help you in web design and development - 22 extremely useful tools for web designers and developers

1. Avoid CSS hacks, use future proof method

We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:

<!--[If IE 5]>
ie 5
<![endif]-->

<!--[If lte 6]>
ie 6 and lower
<![endif]-->

<!--[If gte 7]>
ie 7 or higher
<![endif]-->

2. Use group selector

Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your stylesheet. We can group the selector to avoid repeating declaring the same properties for different elements

h1, h2, h3, h4, h5, h6 {
font-family:arial; 
margin:0.5em 0; 
padding:0;	
}

3. Center elements

It's easy to center an element, for firefox and safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.

body {
	text-align:center;	/* for ie	*/
}

#container {
	width:800px;
	margin:0 auto;	
	text-align:left;
}

4. CSS Positioning

This is something I've just discovered it few weeks ago. Set the absolute position within a container. #item will appear inside the #container exactly 200px from the left and 50px from the top.

#container {
	position: relative;
	width:500; height:300;
}

#item {
	position: absolute;
	left: 200px;
	top: 50px;
}

5. Text transform

This is something I discovered long time ago, CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word. w3schools CSS - Text transform

h1 {
	text-transform:uppercase;
}
h2 {
	text-transform:capitalize;
}
p {
	text-transform:lowercase;
}

6. Remove links or textbox hightlight border

When you click on textbox or link, you will able to see a border highlighting the element. It's even more obvious if you are using mac os. Luckily, you can solve it using outline property. I used it when I set the indentation of a link text to -999em and also when I'm building a textfield with rounded border.

a, input {
	outline:none;
}

7. Hidden text

I think the correct way to do it is using text-indent. And also, you'd want to apply outline:none to hide the border. We use hidden text when we're using images to replace text but we want to make sure search engine can crawl the keyword.

a {
	text-indent:-999em;	
	outline:none;
	
	background: url(button.jpg) no-repeat 0 0;
	width:100px; height:50px;
	display:block;
}

8. Keep consistent with SUP and SUB

I have a chance to work on one website that uses ® and ™ massively (bad... bad experience). The problem I was facing is, the sup and sub being rendered differently in different browsers, so, I found this and it solved my problem. Adobe Advisor / CSS

sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

9. CSS Transparency Setting for all browsers

Yes, I can never able to remember it, so I guess it's a must to list it out here for future reference.

.transparent_class {  
	filter:alpha(opacity=50);    /* ie  */
	-moz-opacity:0.5;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.5;    /* for really really old safari */  
	opacity: 0.5;    /* css standard, currently it works in most modern browsers like firefox,  */
} 

10. PNG Fix for IE6

Yes, this is the best thing ever to fix ie6 annoying short coming (it doesn't work with background-position). However, if you want a better solution to could fix all the png images in your css files, you can try this IE PNG Fix from twinhelix and the new version support background position!

.png_hack{
  background-image: url(../img/the_image.png) !important;
  background-image: none;
  filter: none !important;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
}

11. Prevent line break

This is a simple css tips, but some of us might not know about it. It forces the text display in one line.

h1{
	white-space:nowrap;
}

12. Force page breaks when printing your document

When you're creating a printer friendly webpages, you want to know about these property. More about printing CSS property, visit W3C CSS Print Reference and also the CSS3 stardard

h1{
	page-break-before:always;
}

h2{
	page-break-after:avoid;
}

h2{
	page-break-inside:always;
}

13. Remove vertical textarea scollbar in IE

Remember that annoying textarea scrollbar that display by default in IE? Yes, we can remove it.

textarea{
	overflow:auto;
}

14. 3D push button effect

You can create a 3D button effect easily using CSS. The most important thing is the border, set light color on top and left border, and dark color on bottom and left (shadow).

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

15. CSS Tooltips

So, you must be thinking, we will need javascript to make tooltips! :) I got this trick from Kollermedia.

a:hover {
	background:#ffffff; 	/*BG color is a must for IE6*/
	text-decoration:none;
} 

a.tooltip span {
	display:none; 
	padding:2px 3px; 
	margin-left:8px; 
	width:130px;
}

a.tooltip:hover span{
	display:inline; 
	position:absolute; 
	background:#ffffff; 
	border:1px solid #cccccc; 
	color:#6c6c6c;
}
Tooltip Extra info 

16. CSS links sequence

Apparently, the sequence of the links is very important, read more. Honestly, I don't use this much, but hey, good for future reference! :)

a:link {
	color: #000;
	text-decoration: underline
} 
a:visited {
	color: #666;
}
a:hover {
	color: #333;
	text-decoration: none;
}
a:active {
	color: #333;
	text-decoration: none;
}

17. CSS Shorthands!

Last but not least, here are the CSS shorthands that will make our life easier!

/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}

h1 {margin-top:1em;
   	margin-right:0;
   	margin-bottom:2em;
   	margin-left:0.5em;
}

/* BORDER */
h1 {border:1px solid #000;}

h1 {border-width:1px;
    border-style:solid;
    border-color:#000;
}

/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}

h1 {border-top-width:1px;
	border-right-width:2px;
	border-bottom-width:3px;
	border-left-width:4px;
}

/* BACKGROUND */
div	{background:#f00 url(background.gif) no-repeat fixed 0 0;}

div	{background-color:#f00;
	 background-image:url(background.gif);
	 background-repeat:no-repeat;
	 background-attachment:fixed;
	 background-position:0 0;
}

/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}

h1 {font-style:italic;
	font-variant:small-caps;
	font-weight:bold;
	font-size:1em;
	line-height:140%;
	font-family:"Lucida Grande",sans-serif;
}

/* LIST STYLE */
ul {list-style:square inside url(image.gif);}

ul {list-style-type:square;
	list-style-position:inside;
	list-style-image:url(image.gif);
}

/* OUTLINE */
h1 {outline:#f00 solid 2px;}

h1 {outline-color:#f00;
	outline-style:solid;
	outline-width:2px;
}



References:

Adobe Developer Connection / CSS Advisor
W3C CSS2
456 Berea Street
Evolt
Sitepoint

MORE TIPS AND TRICKS ARE WANTED!

I hope this list will able to help you. If you have some tips and tricks that you want to share with all of us. Please leave in comment. : ) Thanks!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

47 comments

Web010
Tue, 21st July 2009
Nice list. Thanks. Reply
hayden
Tue, 21st July 2009
dont use

to make a container 'fit' its floated children..

just set the container to have overflow:auto; Reply
Jamie Rytlewski
Tue, 21st July 2009
When at the Google I/O this year, Tip #7 Google may list your site as spam if you do it too much. During a session on SEO, they discouraged programmers to use that method. Reply
Sergio
Tue, 21st July 2009
Ie sucks, it allways give me problems when use CSS, i really hate IE.
Anyway, the transparent gif hack doesn't work when you have layers (span) with a transparent PNG background image. Reply
tasarhane
Tue, 21st July 2009
good post..

@Jamie thanks for the info..

Reply
Mike - Miami
Wed, 22nd July 2009
Some nice new CSS tricks that I was unaware of! I've already used the "tool tips" and "highlight border" tricks. Thanks! Reply
Shaho
Wed, 22nd July 2009
kevin Admin
Wed, 22nd July 2009
@Shabo: yes, i agreed with you. I only used it when the outline shouldn't appear.

Like the search textbox at the top of this website, or what I said before, with indentation of -999em, if you didn't remove the outline, it will display the outline across the whole screen, which will confuse users in some ways.

anyway, thanks for the link Reply
Mike J
Wed, 22nd July 2009
You can use "LoVe HAte" to remember the order for anchor classes - Link, Visited, Hover, Active. =) Reply
gevv
Wed, 22nd July 2009
Thanks Reply
Peter Slagter
Wed, 22nd July 2009
@ Jamie Rytlewski & tasarhane
That's not completely true. Whether or not something affects your Google rating, is mainly based on the intention with which you hide your text. Your website will _never_ be listed as spamsite without a human intervention from Google.

You can read more in an official post here: http://groups.google.com/group/Google_Webmaster_Help-Indexing/browse_thread/thread/928aa76a1226cf89/07ff235c6aeae4ef#07ff235c6aeae4ef Reply
Chris Carvache
Thu, 23rd July 2009
Interesting... I\\'ve never actually done this. Almost every layout I\\'ve done is centered and all I\\'ve made sure is that the position is set to relative. Give it a whirl!! Reply
Mercier
Fri, 24th July 2009
A BIG THX to @Mike J for his useful magic "LoVe HAte" to remember the order for anchor classes Reply
BAB
Fri, 24th July 2009
very helpfull things.
thanks :-) Reply
Website Design
Fri, 24th July 2009
Very Helpful .. I will implemwnt these stuff on my css script Reply
Lorne Pike
Fri, 24th July 2009
A few great tips here. Have been focusing more and more on the shorthand and group selectors. Very helpful; thanks! Reply
DaveK
Fri, 24th July 2009
Some neat tips There, thanks for sharing. Reply
Brian Jørgensen
Sun, 26th July 2009
What a great list.
Some in there I didn't know about.

Thank you! Reply
Amir Syafrudin
Mon, 27th July 2009
Nice tips. I especially like number 15 about tooltips. Thanks for sharing. Reply
EllisGL
Tue, 28th July 2009
For #1: Do a browser detect and serve up css for that browser. I have a CSS file for cross browser support - not hacks or logical statements. One for IE6, one for IE 7, one for all the rest. Then I have server side script that combines and caches it. Reply
kalyan
Wed, 29th July 2009
sweet! Reply
Dorian Lyder
Sun, 9th August 2009
Here's a trick I found somewhere: min-height for ie6

min-height: 50px; /*All modern browsers*/
height: auto !important; /*Ie6 trick*/
height: 50px; Reply
Abdul
Fri, 4th September 2009
Great Tips. Its really useful for us.. Thanks for sharing Reply
auto second hand
Mon, 8th February 2010
There are some very good advice. If we could respect them all I have some guru in the field. Thanks. Reply
Andy Jones
Wed, 17th March 2010
Great list - there are loads around but this is more useful than most! Reply
hari prabhas
Wed, 17th March 2010
PNG Fix for IE6- its very useful code; but one we applied this code on a contact form, it inactivate the form elements, like input boxes and buttons in the div,. any tips to avoid dat problem..?.. Reply
college essay
Thu, 18th March 2010
Yes CSS is ieasy to learn. Thanks for sharing your tips. Reply
Peter Geier
Thu, 8th July 2010
Very nice and useful tips! Thank you for this great reference. Reply
essay help
Wed, 21st July 2010
Well, 15 is cool, but 17 is my favorite.
Thaks Reply
celil
Thu, 12th August 2010
Loved this awesome list.Found the website recently, and I will follow up recently. I would like to thank you for the efforts you have made in writing this article. Reply
Dimple
Wed, 25th August 2010
Thanks mate, great tips, keep up the good work Reply
pseudomus
Fri, 10th September 2010
Added to my bookmarks. Thx! Reply
Kelvin Jones
Thu, 16th September 2010
For point 7, I'd recommend leaving the outline out, and using overflow: hidden;

This way you keep the outline, which is useful for user feedback and keyboard navigation, but you get rid of the negative indent yanking the outline off-screen. Reply
anand
Mon, 20th September 2010
Very nice and useful tips! Thank you for this great reference. Reply
SaqibDesigns
Wed, 22nd September 2010
Nice tips.... learn many things here... :) Reply
Opencart
Thu, 30th September 2010
Absolutely useful list of CSS techniques. I must, I'd say. Thanks! Reply
Daniel
Tue, 19th October 2010
Nice tips, thanks.

There's a few hear that are new to me!! Reply
Brett Widmann
Fri, 22nd October 2010
I love #14. thanks for the great tips! Reply
Resh
Tue, 24th May 2011
very useful tips Reply
Incircle Media
Tue, 21st February 2012
Something better from us. Copy paste this code into your css file and make your CSS compatible in all browsers. Just use class name where ever do you want.

.icm-round8{
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

Hope it helps. Reply
sandeep
Wed, 18th April 2012
nice Reply
Hetal
Mon, 23rd April 2012
very nice
Reply
norbu
Thu, 5th July 2012
very helpful tips and waiting for more .......like this useful tips............. Reply
vairamuthu
Mon, 9th July 2012
nice tips. thank you. Reply
zoomrock
Sun, 22nd July 2012
very nice tip,thank you Reply
Adil Badshah
Mon, 27th August 2012
Excellent and very helpful article, I have found a css showcase site to submit your website on it, it's 100% FREE and you may get more traffic. Visit once http://www.cssfeatured.com Reply
Yogesh
Fri, 18th January 2013
Excellent and very helpful article, Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement