When you start building a website, you start with a blank page. The body element represents this page. Any time you create a new page, you’ll be creating a body element. This is where you 'll add all your elements and content. Any element that you add to your page will be nested inside of the body element. No matter how many elements you nest inside other elements, they will all be nested and organized in the body element.

The body element in Webflow

Accessing the body element

You can access the body element through the Navigator or the navigation breadcrumb bar at the bottom of the Canvas. Since it’s the outermost element on the page, the body element cannot be deleted or moved.

The body element in Webflow

Styling the body element

The body element can be styled, like any other element, using classes. You can use the same class to style other pages across your project. However, some styling options are not available for the body element, including display settings, position properties, opacity, and transforms. You cannot specify a custom width for the body element either. That’s because the width of the body element is automatically handled by the browser. However, you can always specify how wide your content will span across your page by adding sections, containers, columns, and div blocks to the body of your page.

Any content that's wider than the viewport will overflow the body element, resulting in horizontal scrolling, which you rarely want. You can prevent this by being mindful of element widths and negative margins. You can always hide the overflow on the body element, but we don't recommend it.

Styling the body tag

If you want all the pages in your project to have the same styling — such as the same background color on all pages — you can style the Body (All Pages) tag. All styling set on this tag will be inherited by all body elements across your site. And any new pages that you create will have the same styling as well.

To style the Body (All Pages) tag:

  1. Go to the Styles Panel (S)
  2. Click inside the Selector field
  3. Select the Body (All Pages) tag from the inheritance menu
  4. Style away

Read more about styling HTML tags.

The body element in Webflow

Text style inheritance

When you set typography styles on the body, these styles are passed down to all its children, meaning all text elements on your page.

We recommended that you make typography style changes on the body tag to ensure that all pages have a uniform typography styling.

So, if you edit the font family on the body tag, all elements on all pages will inherit the same font family. However, changing the font family on any individual text element will override the styles inherited from the body element. Learn more about text style inheritance.

The body element in Webflow