Add custom stylesheet with my custom block

Question

*In my custom block I want to add custom stylesheet to display the block as like i want. How it can be possible.

Answer 1

First, you should add the css file:

1. Add next line inside your module's layout file or inside your theme local.xml layout file (example path for the rwd theme: app/design/frontend/rwd/default/layout/local.xml):

   <default>
       <reference name="head">
           <action method="addCss"><stylesheet>css/custom.css</stylesheet></action>
       </reference>
   </default>
   

2. Create file inside the skin folder of your theme:

   skin/frontend/<package>/<theme>/css/custom.css
   

3. Then you should add an unique identifier for your block (block's template). For that purpose use the id or class attributes. Detect the template file (.phtml) and add something like this:

   <div id="my-own-block-unique-identifier">
       <!-- other content here -->
   </div>
   

4. Next, write your css rules in the created css file using the unique identifier like this:

   #my-own-block-unique-identifier { color:red; }