How do I style part of a sentence in Webflow?

Highlight the words and add a class

A span styles part of a text element: one word, or a few words, inside a paragraph, heading, or text block. The rest of that element keeps its own styles.

Highlight the words on the canvas. Click the Selector field in the Style panel and name a class. Webflow applies that class to the highlighted span. Then change the settings you actually want, such as the font or the background color.

Example: the sentence is 'Plans start at the annual price.' Only the word annual should use the brand color. Highlight annual, name the class Price note, and set the color on that class. The words Plans start at the stay on the paragraph class. You did not create a second paragraph.

If you select the whole text element and then change the color, there is no span. The color belongs to the element or its class, and the entire sentence updates. The text color guide is that full-element color, including the contrast check. Use it when the whole line should change. Use a span when only the highlighted words should change.

Name the class for the job, not for the page. Price note can wrap the same kind of word in another sentence. Highlight those words, click the Selector field, and choose Price note from the list. A later edit to that class updates every span that uses it.

Change only the span

Parent text styles still pass down. A font set on the Body (All pages) tag reaches the paragraph, and the paragraph reaches the span, until the span class sets its own value. The orange indicator on a property means the value is inherited. Click it to see the source. Set the property on the span class when this word should differ.

Keep body text no smaller than 16 pixels. Webflow's typography guidance treats thin type as hard to read, especially in paragraphs. A span that sets a very light weight on one word can make that word the hardest part of the sentence. If the word must be lighter, check it against the background. The contrast checker rates text against a solid background. It does not rate text that sits on a photo.

The size of the span uses the same Typography size control as any other text. The font size guide is rem, line height, and why the heading level is not the size knob. A span can be slightly larger than the sentence. It should not be the only signal that a new section started.

Line height on the paragraph should stay at least 1.5 times the font size so a highlighted word still has room between lines.

Clear the span when the sentence should match

To remove the special formatting, highlight the styled words. In the text toolbar popup, click Clear formatting. Webflow describes that control as the A with an x. The words remain. The span no longer wraps them, so they pick up the paragraph styles again.

Clear the span when the emphasis was temporary. Example: annual was highlighted for a launch week. After the week, highlight annual and clear the formatting. Do not delete the word and retype it unless the copy itself changed. Retyping can leave an empty span in the element if you only delete the letters.

If Clear formatting is not available, you may have selected the whole paragraph instead of the highlighted words. Click into the word, highlight just those characters, and try the toolbar again.

Resetting a color on the paragraph class does not remove a span class. The span is more specific. Clear the span, or edit the span class, when that word is the one that looks wrong.

Do not use a span as a heading

A span does not change the heading level. The page outline still comes from the heading tags. Webflow's heading guidance is that an H1 states the page purpose, an H2 is a section inside it, and an H3 is more specific. Skipping a level, or styling a few words inside a paragraph to look like a heading, makes that outline worse.

If the words are a section title, put them in a real heading and style that heading's class. The heading guide is the H1 to H6 order. A span is for a word inside a block that already has the right tag.

Underlines are a poor substitute for a span when the goal is emphasis. Visitors expect an underline to be a link. Webflow recommends italic, bold, or a span for emphasis, and an underline for text that goes somewhere.

Publish and read the sentence out loud

Style the span on desktop first. Styles cascade down to tablet and both mobile widths until you override them. If the highlighted word should be the same color on a phone, you do not need a second value. If it should differ, switch to that breakpoint and set the color there.

Publish the domain you want to check. Read the sentence on the live page, not only on the canvas. Confirm the highlighted word is still the right word, the link in the same sentence still goes to the right place, and the color is readable on the background behind it.

Example to check: 'Plans start at the annual price.' The word annual uses Price note. The rest of the sentence matches the paragraph. Nothing else on the page picked up Price note unless you applied that class on purpose.

Styling one part of a sentence on a page you already have is ordinary type work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.