Visualforce - Beyond Basics Series 6 - Use styleClass like a pro

Can i change look & feel of Standard UI Components ?

yes. visualforce standard tags renders into standard HTML tags & apply some standard styles to it which user can change.

How to change the styles ?

There are three ways developer can change the styles

1.   By changing the styles of standard HTML tags through CSS. For example, input { font-size : 20px; }will make all input elements in the page to take effect.
2.   By Inline. Most of the tags provide 'Style' attribute which will accept inline styles.
3.   By Style Class. Most of the tags provide 'StyleClass' attribute which will accept a style class name. This is the most preferred method, as it provides more control & keep the code clean.

Where is the code ?

I have shown the illustration of how to use the styleclass in various input, output & navigation components. By doing so, we could change the whole look and feel of the page to any custom design clients looking for.

	<apex:page >
	<style>
	.myClass {
	border : 2px solid red;
	}
	</style>
	<apex:form>
	<apex:panelGrid columns="2">
	<!-- Input Components -->
	<apex:outputText value="Enter your name"/>
	<apex:inputText styleClass="myClass"/>
	<!-- Output Components -->
	<apex:outputText value="Company Name"/>
	<apex:outputText value="Nepz Solutions Ltd" styleClass="myClass"/>
	<!-- Navigation Control Components -->
	<apex:commandLink value="javascript:void(0);" styleClass="myClass">
	click me
	</apex:commandLink>
	</apex:panelGrid>
	</apex:form>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub