Sunday, January 25, 2015

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:

0 comments:

Post a Comment

 
| ,