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.

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 browsers like Safari or Firefox.

::selection{ /* Safari and Opera */
  background:#c3effd;
  color:#000;
}
::-moz-selection{ /* Firefox */
  background:#c3effd;
  color:#000;
}
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;
}
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; 
 }
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;
 }
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;
  /* dimensions equal to image size */
  height: 100px; 
  width:500px;
}
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 */
}
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";
}
Style Your 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;
}
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;
}
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;
}
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;
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;
}
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;
}
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; 
}
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.
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;
}
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; 
}
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;
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;
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;
}
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; 
}
Tableless Forms Using labels
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="#" >
  
    <label for="username" >Username</label>
    <input type="text" id="username" name="username" />
  
  
    <label for="password" >Username</label>
    <input type="password" id="password" name="pass" />
  
  <input type="submit" value="Submit" />
</form>
p label{
  width:100px;
  float:left;
  margin-right:10px;
  text-align:right;
}
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%; 
}
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;
}
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;
}
Similari
Interazione con i campi di un form con CSS
19% Css
Grazie al supporto da parte dei maggiori browser dei CSS Selectors versione 2.1, alcuni semplici effetti grafici possono essere proposti tramite fogli di stile in maniera leggera. In questo post vedremo come evidenziare il…
Finestre di messaggio CSS con CSS3
15% Css3
Quando si sviluppano applicazioni Web e si vuole visualizzare i messaggi all’utente, sarebbe opportuno renderli il più chiaro possibile. Inoltre, i colori possono dare all’utente una rapida occhiata su quello che sta succe…
Selettori CSS definiti
14% Css
Se avete appena iniziato con i CSS, è bene avere una comprensione fondamentale di ciò che si intende quando ci riferiscono ai selettori CSS. In questo post farò una breve descrizione dei più noti selettori CSS insieme ad a…
Come cambiare il colore del testo selezionato
13% Css3
Sebbene questa dichiarazione CSS3 potrebbe non essere fondamentale per il vostro progetto o disegno e, anche se non è supportato da tutti i browser, si presenta come un effetto fantastico che da al progetto un’ulteriore sp…
La Top 10 dei comandi in CSS3
10% Css
CSS3 sta davvero iniziando a prendere slancio con molti dei comandi descritti nel lavoro del progetto CSS3 supportato da Firefox, Safari e Google Chrome. Ho pensato di mettere insieme alcuni dei miei preferiti. [expand tit…