Making different parts of a paragraph have different background colors

Not only can you set different elements to have different background colors but in some cases you can even set different parts of an element to have different background colors. For example, paragraphs.

What's the point of making different parts of a paragraph have different background colors?

This concept has many uses, actually. For example, if you want to highlight important keywords of a paragraph for the user or if you want to highlight entire sentences.

The <span> tag

Each part of a paragraph that you want to have a different background color, contain it within a <span> tag. The <span> tag can be used to change the style of something on a page without affecting the context it is within.

Example:
<p>HTML stands for <span class="y">Hyper Text Markup Language</span> and it is a language used to create webpages. There are many other web languages out there, but HTML is different. <span class="y">HTML is the core language of the world wide web</span>, the fundamental building block of webpages. Without it, there are no webpages. It all starts with HTML - <span class="y">the simplest but the most important web language</span>. With HTML you make your own pages and decide what <span class"o">text</span>, <span class="o">links</span>, <span class="o">graphics</span>, <span class="o">forms</span>, as well as other elements will appear on them.</p>

The CSS for the paragraph:

p span.y {background:color: yellow;} p span.o {background:color: orange;}
Output:

HTML stands for Hyper Text Markup Language and it is a language used to create webpages. There are many other web languages out there, but HTML is different. HTML is the core language of the world wide web, the fundamental building block of webpages. Without it, there are no webpages. It all starts with HTML - the simplest but the most important web language. With HTML you make your own pages and decide what text, links, graphics, forms, as well as other elements will appear on them.

Read more about the <span> tag at our HTML div & span tags tutorial.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information