Customizing the Appearance and Output of Visualforce Pages

Visualforce pages and components output HTML that’s sent to the browser for rendering. Visualforce’s HTML generation is sophisticated, automatically providing page structure, contents, and styling. Visualforce also provides a number of ways to alter Visualforce’s default HTML, substitute your own, or associate additional resources, such as CSS stylesheets or JavaScript files, with a page.

  • Styling Visualforce Pages

    It’s easy to style a Visualforce page, either by mimicking the look and feel of a standard Salesforce page, or by using your own stylesheets or content types.

  • HTML Comments and IE Conditional Comments

    Visualforce removes most HTML and XML comments from the page before rendering, without processing their contents. Internet Explorer conditional comments, however, won’t be removed, allowing you to include IE-specific resources and meta tags.

  • HTML Tags Added or Modified by Visualforce

    By default, Visualforce automatically adds required HTML tags to a page to ensure the result is a valid HTML (and XML) document. You can relax and even override this behavior.

  • Using a Custom Doctype

    You can specify a different “doctype” (document type, or DTD) for a Visualforce page by using the docType attribute on the <apex:page> tag. This changes the doctype declaration at the beginning of the page. This is particularly useful if you’re working with HTML5, and might also allow you to address browser compatibility issues.

  • Change the MIME type of Your Visualforce Page

    You can specify a different format for a Visualforce page by using the contentType attribute on the <apex:page> tag. This sets the HTTPContent-Type header for the response to the value of the page’s contentType attribute.

  • Setting Custom HTML Attributes on Visualforce Components

    You can add arbitrary attributes to many Visualforce components that are “passed through” to the rendered HTML. This is useful, for example, when using Visualforce with JavaScript frameworks, such as jQuery Mobile, AngularJS, and Knockout, which use data-* or other attributes as hooks to activate framework functions.

  • Render a Visualforce Page as a PDF File

    You can generate a downloadable, printable PDF file of a Visualforce page using the PDF rendering service.