25 Incredibly Useful CSS Tricks You Should Know

Posted in CSS Popular

Useful CSS Tricks
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know.

1. Change Text Highlight Color

You might not have known this before! With CSS you can control the colors of selected test at least for standards compliant cutting edge browsers like Safari or Firefox.

::selection{ /* Safari and Opera */
	background:#c3effd; 
	color:#000;  
}
::-moz-selection{ /* Firefox */
	background:#c3effd; 
	color:#000; 
}

2. Prevent Firefox Scrollbar Jump

Firefox usually hides the vertical scrollbar if size of the content is less than the visible window but you can fix that using this simple CSS trick.

html{ overflow-y:scroll; }

3. Print Page Breaks

While most of the internet users prefer to read content online but some of your users might like to print your article. With CSS you can control the page breaks within content just add this CSS class to your stylesheet and add this class to any tag which you would like to print on next page.

.page-break{ page-break-before:always; }

4. Using !important

Experienced CSS programmers are usually aware of this but beginners do miss out on this !important CSS rule. By adding !important to your CSS rule, you can increase its precedence over other subsequent rules. e.g. in below code, background-color will be blue and not red due to !important.

.page { background-color:blue !important;   background-color:red;}

5. Replace Text With Image

This is a nice SEO trick that lets you show a nice fancy image instead of simple boring text to your visitors but search engines will see only the text.

.header{ 
	text-indent:-9999px; 
	background:url('someimage.jpg') no-repeat; 
	height: 100px; /*dimensions equal to image size*/
	width:500px;
}

6. Cross Browser Minimum Height

Internet Explorer does not understand the min-height property but here’s the CSS trick to accomplish that in IE.

#container{
	height:auto !important;/*all browsers except ie6 will respect the !important flag*/
	min-height:500px;
	height:500px;/*Should have the same value as the min height above*/
}

7. Highlight links that open in a new window

This piece of CSS code will highlight links that open in a new window so that user knows before hand that link will pop open in a new tab or window.

a[target="_blank"]:before,
a[target="new"]:before {
	margin:0 5px 0 0;
	padding:1px;
	outline:1px solid #333;
	color:#333;
	background:#ff9;
	font:12px "Zapf Dingbats";
	content: "\279C";
}

8. Style Your Ordered List

Style Ordered List
Style numbers of an ordered list in different way than the content of each list item.

ol {
	font: italic 1em Georgia, Times, serif;
	color: #999999;
}
ol p {
	font: normal .8em Arial, Helvetica, sans-serif;
	color: #000000;
}

9. Drop Caps Using CSS

Drop Caps using CSS
You can create a drop caps effect like those in newspapers or magazines using the :first-letter pseudo element.

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}

10. Cross Browser Opacity

Though CSS3 standard includes the opacity property, but not every browser supports it, here’s the CSS trick for cross browser transparency.

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

11. Vertical centering with line-height

If you are using fixed height container and need to vertically center the text, use the line-height property to do that perfectly.

line-height:30px;

12. Center Fixed Width layout

If you use fixed width layout, you should center the layout so that if somebody views it on larger screen, the page displays in the center of the screen and not on left side.

body{ 
	width:1000px; 
	margin:0 auto; 
}

13. Remove vertical textarea scrollbar in IE

IE adds a vertical scrollbar to textarea input fields regardless of the height of content in it. You can fix that with this simple CSS trick.

textarea{
	overflow:auto;
}

14. Remove active link borders

Some browsers like Firefox and IE add a dotted outline border over the link user clicked. It is a useful accessibility feature that lets user know which link he clicked or is in focus. But sometimes you need to get rid of this, here’s the CSS you need to use.

a:active, a:focus{ outline:none; }

15. Prevent Elements from disappearing in IE

Sometimes IE behaves in a peculiar way and makes some elements disappear, which appear when you try to make a selection. It is due to some IE issues with float elements. This can be fixed by adding position:relative; to elements that disappears.

16. Attribute-Specific Icons

CSS Attribute selectors are very powerful giving you many options to control styles of different elements e.g. you can add an icon based on the href attribute of the a tag to let the user know whether link points to an image, pdf, doc file etc.

a[href$='.doc'] { 
	padding:0 20px 0 0; 
	background:transparent url(/graphics/icons/doc.gif) no-repeat center right; 
}

17. CSS Pointer Cursors

This trend has caught up lately. All user interface elements on a web page that can be clicked by user have their cursor similar to that of hyperlink. Here’s the CSS trick to do that.

input[type=submit],label,select,.pointer { cursor:pointer; }

18. Capitalize Text

This trick is especially useful for displaying title of an article on a web page with all its words starting with capital letter.

text-transform: capitalize;

19. Small Caps Text

This is one of the lesser used but useful CSS property. It capitalizes all the letters of text but the size of letters following the first letter of each word is smaller than the first letter.

font-variant:small-caps;

20. Highlight Text Input Fields

This CSS trick lets you highlight the input field currently in focus. This trick does not work in IE though.

input[type=text]:focus, input[type=password]:focus{ 
	border:2px solid #000; 
}

21. Remove Image Border

Image hyperlinks usually get a ugly blue border that makes your image hyperlinks look horrible. It’s better to remove border on all hyperlinked images and add individually to those you want using CSS classes.

a img{ border:none; }

22. Tableless Forms Using labels

Tableless Forms using labels and CSS
Gone are the days when tables were used to layout Forms. CSS lets you make accessible forms with table like layout using label tags. Using label tags makes sure your forms are more accessible. Here’s sample html and css code for tableless form using labels.

<form method="post" action="#" >
	<p><label for="username" >Username</label>
		<input type="text" id="username" name="username" />
	</p>
	<p><label for="password" >Username</label>
		<input type="password" id="password" name="pass" />
	</p>
	<p><input type="submit" value="Submit" /></p>
</form>
p label{ 
	width:100px; 
	float:left; 
	margin-right:10px; 
	text-align:right; 
}

23. Set a Consistent Base Font Size

Setting the font-size property to 62.5% in body tag makes 1em equal to 10px. This lets you use em easily as you can find out the font-size in pixels from em values.

body{ font-size:62.5%; }

24. Highlight Acronym and Abbr Tags

acronym and abbr tags provide useful information to users, browsers and search engines about acronyms and abbreviations, but most of the browsers except Firefox do not highlight them. Here’s the CSS trick to highlight acronym and abbr tags within your web page.

acronym, abbr{ 
	border-bottom:1px dotted #333; 
	cursor:help; 
}

25. CSS Reset by Eric Meyer

This piece of CSS code resets all the browser default styles preventing any browser inconsistencies in your CSS styles.

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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Tags:

Share


Subscribe to Full RSS Feed

RSS FeedIf you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.

71 Responses (Add Your Comment)

  1. mooph says:

    Prior to Mozilla 1.7 (Firefox 0.9) the -moz-opacity property was implemented in a non-standard (inherited) way. With Firefox 0.9 the behavior changed and the property was renamed to opacity. Since then -moz-opacity was supported just as an alias for opacity.

    Gecko 1.9.1/ Firefox 3.5 and later do not support -moz-opacity. By now, you should be using simply opacity.

  2. rob says:

    umm… !important…. really thats a trick? lame article sorry

  3. Great css tips, thanks for sharing!

  4. Hi, tnx for the article. Can I translate it in italian language and put it on my site with a link to your (original site) ? Tnx for all.

  5. Doesn’t “5 replace text with image” risk a search engine penalty for hidden text?

    • Darren says:

      The text isn’t hidden, eg. display:none, it actually exists on the page, just 9999 pixels to the left of it’s containing box.

    • Jordan Moore says:

      I thought this was the case too. Google aren’t too happy about content with huge negative indents, they see it as hiding information from the user.

      • stk says:

        #5) Replacing text with images is unnecessary. It’s now possible for cross-browser font embedding, using the CSS3 @font-face selector. Here’s How

        This list is a real mish-mash. Some are very basic, some archaic, some worthwhile. Certainly, not all are “Incredibly Worthwhile” (i.e., tone down the title hype, Satbir).

  6. Webbifier says:

    Regarding 18 & 19, for changing text case, isnt text-transform supposed to handle both upper/lower/small case text? something like text-transform:uppercase and text-transform:lowercase.

  7. eveevans says:

    that was a great collection ,
    very usefull

  8. Naresh says:

    sheerly gr88888 collection, 1 must woo it.

  9. Keith says:

    In the ‘tableless form with labels’ you should be using fieldsets rather than paragraphs. :)

  10. Karl Rixon says:

    !important should only really be used for debugging imo. It is much better to use the actual selector specificity weighting, eg #someId img {} will take precedence over just img {}.

  11. Can Berkol says:

    Great collecton of tips & tricks. Thanks for sharing!

  12. This is awesome! Luv it.. bookmarked already….
    First time in this blog and i like what i found!
    Keep it up
    CG

  13. harshit says:

    Great work !! really helpful

  14. Andrey Shchekin says:

    Good article. On minor correction, though:
    With CSS you can control the colors of selected test at least for standards compliant browsers like Safari or Firefox.

    Well my understanding is that “standards compliant” is not OK here, since there is no current standard on ::selection. “Cutting edge” may be more correct.

  15. Steve Hobbs says:

    Great collection of tips there. I would also argue about the form fields though; div tags should really be used instead of paragraphs, with a fieldset around the whole lot (or however you want to group the fields together). Just a semantic ‘nicety’ really.

    Great post though; it’s been bookmarked!

  16. nice stuff… very usefull. Some more previews would have been nice.

  17. Awesome list. Surprised to find a few things I never knew about.

  18. Webbifier says:

    Ah, I see about font-variant:smallcaps. But definitely text-transform:capitalized is very misleadingly named. Capitalized means uppercase. If only the first letter of each word is to be capitalized, then I think it is better called Initial Caps. I think it has been called as initial caps elsewhere before (from what I could remember).

  19. You shouldn’t remove that dotted border with outline:none its bad for accessibility. Screen readers need it.

  20. Excellent list of CSS tips, including a couple I’d not seen before. Thanks!

  21. Robb says:

    Nice read. Although I would create the form an unordered list wrapped in a fieldset. I’m sure search engines don’t like idea of content being positioned off screen.

  22. Travis says:

    Thanks for the info there. I do think CSS is one of the “easier” languages to learn, because everything is labeled in a more sensible fashion, so there’s little confusion.

    That being said, I still had a lot of time just “jumping in” when I was designing my current website. I eventually got it right, but it certainly took some time.

  23. Tijmen says:

    You shouldn’t encourage the usage of !important. Users could have made a “user stylesheet” in which they defined a larger font, set different color combination or made other changes that made the website more accessible for them. By using !important in the author stylesheet you might end up overwriting these accessibility improvements from the user stylesheet.

    If the CSS doesn’t do what you expect it to do. You should learn more about “specificity” and the cascade itself. Instead of using !important to fix it, which can do more harm then good.

  24. Arif says:

    Thanks for sharing. This is awesome list..

  25. nuno costa says:

    about 11. Vertical centering with line-height

    It works well if the text only has one line, with multiple lines each line will have an height of 30px

  26. Great post – thanks for the tips. I totally agree about it!

  27. Alexander says:

    Hey, I love these, read through them and I’m definitely bookmarking this page.
    Just one thing I’d want some clarification on. With number 12. Is this style supposed to center the page the same way THIS page is centered or am I mistaking the effects?
    I tried it out for myself but did not see a difference in my pages

  28. René Maas says:

    a new opacity filter for IE8?!
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;

  29. Stanko says:

    Nice post, I forgot few of those ;) ty for reminding me ;)

    Also there is mistake in reset css file on the line 15:
    vertical-align: baselinebaseline;

    Probably just pasted “baseline” twice ;)

    Cheers,
    S

Comments are closed for this post.