How to user apex:stylesheet in visualforce page?

How to user apex:stylesheet in visualforce page?

<apex:stylesheet> 

A link to a stylesheet that can be used to style components on the Visualforce page. When specified, this component injects the stylesheet reference into the head element of the generated HTML page.

This component supports HTML pass-through attributes using the "html-" prefix. Pass-through attributes are attached to the generated <link> tag.

This tag supports following attributes:

Attribute	Description
id	An identifier that allows other components in the page to reference the stylesheet component.
value	The URL to the style sheet file. Note that this can be a reference to a static resource

How to Use Style Sheets in Visual force Pages

Step 1:

Create a CSS file.

Open NOTEPAD or any text editor and type the following code

h1
{
color:red;
}

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.

More about Visualforce Tags:

http://sfdcsrini.blogspot.com/2014/06/visualforce-form-tags-with-examples.html

 

Posted in: $Resource in Visualforce pages,apex:stylesheet in visualforce,Custom Styles in Visualforce,Salesforce,static resources in visualforce page,Visualforce