Highlight Text with CSS
I want to give a ‘highlight’ effect to some of the key words to make them stand out.
First, I thought I was being clever by making all the titles <h5>. It was a good size and looked alright. And, in the CSS doc I could style them by just using the h5 selector.
<h5>GROW</h5>h5 {
background-color: #FFF44F;
}
This successfully adds the yellow background but it goes beyond just highlighting the text that I wanted. I forgot that heading tags are block elements so it’s going to fill out the whole block area.
Computer Hope suggests using the HTML5 <mark> tag. I’ve never heard of this until now! Let’s see how it turns out.
<mark>GROW</mark>mark {
background-color: #FFF44F;
}
Well look at that!
Computer Hope also suggests using the <span> HTML tag. I always forget about <span>.
<span>GROW</span>span {
background-color: #FFF44F;
}
Looks pretty similar to the <mark> tag outcome.
I don’t understand all of the intricacies of HTML5 yet, but it seems not all browsers support it so the <mark> tag might not work 100% of the time. Whereas the <span> tag is supported by all browsers.
With a little padding, I’m going to call it good.
