Create Inline Text Styling with span Tags in HTML

HTMLHTMLBeginner
Practice Now

Introduction

In this lab, you will learn how to use HTML <span> tags to create inline text styling and enhance the visual presentation of web content. The lab focuses on understanding the purpose of span tags, creating a basic HTML document structure, and applying custom inline styles to specific text segments.

Through a practical, evolving example, you will explore how span tags can be used to target and style small portions of text without disrupting the document's flow. By the end of this lab, you will be able to apply custom text colors, backgrounds, and other inline styling techniques using HTML span elements, providing more dynamic and visually appealing text formatting in your web pages. We will build upon a single HTML file throughout this lab, gradually adding more features and styles.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/text_dir("`Text Direction`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-451038{{"`Create Inline Text Styling with span Tags in HTML`"}} html/text_head -.-> lab-451038{{"`Create Inline Text Styling with span Tags in HTML`"}} html/text_dir -.-> lab-451038{{"`Create Inline Text Styling with span Tags in HTML`"}} html/doc_flow -.-> lab-451038{{"`Create Inline Text Styling with span Tags in HTML`"}} html/inter_elems -.-> lab-451038{{"`Create Inline Text Styling with span Tags in HTML`"}} end

Understanding the Purpose of Span Tags

In this step, you'll learn about the purpose and functionality of <span> tags in HTML. <span> tags are inline-level elements. This means they are designed to work within the flow of a text, unlike block-level elements like <p> or <div> which create line breaks before and after them. <span> tags allow you to apply specific styling or add semantic meaning to a small portion of text within a larger block of content.

Think of it like highlighting a specific word in a sentence with a marker. The <span> tag acts like that marker, allowing you to target that specific word for styling.

They are particularly useful for:

  • Applying inline styles: Changing the appearance of specific words or phrases.
  • Adding custom formatting: Making parts of the text bold, italic, colored, etc.
  • Highlighting specific text: Drawing attention to important parts of your content.
  • Targeting small text segments for JavaScript or CSS manipulation: Giving you precise control over individual pieces of text.

Let's create a simple HTML file to demonstrate the use of <span> tags. Open the WebIDE and create a new file called styling-example.html in the ~/project directory. This file will be our canvas for the rest of the lab.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>This line contains a <span>special</span> word.</p>
  </body>
</html>

In this example, the <span> tag wraps around the word "special". Right now, it doesn't change the appearance, but it marks that word as something we can style later.

Notes: Learn more about How to preview HTML files in the WebIDE. Take a moment to preview styling-example.html in the WebIDE. You'll see both paragraphs displayed normally. The <span> tag, by itself, doesn't change how the text looks.

HTML span tag example preview

Applying Basic Inline Styling

Now, let's make the word "special" stand out. In this step, you'll learn how to apply inline styling directly to the <span> element using the style attribute. Inline styling means adding CSS properties directly within the HTML tag.

Open the styling-example.html file in the WebIDE and modify the <span> tag like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>
      This line contains a <span style="font-weight: bold;">special</span> word.
    </p>
  </body>
</html>

We've added the style attribute to the <span> tag. Inside the style attribute, we've written font-weight: bold;. This is a basic CSS property that makes the text bold.

Here's a breakdown:

  • style=" ... ": This is the HTML attribute that allows you to apply CSS rules directly to this element.
  • font-weight: bold;: This is a CSS declaration.
    • font-weight: This is the CSS property that controls how bold the text is.
    • bold: This is the value we're assigning to the font-weight property.
    • ;: The semicolon is important! It separates different CSS declarations within the style attribute. If you want to add more styles later, you'll need to separate them with semicolons.

Preview styling-example.html in the WebIDE again. You should now see the word "special" in bold. This demonstrates how <span> tags allow you to target specific text for styling.

HTML span tag bold text example

Adding More Inline Styles

Let's make the styling more interesting. You can apply multiple inline styles to a single <span> tag. In this step, we'll add italics and underline to our "special" word.

Open styling-example.html in the WebIDE and modify the <span> tag to include more styles:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>
      This line contains a
      <span
        style="font-weight: bold; font-style: italic; text-decoration: underline;"
        >special</span
      >
      word.
    </p>
  </body>
</html>

We've added two more CSS declarations within the style attribute, separated by semicolons:

  • font-style: italic;: This makes the text italic.
  • text-decoration: underline;: This adds an underline to the text.

Remember the semicolon after each declaration! It's crucial for the browser to understand where one style ends and the next begins.

Preview styling-example.html. The word "special" should now be bold, italicized, and underlined. This shows the power of combining multiple inline styles with the <span> tag.

HTML span tag with bold italic underline styles

Customizing Text Color and Background

Now let's change the colors of the text and its background. In this step, you'll learn how to use the color and background-color CSS properties within the style attribute of the <span> tag.

Open styling-example.html and modify the <span> tag again:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>
      This line contains a
      <span
        style="font-weight: bold; font-style: italic; text-decoration: underline; color: blue; background-color: lightyellow;"
        >special</span
      >
      word.
    </p>
  </body>
</html>

We've added two new CSS declarations:

  • color: blue;: This sets the text color to blue. You can use various color names (like red, green, black, etc.) or hexadecimal color codes (like #FF0000 for red).
  • background-color: lightyellow;: This sets the background color of the span to light yellow. Similar to color, you can use named colors or hexadecimal codes.

Preview styling-example.html. The word "special" should now be bold, italicized, underlined, blue, and have a light yellow background. This demonstrates how you can significantly change the appearance of specific text using <span> tags and inline styles.

Styled text with blue color and light yellow background

A More Practical Example

Let's see how you might use <span> tags in a more realistic scenario. Imagine you're creating a product description. You might want to highlight certain features or the price.

Open styling-example.html and replace its content with the following:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <h1>Product Description</h1>
    <p>
      Introducing our new
      <span style="font-weight: bold;">Super Gizmo 3000</span>!
    </p>
    <p>Key Features:</p>
    <ul>
      <li><span style="color: green;">Ultra-fast processing</span></li>
      <li>
        Long-lasting <span style="font-style: italic;">battery life</span>
      </li>
      <li>Available in <span style="color: blue;">multiple colors</span></li>
    </ul>
    <p>Price: <span style="font-size: 1.2em; color: red;">$99.99</span></p>
    <p>
      Limited time offer:
      <span style="background-color: yellow; font-weight: bold; padding: 2px;"
        >Free Shipping!</span
      >
    </p>
  </body>
</html>

In this example:

  • We've used <span> to make the product name bold.
  • We've used <span> to color-code key features.
  • We've used <span> to make the price larger and red. Notice the font-size property here, showing you can control text size too! The em unit is a relative unit, making the text size relative to the parent element's font size.
  • We've used <span> to highlight a special offer with a background color and padding. padding adds space around the text within the background color.

Preview styling-example.html. You'll see how <span> tags can be used to add visual emphasis and structure to your content, making it more engaging and easier to read.

HTML span tag styling example

Summary

In this lab, you've learned about the purpose and implementation of HTML <span> tags, focusing on their role in applying inline text styling. You've seen how <span> tags, as inline-level elements, allow you to target and style specific portions of text without disrupting the overall flow of your document.

You practiced creating a basic HTML document and progressively added inline styles using the style attribute within <span> tags. You explored various CSS properties like font-weight, font-style, text-decoration, color, and background-color, learning how to combine them to achieve different visual effects. Finally, you applied your knowledge to create a more practical product description example, demonstrating how <span> tags can enhance the presentation and readability of your web content. You are now equipped to use <span> tags effectively to add dynamic and visually appealing text formatting to your web pages.

Other HTML Tutorials you may like