Using CSS & Javascript in Visualforce Examples

CSS & Javascript examples

Example1: Inserting records into custom object with including css:

Visualforce page:

<apex:page sidebar="false" controller="DataLoadTestingClass">
	<apex:form >
		<div style="border:1px solid; width:200px;">
		<div style="height:30px;width:150px;margin-top:20px;margin-left:20px;font-size:15px;color:blue;">
		DATALOADTESTING
		</div>
			<table>
				<tr>
				<td>
					Name
				</td>
				<td>
					<apex:inputtext value="{!nameVal}"/>
				</td>
				</tr>
				<tr>
				<td>
					City
				</td>
				<td>
					<apex:inputtext value="{!cityVal}" />
				</td>
				</tr>
				<tr>
				<td>
					Country
				</td>
				<td>
					<apex:inputtext value="{!countryVal}" />
				</td>
				</tr>
				<tr>
				<td>
					Phone
				</td>
				<td>
					<apex:inputtext value="{!phoneVal}"/>
				</td>
				</tr>
				<tr >
				<td colspan="2" align="center">
					<apex:commandButton value="INSERT" style="color:red;" action="{!doInsert}" />
				</td>
				</tr>
			</table>
		</div>
	</apex:form>
</apex:page>

Apex Class:

public with sharing class DataLoadTestingClass {
	public PageReference doInsert() {
		DataloadTest__c objdlt = new DataLoadTest__c();
		objdlt.name=nameVal;
		objdlt.city__c=cityVal;
		objdlt.country__c=countryVal;
		objdlt.phone__c=phoneVal;
		insert objdlt;
		pagereference ref = new pagereference('/apex/insertdlttest');
		ref.setredirect(true);
		return ref;
	}
	public String phoneVal { get; set; }
	public String countryVal { get; set; }
	public String cityVal { get; set; }
	public String nameVal { get; set; }
}

Example2: A Sample CSS for changing the Font size

<apex:page sidebar="false">

<style>
	#fonttext{
		font-size:20px;
		color:green;
	}
</style>

<apex:form >
	<p id="fonttext"> Welcome </p>
</apex:form>

</apex:page>