Anyone can do this.

One of my all-time favourite authors is Kristine Kathryn Rusch, especially her Retrieval Artist series.

I guess if you're talking enthusiastically about something you may want to emphasise key words, but today's tutorial is about making spans of text appear differently, for example as bold or italic when you're not emphasising them.

As human beings who are looking at a page we've learned to distinguish between bold for headings, bold for emphasis and bold for book titles. But if a blind person is listening to a page it would become tedious, and perhaps confusing, to have random bits of text emphasised by the computer's voice when it's not actually emphasis. Similarly, if software, such as a search engine, is reading your text then incorrect emphasis just throws it out of whack.

There's a virtue in just doing the right thing, in being a guardian angel on the web.

Just today Micro.Blogger Holly Honeychurch wrote this in a longer blog post: I’m grateful for the small kindnesses of people. They don’t realise just how much difference they can make to another person’s life. They are, in those moments, guardian angels and it brings a passionate tear of gratitude to my eye to realise I met an angel today.

If you think I've gone off into a bit of a rant, then you'd be right. So many people make this basic mistake and it really makes a difference and is so easy to get right.

Make a span of text stand out

I started out this tutorial with a paean to my favourite author. I put her name in bold, and the title of a book series in italics. Here's how. By the way: in this tutorial you can click on her name in that first line to go to her website.

Copy and paste the following text into first.html and save. I had to break it up into several lines for convenience in this tutorial. 

<p>One of my all-time favourite authors is 
<span class="author">Kristine Kathryn Rusch</span>, 
especially her <span class="title">Retrieval Artist</span> series. </p>

I found Atom just made an enormously long line so I had to scroll sideways. Obviously word-wrap isn't turned on by default. To fix that go to the Atom menu and select Preferences , then Editor. Scroll down to the Soft Wrap section and check the box. Then close the Settings tab.

Use HTML to mark up a span of text.

Use HTML to mark up a span of text.

  1. Mark up a span of text with <span> tags and save. Assign a class to the span so you can target it in the CSS.
  2. Add rules for each class to the CSS and save.
  3. Refresh the browser.

Copy and paste the following text into first.css and save. 

.author {
  font-weight:bold;
}

.title {
font-style:italic;  
}

Notice: in the HTML file the class name is just author or title — there's no dot at the start. In the CSS file it's .author and .title, with a dot directly in front of the class name.

Span and class work together to change the appearance of a span of text.

Span and class work together to change the appearance of a span of text.

Span and Class work together

A span is useful for marking out short spans of text. There are other techniques for long stretches of a web page. The span on its own though doesn't do anything — it's just saying to the web browser: this bit's special.

Now we need a class. A class of text is a type of text. In the example above it's text of the author type or the title type. That gives us a hook that we can grab onto in the stylesheet.

You can use whatever you like as the name of a class, but it can't start with a number. I suggest you keep it short and to the point — that way it'll be more memorable, easier to type and make sense in a year or two when you or someone else is looking at it.

Try changing some things in your own first.css. See if you can colour the author's name or the book title, swap the italics and bold. Now you know this we're ready to venture into the Edit CSS section of your Micro.Blog.