Visualforce - Beyond Basics Series 15 - Reuse page styling

How to maintain Unique styles for your company ?

Each company has its own taste for their styles in web pages. It depends mainly on their brand logo, color, symbols, etc. So, as a developer, you need to follow a consistent approach while styling the components in the pages.

How to reuse standard styles ?

In salesforce, you could reuse the standard/custom object styling in the custom pages. This is done through tabstyle attribute in the page tag.

	<apex:page tabStyle="Account">
	<apex:pageBlock title="TestBlock"/>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

How to follow consistent styles across pages ?

Create a css file called Common.css & upload it into a Static resource. Then, in this file, have all the common styling classes into it.
For example, you could have a class for all these following components.
   Text Box
   Label
   Select Box
   Date Picket
   Option Box
   Buttons
   TextArea
   Image
   Section Header
Then, in each page, you can simply include common.css & use the classes, rather than rewriting the styles every time.

	.TextLabel {
	font-weight : bold;
	}
	.TextInput {
	width : 300px;
	font-size : 30px;
	}

view raw gistfile1.txt hosted with ❤ by GitHub

	<apex:page standardController="Account">
	<apex:stylesheet value="{!URLFOR($Resource.common_css)}"/>
	<apex:form>
	<apex:outputLabel value="Enter Account Name" styleClass="TextLabel"/>
	<apex:inputText value="{!Account.Name}" styleClass="TextInput"/>
	</apex:form>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub