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
Caratteri speciali in HTML
822% Html
Esistono dei caratteri che non possono essere digitati direttamente nel codice sorgente di una pagina HTML.Se vengono inseriti, infatti, la visualizzazione della pagina viene compromessa ed appaiono dei caratteri strani……
Guida allo Zend Framework
223% Zend
Zend Framework è un framework open source per PHP. Zend Framework separa la logica e le azioni usando il pattern MVC (Model View Controller). Cosa è lo Zend Framework? Framework per la costruzione di siti web più veloci e …
Fondamentali di jQuery
114% JQuery
[nextpage title=”Benvenuti”] jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
Python per tutti
108% Python
[nextpage title=”Copertina”] Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
Regole fastidiose ai web designer
94% Css3
Per la maggior parte dei webdesigner, lo stile di un sito web con i CSS è abbastanza semplice. Fintanto che il codice HTML è semantico e i div e le classi sono progettati in modo sensibile, il processo di sviluppo dovrebbe…