How to use span classes to style a specific column without affecting associated markers

using span classes to style specific words without affecting punctuation
01 December 2024

Occasionally, when designing websites and HTML pages, you may want to style only a specific column without affecting associated markers beneath it. For example, you might want to change the color or font of a column, but the associated markers remain in the default state. In such cases, using the <span> tag and adding CSS classes to it can be a suitable solution.

To start, you can use the surrounding column of your interest's <span> tag and add a custom CSS class to it. This way, the control will be fully on that particular column. For instance:

There are many options available to achieve such a task; the main point is to make sure that the markers associated with the column are placed outside the <span> so as not to have any effect on them. This approach allows you to easily and seamlessly modify the content as needed.

Moreover, using this technique can help you present your content more organized and aesthetically pleasing while enhancing the user experience for visitors. However, it’s always best to keep your styles as simple and light as possible, especially when dealing with complex HTML and CSS scenarios.

<p>Hello, this is a <span class="highlight">special</span> word.</p>

<p> - Start tag for paragraph content
"Hello, this is a" - Text before the specific column
<span class="highlight"> - Start tag span with specific class named highlight
"special" - A column that has unique styling
</span> - End tag span
"word." - Continuation of the text showing main markers right after it
</p> - End tag for the paragraph containing the textual content

FAQ

?

How can I apply styling to just one column in HTML?

?

Why shouldn't markers be inside the tag?

?

Can I use multiple in one line?