Paragraph

Use the Paragraph element to add, style, and format inline text.

elements
 
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

When you want to add long blocks of text to your project, you will either choose to use a Paragraph element or a rich text element. Here we’ll go over all you need to know about Paragraphs.

In this lesson:
  1. Add Paragraphs
  2. Style Paragraphs
  3. Adjust spacing between Paragraphs
  4. Format and style inline text

Add paragraphs

Paragraph icon thumbnail

You can add a Paragraph element from the Elements panel (shortcut: A). By default, the Paragraph element contains a block of placeholder text. You can double-click, select, and replace the text inside either by typing or pasting in your content. You can also enter text edit mode by selecting the element and pressing enter.

A paragraph element filled with lorem ipsum text.

Adding multiple Paragraphs

You may need to add multiple Paragraphs to a section on your page. Although you can do that by typing Enter between paragraphs within one paragraph element, it’s a better practice to use a separate Paragraph element for each Paragraph. This gives you more control over spacing. With the rich text element you can easily add multiple paragraphs by pressing enter.

Style paragraphs

There are many ways to style a paragraph. You can create a unique class and reuse this class for similarly styled paragraphs. You may style all paragraphs elements at once and leave it at that. Or you may want to set styles on the Body and let paragraphs inherit those styles.   

Styling with a class

You can style a paragraph element by selecting the paragraph and making your style changes in the Styles Panel. These changes will be saved under a class name. You can apply this class to other paragraphs as well:

  1. Select the paragraph you want to style
  2. Click into the selector field
  3. Type in the same class name
  4. Press Enter
  5. Style the paragraph
The selector field displays an active class named Bigger paragraph

Styling the All Paragraphs tag

The best way to start a project is to style the All Paragraphs tag, which holds the default styles for all paragraphs in your project:

  1. Select a paragraph
  2. Click into the selector field
  3. Select All Paragraphs
  4. Customize your styles
The selector field is clicked displaying a dropdown menu containing sections New class, HTML tag and existing classes.

Styling text on the Body tag

However, you may want to specify the typography styles, like font family and font size, for all your text elements, including paragraphs. To set default typography styles on the entire project you’ll want to edit the Body (All Pages) tag:

  1. Select the Body element
  2. Click into the Selector field
  3. Select Body (All Pages)
  4. Customize the typography styles
Step one on the left, select the body element from the navigator. Step two on the right, select the Body (all pages) class under the HTML tag section in the Selector field dropdown menu. These two elements are highlighted.

Adjust spacing between paragraphs

When you have separate paragraph elements, you can adjust spacing between those elements using the margin property:

  1. Select a paragraph
  2. Click into the Selector field
  3. Select All Paragraphs
  4. Add a bottom margin
Step one on the left, select the All paragraphs class under the HTML Tag. Step two on the right, add bottom margin to the paragraph in the Spacing section of the style panel.

And when you need to adjust the spacing for only a few paragraphs, you can apply a class. Now, any styling changes made on this class will apply to Paragraphs that have this same class.

Format and style inline text

In some cases, you may want to style a part of the text within the paragraph element. For example, you may want to italicize a word, or add a link to a phrase, or even underline a sentence. You can do that using the text formatting bar that appears when you double-click a paragraph element.

The word iterdum is highlighted within the paragraph text. A text formatting bar is hovering above the word with the 5 text formatting options, bold, italic, insert link, wrap with span and clear formatting.

Learn more about inline text formatting.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?