Prev

Inline Styles

Overlapping Styles

Overlapping Inline Styles
We <em>really <strong>really</strong></em>
hope you are enjoying this lesson!
will appear as:
We really really hope you are enjoying this lesson!
It sometimes makes sense to overlap inline styles. This means that you might start one inline style before closing another. If some text is inside both style tags then both styles would be applied.

For example, most browsers will display a style that is inside both a <em> tag and a <strong> tag as bold and italicized.

Remember: Close tags in the order they were opened

A Bad Example
This <em>is <strong>not</em> allowed</strong>

There is an important rule that must always be followed for overlapping inline styles, and actually for all container tags in HTML. This rule is that although you may overlap tags, you must close them in the order they were opened.

Imagine a stack of books. You can add a new book to the stack or you can pick the top book off the stack, but you can't very easily pick a book out of the middle of the stack. Now imagine that each book is a tag and putting a book on the stack is like writing the start tag and taking it off is like writing the end tag. Try to imagine putting books on the stack and taking them off as you read your code.

If you try to do this with the first example on this page, you would:

  1. Add the <em> book
  2. Add the <strong> book
  3. Pick up the <strong> book
  4. Pick up the <em> book
That example follows the rule.

But if you try with the bad example above, you would:

  1. Add the <em> book
  2. Add the <strong> book
  3. Remove the <em> book... wait, it's at the bottom!

That example does not follow the rule!

Prev