In Dreamweaver (or HMTL and CSS in general) how can you style the ® Registered logo to be smaller and floating upwards?

Question

On the web, using ® will make the Registered logo almost as big as the rest of the text. How can you modify the size of it to match how it would appear in print?

Answer 1

The term you for making text smaller and floating upwards is called superscript.

HTML

You can use the <sup> HTML tag to superscript text.

My text<sup>®</sup>

My text^®

Here is a live example from w3schools.

---

CSS

Alternatively it can be done with CSS with something like this:

.superscript { vertical-align:super; font-size:0.8em; }

And then implemented in HTML like this:

My Text<span class="superscript">®</span>

---

EDIT (HTML & CSS)

If you are looking to keep your HTML cleaner but still wish to customize your superscript with CSS then apply CSS styling to the <sup> tag like so:

sup {
color: red;
font-size: 0.7em;
}

Just add whatever stylings you need. I just added two for example's sake. That way, whenever you use the <sup> tag the styling is automatically applied.