How to Detect the User's Browser and Apply a Specific CSS File

How do I detect the user’s browser and apply a specific CSS file?

If you have to detect browsers just to apply CSS, then you might want to rethink your CSS before going to browser-specific stylesheets. All it takes is for one browser to mimic another's user agent string, or a new version to be released, and everything breaks. Use the current standards and validate your code (http://validator.w3.org/), and you'll have to worry about far fewer cross-browser issues. Even just using  without a version number could break the layout in later versions.

That being said, if you want to style the page differently based on what CSS features are available, take a look at Modernizr. This way, you're only checking features, which won't be broken if a new version of the browser is released.

If all else fails and you really need to detect the visitor's browser, try jquery.browser. It's built into jQuery, and is simple to use. http://api.jquery.com/jQuery.browser/.

Is it possible to detect Firefox users in pure CSS?

Not that I know of, but you can try this:

@-moz-document url-prefix() {
 
    #my-id { font-size: 100%; }
 
}

This website has more options as well

You can place this in your CSS file or between your <style type='text/css'> tags in your HTML. Works Fine!

Is there a way to check which CSS styles are being used or not used on a web page?

Install the CSS Usage add-on for Firebug and run it on that page. It will tell you which styles are being used and not used by that page.

how to call browser based css?

There are two ways:

Client side: you need to use Javascript to detect the browser and import the appropriate CSS style. Have a look at this article. (link no longer available)

Server side: you need to detect the user agent and serve the appropriate HTML. Here's a PHP source link for this.

Is there a way to do browser specific conditional CSS inside a *.css file?

There is a way to do it in IE by taking advantage of bugs in the browser and @import. The best method I've seen is here, courtesy of bobince (and definitely beat out my answer, heh).

In general though, no. Even conditional comments are browser-specific to IE.

How to use a different CSS stylesheet if a user has JavaScript disabled in their browser?

Two ways to do it:

Append the JavaScript-only stylesheets with JavaScript:

function appendStyle(url) {
  var sheet = document.createElement("link");
  sheet.setAttribute("href", url);
  sheet.setAttribute("rel", "stylesheet");
  sheet.setAttribute("type", "text/css");
  document.head.appendChild(sheet);
}

If you don't mind loading the CSS for the JS and you just want to override your site's default appearance you can use a noscript tag instead:
```
<noscript>
  <link href="your/no-js/stylesheet.here.css" type="text/css" rel="stylesheet">
</noscript>
```