CSS stands for Cascading Style Sheets. This is nothing but a text file saved with the extension .css

This file will contain all the style defenitions for your visualforce page. To know the basics of styling your visualforce page visit this post.

Scenario 1:

We are going to take a very simple scenario. You want all your <h1> tags to appear in GREEN color.

Step 1:

Create a CSS file.

Open NOTEPAD or any text editor and type the following code

h1
{
color:green;
}

Save the file with a .css extension (say CssExample.css)

Step 2:

Upload the saved file as a Static resource.

Setup -> Develop -> Static Resources and click on NEW.

Give a name for the static resource say CssExample. Remeber to set the Cache Control as "Public".

Step 3:

Create a visualforce page and paste the following code..

<apex:page standardstylesheets="false" showheader="false">
<apex:stylesheet value="{!$Resource.CssExample}"/>
<h1> This text is displayed using CSS </h1>
</apex:page>

Save the page. Now you can see that the text within <h1> tag is displayed in GREEN color because you have specified so in the CSS file.

TiP: Remove showheader="false" and you can see that the text is displayed in normal size and not h1. This is because the header uses standard salesforce style sheets and your visualforce page is still overridden with this even if you say ' standardstylesheets="false" '. To overcome this use font-size:15px or whatever it maybe.

Scenario 2:

Now lets modify the CSS. We will have two commandbuttons and one commandlink. We will add a background color and text color to one button and a different color to another button. We will also change the color of commandlink.

Modify the CSS as below...

h1
{
color:green;
}
.button1
{
background-color:#00FF00;
font-weight:bold;
color:#E56717;
}
.button2
{
background-color:#C12283;
font-weight:bold;
color:#EE9A4D;
}
a:hover
{
color:#F665AB;
}
a
{
color:#52D017;
font-size:20px;
}

Upload the modified CSS into Static resource. You can edit the already created static resource CssExample and just choose the latest file from your desktop.

Modify the Visualforce page as below..

<apex:page standardstylesheets="false" showHeader="false">
<apex:form >
    <apex:stylesheet value="{!$Resource.CssExample}"/>
    <h1> This text is displayed using CSS </h1>
        <apex:commandButton styleclass="button1" value="Click Me!"/>
        <apex:commandButton styleclass="button2" value="Click Me!"/>
        <apex:commandlink value="Clik me!"/>
    </apex:form>
</apex:page>

Now you can see the different colours that we have applied...

Look at the CSS code carefully. We have two classes button1 and button2 with their style defenitions (note that .button1 is the way the classes have to be defined in CSS).

When your Visualforce page is finally rendered as HTML commandlink tag will be converted to <a> tag. That's why we define the colors for "a" in CSS. a:hover represents the styling to be used when you move your mouse on the commandlink..


Scenario 3:

The method i am describing below is the most inefficient one. I later discovered that there is a very easy way... You can find it here

Sorry for the inconvenience.. but still i thought mentioning the below method maybe of use somewhere

Specifying a background image in the CSS. We will add a background image to the commandbutton and more styling effects.. Save the following images to your desktop.

(bg_button_a.gif) Right-click and Save Image As

(bg_button_span.gif) Right-click and Save Image As

Now we have the CSS code as below..

.clear { /* generic container (i.e. div) for floating buttons */
  overflow: hidden;
  width: 100%;
}

a.button {
  background: transparent url('bg_button_a.gif') no-repeat scroll top right;
  color: #444;
  display: block;
  float: left;
  font: normal 12px arial, sans-serif;
  height: 24px;
  margin-right: 6px;
  padding-right: 18px; /* sliding doors padding */
  text-decoration: none;
}

a.button span {
  background: transparent url('bg_button_span.gif') no-repeat;
  display: block;
  line-height: 14px;
  padding: 5px 0 5px 18px;
}
a.button:active {
  background-position: bottom right;
  color: #000;
  outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
  background-position: bottom left;
  padding: 6px 0 4px 18px; /* push text down 1px */
}

The colored parts in the code refer to the URL of the images. When you upload this CSS to Salesforce, the URL is no longer valid. Hence the CSS has to be modified.

Upload the two images into SFDC as static resources (Save the first one as ButtonBg and the second one as ButtonBgSpan for example). View the details of the static resource created. Click on "Click here to view this file".




After you click the image opens up in a new window/tab. Now check the URL. For me the URL was

https://ap1.salesforce.com/resource/1246616624000/ButtonBgSpan

You have to copy the coloured part of the URL and paste it in the CSS . Do it for the two files uploaded. Now the modified CSS looks like this...

.clear
{ /* generic container (i.e. div) for floating buttons */
   overflow: hidden;
   width: 100%;
}

a.button {
   background: transparent url('/resource/1246616564000/ButtonBg') no-repeat scroll top right;
   color: #444;
   display: block;
   float: left;
   font: normal 12px arial, sans-serif;
   height: 24px;
   margin-right: 6px;
   padding-right: 18px; /* sliding doors padding */
   text-decoration: none;
}

a.button span
{
   background: transparent url('/resource/1246616624000/ButtonBgSpan') no-repeat;
   display: block;
   line-height: 14px;
   padding: 5px 0 5px 18px;
}
a.button:active
{
   background-position: bottom right;
   color: #000;
   outline: none; /* hide dotted outline in Firefox */
}

a.button:active span
{
   background-position: bottom left;
   padding: 6px 0 4px 18px; /* push text down 1px */
}

Upload this updated CSS . You can edit your already created Static resource CssExample and just choose the latest file from your desktop.

The Visualforce page code will be..

<apex:page standardstylesheets="false" showHeader="false">
   <apex:form >
       <apex:stylesheet value="{!$Resource.CssExample}"/>
           <apex:commandlink styleclass="button"><span> Save </span> </apex:commandlink>
           <apex:commandlink styleclass="button"><span> Cancel </span> </apex:commandlink>
       </apex:form>  
</apex:page>

That's it... Now you can see the effects you have just created

Comments and suggestions welcome!!