How to add CSS to Visualforce pages | Salesforce

How to add CSS to Visualforce pages

We can add CSS to Visualforce pages to change the look and Feel of the Salesforce application. So what is CSS? CSS stands for Cascading Style Sheets(CSS), which allows user to create rules that specify how the content of an element should appear. Each statement in CSS consists of locations, a property in the location and a style to apply to that property. Salesforce Visualforce Stylesheets (CSS) are automatically included in Visualforce pages to define the properties of an attribute and to change the look and feel of the application.

We add CSS to Visualforce pages in three ways. They are

  1. Inline CSS.
  2. External CSS and
  3. Internal CSS.

 Add CSS to Visualforce pages through Inline CSS

Adding CSS to Visualforce page using Inline CSS, the style of the component is defined with in the component by using an attributes called Stye.

output

css in visualforce pages

As shown in above in Inline CSS, we will define the property with in the component itself. Below are the some CSS properties that we can use in Visualforce page.

Text PropertiesBackground EffectsFont PropertiesBorder Properties
Center, Right, JustifyBackground-colorFont-styleborder-bottom
over-LineBackground-imageFont-variantborder-collapse
UnderLineBackground-repeatFont-weightborder-color
Text-transformation:LowercaseBackground-attachmentFont-sizeborder-image
Text-transformation:uppercaseBackground-positionFont-familyborder-left
Text-transformation:CapitalizeBackground-sizeCaptionborder-style
Text-ShadowBackground-clipicon border-width

Internal CSS

Adding CSS to Visualforce page using Internal CSS, we define the CSS with in the Visualforce page and should be defined with in the <script> tag. Generally Internal CSS can be defined in three ways. They are

  • By Using ID.
  • By Using Class and
  • By Using tag.

Visualforce page

Output

External CSS

In external CSS, we must define the css file outside the Salesforce and we can load this file as a Static resource and use it in all the Visualforce pages. External CSS in Visualforce pages can be applied in three steps.

  • Create .CSS file.
  • Loading .CSS file file as Static resource in Salesforce.
  • Adding the CSS(Cascading stylesheet) in Visualforce page.

Conclusion : In this Salesforce tutorial, we have learned how to add CSS to Visualforce pages using Inline CSS and Internal CSS. In our upcoming Salesforce tutorial, we will learn how to include CSS file in Visualforce.