Five Quick CSS Tips for Better User Experience

In CSS, little changes can make a huge difference in how the page will look like. Here, Find out top/Best five quick CSS tips and snippets, which will give your website more attractive and make your experience more enjoyable. One should use these tips while doing web application development.

Change Text Highlight Color  :-

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

Many browsers like, firefox, opera, safari allows to change the color as per our choices.

Attribute-Specific Icons :-

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

Add an attribute-specific icons to your links and juice-up your links. Add EXCEL icon to your .XLS links, PDF icon to your .PDF links and so on. It is a good way to inform the user that you are linking to a document other than another page.

CSS Pointer Cursors :-

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

If the user is meant to click on any type of element, It should have the "pointer" cursor when the user hovers on any links, buttons, elements and many more.

display:block Links :-

#navigation li a { display:block; }

When you built a navigation menu with UL/LI/A elements, be sure to set all display property to BLOCK so user does not necessarily need to hover over the anchor's text to link to do work.

Print Page Breaks :-

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

We should remember that many users print off international pages. The above CSS snippet allows us to set page breaks within each page.