# 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.

Many Visualforce components have a `style` or `styleClass` attribute. Defining either of these attributes allows you to associate CSS code with the component. Custom CSS code enables you to change the default visual style of a component, including its width, height, color, and font.

- **[Using Salesforce Styles](/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-salesforce.md)**

  Many Visualforce components already have the look and feel of the same components in Salesforce, such as the related list in a detail page, or a section header. Part of the styling of these components, including the component’s color scheme, is based on the tab on which the component appears. You can specify the tab style that should be used to style a component by associating a page with a standard controller, or by setting the `tabStyle` attribute on the `<apex:page>` or `<apex:pageBlock>` tags.

- **[Extending Salesforce Styles with Stylesheets](/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-adding-stylesheets.md)**

  Use the `<apex:stylesheet>` tag to add additional stylesheets to a page. Use the `style` or `styleClass` attribute available on most Visualforce components to connect them to style definitions in your stylesheets. This technique lets you extend the Salesforce styles with your own.

- **[Using the Lightning Design System](/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-slds.md)**

  Use the `<apex:slds>` element to incorporate the Lightning Design System in your Visualforce pages and align them with the styling of Lightning Experience. This component is a streamlined alternative to uploading the Lightning Design System as a static resource and using it in your Visualforce pages.

- **[Style Existing Visualforce Pages with Lightning Experience Stylesheets](/docs/platform/salesforce-pages-developers-guide/guide/vf-dev-best-practices-slds-lightningstylesheets.md)**

  You can control whether a page is styled with the look of Lightning Experience when viewed in Lightning Experience or the Salesforce mobile app with the `lightningStylesheets` attribute.

- **[Using Custom Styles](/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-custom.md)**

  Use the `<apex:stylesheet>` tag or static HTML to include your own style sheet or styles.

- **[Suppressing the Salesforce User Interface and Styles](/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-suppressing-salesforce-stylesheets.md)**

  By default, Visualforce pages adopt the same visual styling and user interface “chrome” as the rest of Salesforce. This default styling behavior lets you create pages that look like they’re built right into Salesforce. If you don’t want a page to have the Salesforce look and feel, you can suppress various aspects of the Salesforce page and visual design.

- **[Defining Styles for a Component’s DOM ID](/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-custom-using-component-id.md)**

  Use CSS attribute selectors for the style definition if you want to apply a style using a DOM ID. Attribute selectors rely on the definition of an attribute, rather than an HTML tag, to apply a CSS style.

- **[Using Styles from Salesforce Stylesheets](/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-using-salesforce-stylesheets.md)**

  Salesforce uses different stylesheets (.css files) throughout the application to ensure that every tab conforms to the Salesforce look and feel. These stylesheets are automatically included on a Visualforce page unless you specify `false` for the `showHeader` attribute of the `<apex:page>` tag.

- **[Identifying the Salesforce Style Your Users See](/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-salesforce-identifying-theme.md)**

  When you’re creating a Visualforce page, it’s often useful to know the Salesforce look and feel your user expects, in order to render a page that matches their style. For example, some users have the choice to customize their look and feel. You’ll need to design your Visualforce pages to take these differences into consideration.

- **[Determining the Salesforce Style That Users See in JavaScript](/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-javascript-identifying-theme.md)**

  If you use a lot of JavaScript in your pages and apps, identifying the Salesforce theme that a user sees in JavaScript code is important. Identifying the current user experience context allows you to correctly manage navigation in your JavaScript code.