I get asked all the time how to add a CSS file to Drupal, its seems like the most rudimentary thing to do in a modern website, however Drupal has more than one way to add CSS files so here's an in depth explanation of the different ways you can add your files and why you might choose a particular method.

There are at least two main ways you can add CSS - the theme or module info file, and drupal_add_css(). For adding conditional CSS files (for Internet Explorer) there is only one way - drupal_add_css(). First lets look at themes and using the .info file.

Using the info file to add CSS

This is the easiest method - all you do is declare your stylesheets with a path relative to your theme or module root, and you're done. You can declare the media type as well, such as print, screen or all. The following declarations would place the stylesheets in the root directory. This can get a bit messy if you have a lot of stylesheets so you can use sub directories if you want.

Using drupal_add_css() for Modules and Themes

drupal_add_css() is of course a function and you're going to have write some PHP if you want to use it. However, its quite powerful and could be the only way to add CSS depending on your requirements. You can read the documentation to get a full insight how to use this function, here I will give some examples and a brief explanation of why we might use it.

Add a CSS file to your module. Note that I am using the drupal_get_path() function to get the path - this takes to arguments - the type (module or theme) and the name, which is the machine name of the module or theme.

Add a CSS file to your theme. Place this in your template.php file. You might use this if you want to conditionally add the CSS file for a particular path or template.

Add inline CSS, this appears in the head. Usefull if you want to override default styles or the CSS is dynamic.

Add an external stylesheet. You need the absolute path to the external stylesheet.

Adding Conditional Stylesheets for Internet Explorer

There are two ways of doing this - you can either use drupal_add_css() with the optional browser type parameter, or go the easier route and use the Conditional Styles module which allows you to add CSS files via your themes info file. First lets use drupal_add_css() with the browser type. You should use this in themename_preprocess_html() (which goes in your themes template.php file) such as this:

Which is of course absurdly complicated just add a conditional CSS file, so I'm not even going to try and explain what all that actually means - you can just play around with the important bit (see the next code snippet) - the first line is declaring the conditional statement - here this is targeting IE8 or less. The second line you don't have to worry about, just don't change it.

There is a much easier way to declare conditional stylesheets in Drupal - use the Conditional Styles module. This module allows you to declare conditional CSS in your themes info file, just as easily as the very first examples in this article. Just install the module and you can do stuff like this in your themes info file:

So that's a basic round up of how to add CSS to your Drupal projects - I hope this helps you get started with Drupal theming a bit easier. Just one last comment - if you are building a module please think twice about adding CSS for it - more often than not module CSS is not required, unless you are building something like Toolbar or Overlay which really demands it. Just let the theme layer handle the style - adding module CSS can often make the themers life that much harder.