HTML <span> style Attribute

A style attribute on a <span> tag.

<article>
  <p>
    Did you know? The Great Pyramid of Giza was the tallest building in the world
    for <span style="background-color: papayawhip;">over 3,800 years</span>, 
    until the construction of the Lincoln Cathedral in the UK in 1311.
  </p>
</article>

<span style="CSS-styles">

A style attribute on a <span> tag.
Clicking the button toggles the background color.

<article>
  <p>
    Did you know? The Great Pyramid of Giza was the tallest building in the world
    for <span id="myspan" style="background-color: papayawhip;">over 3,800 years</span>, 
    until the construction of the Lincoln Cathedral in the UK in 1311.
  </p>
</article>

<br />
<button onclick="toggle();">Toggle style</button>

<script>
  let toggle = () => {
     let element = document.getElementById("myspan");

     if (element.style.backgroundColor === "papayawhip") {
       element.style.backgroundColor = "lightblue";
    } else {
       element.style.backgroundColor = "papayawhip";
    }
  }
</script>

Code explanation

Here is when style support started for each browser:

Chrome	1.0	Sep 2008
Firefox	1.0	Sep 2002
IE/Edge	1.0	Aug 1995
Opera	1.0	Jan 2006
Safari	1.0	Jan 2003

• Our HTML span Tag Reference
• Our HTML style Attribute Reference
• Our CSS Text Tutorial