# Section Styles

Section styles allow you to apply visual customizations to sections in Layout Builder without writing custom code. These styles control the appearance of the section container, including background colors, spacing, and content width.

## Accessing Section Styles

1. In the Layout Builder interface, click on the section you want to style (or click the settings/configure icon on the section).
2. Look for the **Style** or **Appearance** settings within the section configuration form.
3. Adjust the available style options.
4. Click **Update** or **Save** to apply the styles.

## Available Style Options

The specific style options available depend on your site's theme and configuration. Common options include:

### Background Color

* Set a background color for the entire section.
* Choose from predefined color options that match your site's design system.
* Background colors help visually separate different content areas on a page.

### Background Image or Video

* Some configurations allow setting a background image or video for a section.
* This is useful for hero sections or visually rich content areas.

### Spacing (Padding and Margin)

* **Padding**: Controls the space between the section border and its content (inner spacing).
* **Margin**: Controls the space between the section and adjacent sections (outer spacing).
* Spacing options may be available for top, bottom, left, and right independently.
* Use consistent spacing to create a balanced page layout.

### Container Width

* **Full width**: The section spans the full width of the browser window.
* **Contained**: The section content is constrained to a maximum width, centered on the page.
* **Narrow**: A narrower content width, suitable for text-heavy sections.

Choose the container width based on the content type. Full-width sections work well for media and banners, while contained or narrow sections are better for text-based content.

### Text Alignment

* Set the default text alignment for content within the section (left, center, or right).

## Combining Styles

You can combine multiple style options to create varied visual effects:

* A dark background color with light text for a high-contrast section.
* A full-width background image with contained inner content.
* Extra padding on top and bottom to create breathing room around content.

## Tips

* **Stay consistent.** Use a limited set of section styles across your site to maintain visual coherence.
* **Follow brand guidelines.** Use background colors and spacing values that align with your organization's brand standards.
* **Test responsiveness.** Preview styled sections on different screen sizes to ensure they look good on all devices.
* **Avoid overuse of backgrounds.** Too many sections with different background colors or images can make a page feel cluttered. Use backgrounds strategically to highlight important content areas.
* **Coordinate with your theme.** The available section styles are defined by your site's theme configuration. If you need additional style options, work with your development team to extend the available choices.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.varbase.vardot.com/content-designers/about-layout-builder/section/section-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.