How to user apex:stylesheet in visualforce page?
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.
Create a CSS file.
Open NOTEPAD or any text editor and type the following code
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..
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.
<apex:stylesheet>
This tag supports following attributes:
Attribute
|
Description
| ||
id
|
An identifier that allows other components in the page to reference the stylesheet component.
| ||
value
|
|
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.
No comments:
Post a Comment