how to apply CSS for a Custom Block/View

Question

Like your tutorial a lot. I am really brand new into Drupal and PHP and i am trying to learn to apply and suggest product for my work. Recently, i have installed Drupal 7 and installed many modules to play with. I have looked over online tutorial and i have few drupal7 books, but i haven't find any answer about my needs.

My question is, suppose i create a simple block to display a list of news items how can i apply css for this block. Where can i add css codes? Is there any specific css file in a certain directory?

Please let me know if you can help me on that. if you already have a question thread opened or answered before, you can point me the url. i couldn't find the answer yet.

Answer 1

It depends on what theme you're using. The core Drupal themes are stored under /themes/. If you have a custom theme, it should probably be installed in /sites/all/themes/. Different themes may name their main CSS file differently, but look for .css files within your theme's directory or a subdirectory beneath it.

From there, you'll need to know what ID or class name is associated with the particular block. You can right click in somewhere in the block and choose "Inspect Element" to examine the source file. Or for even more power, I'd recommend installing the Firebug extension for Firefox. You can find out more about Firebug in this screencast.

For more complicated theming, I'd recommend also installing the Theme Developer module. It will allow you to see what theme file or function is currently outputting a specific area of the page, as well as what files or functions can be used to override it. See the screencast for more detailed information.

Answer 2

Give the Code per Node module a look, this allows you to add custom css and js to any node / block. Here is an excerpt about it from the module's project page:

... makes it possible to add custom CSS and Javascript per node, per content type, per block, and globally. The code is stored in the database, but served from the file system. It also supports syntax highlighting with CodeMirror.