Visualforce - HTML Styling

Question

I am new to Visualforce development.

• I want to style a visualforce page that is part of a site.
• this page will be customer facing and will allow customers to fill our online application form, this will create a record of a custom object is Salesforce.

What is the best way to approach this? Currently we are using Force.com sites, but we need to get the pages to match the rest of our websites styling, so we have used a custom stylesheet and are currently trying to add 1000+ lines of HTML to the customer facing page. This does feel like the wrong approach.

I know, if I was developing this in PHP I could create a PHP include for our sites header and footer and leave a <div> tag open at the end of the header and close this in the footer. This would then wrap around our visualforce content.

Answer 1

Building sites VF page ,you may need to go through Visualforce tags such as

• apex:include
• apex:define
• apex:insert
• apex:component

You can adopt template based approach where you define reusable template and later implement the template .

Some of the best practices is to put all CSS and js in static resource .

Answer 2

You can use apex:component - to use similar styles in different VF pages across your app.

Answer 3

you can upload required css files of your company website into salesforce as a static resource. this uploaded resource is accessible in vf pages and you can use the same styling classes to style your VF page.