If you asked me to pick just one piece of code every blogger should know how to use, I would say the HTML tag, Span. The Span tag can change the font family, line height, letter spacing, padding, color, size… and well, everything about your text. While web designers would typically go into your style.css sheet and write code to make these changes, I’m going to let you in on a little secret: you don’t need to hire a web designer. You can make these coding changes right inside your blog’s editor.
This is just a few of the things the Span tag can do.
How to write the Span tag
The Span tag wraps around the text you want to modify.
[disclaim]<span style=”[write the css code here];”>This is the text you want to change. </span>[/disclaim]
The Span tag allows you to put custom CSS changes into your post or page as a one-time deal. If you want to make the style change throughout all of your blog, you’d make the change in the style.css sheet in your blog files. But if you want to make an occasional change, you can use the HTML tag called Span. Just write the Span tag in the text or editor section of your blog’s editor.
Copy and paste the code examples I have below and explore how you can make style changes in your post or page, all without having to figure out how to change your stylesheet or hiring a web designer (like me). You copy the text that starts with <span and go all the way to the tag closer, </span>. Then change the numbers and have fun!
Change the line height of your text
Did you know that readability of your blog will increase if the[tooltip text=”The spacing between each line of text. You probably remember having to double space your papers in school. Double spaced means 200% line height.”] line height [/tooltip] to 150% or 200%? Copy and paste the text below and increase the line height of some of your text.
- <span style=”line-height:150%;”>Text here.</span>
Change the spacing between letters
Sometimes you want to change the spacing between the letters. This is especially useful in large fonts and headings.
- <span style=”letter-spacing: 2px;”>Text here. </span>
Create space around your text
You can use padding to add extra space around your text. You no longer have to mess with trying to figure out how many paragraph breaks you need. Just put in the amount of pixel space you need. You can also specify if you want the padding in only one area, not all around the text. Need more than one direction of padding? Just add it on the code.
- <span style=”padding:5px;”>Text here. </span>
- <span style=”padding-bottom:20px;”>Text here. </span>
- <span style-“padding-top:5px;padding-right:15px;”>Text here. </span>
Change the text color
Most of the time, you’ll be able to pick the color you want from your blog editor’s menu bar. But if you cannot, here’s how you can select the text color using the Span tag.
- <span style=”color:#CAE3DA”>Text here. </span>
Putting it all together
Remember the large, mint-colored text above? That was all done with this code:
- <span style=”font-size: 3em; color: #cae3da; letter-spacing: 5px; line-height: 200%; padding: 20px;”> This is just a few of the things the Span tag can do.</span>
You can add as much text-changing CSS inside the Span tag that you’d like. Just make sure there is a semi-colon between each style change.
If you want to do more than copy and paste, and really want to understand the full effect of the Span tag, I’ll be teaching an entire section on the Span tag and other HTML secrets in my HTML & CSS Crash Course for Creative Bloggers course.