How can I multicolor a h1 in HTML?

Question

I want to multicolor a heading in my website. I'm using CSS for the color defining, and using span with the class for the text. However, the color doesnt show and there's this space between the different span tags when it renders.

Current HTML and the output

I tried to remove the h1 styling (I have styling for the h1 tag itself) thinking that was the issue. And nope.

oops, forgot to add the code xD

the html:

<!DOCTYPE html>

<head>
    <title>
        Why are you here?
    </title>
    <link rel="stylesheet" href="Akari.css">
</head>

<html>
    <body>
        <div>
            <h1>
            <span class="colorRed">
                Ak
            </span>
            <span color="colorDarkRed">
                 a
            </span>
            <span class="colorDarkOrange">
                ri -
            </span>
            <span class="colorRed">
                Play
            </span>
            <span class="colorDarkRed">
                st
            </span>
            <span class="colorGreen">
                ation
            </span>
            <span class="colorDarkOrange">
                3 V
            </span>
            <span class="colorOrange">
                SH
            </span>
            <span class="colorOrange">
                Me
            </span>
            <span class="colorYellow">
                nu
            </span>
            </h1>
            
        </div>
        <div class="main">
            <p>
                test
            </p>
        </div>
    </body>


    <div class="navbar">
        <a href="../index.html">
           Back to home
        </a>
    </div>
</html>

the CSS:

body
        {
            margin: 0;
            background-color: rgb(0, 0, 0);
            background-image: url(../images/channels4_banner.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
        }
        a:link
        {
            color: rgb(126, 70, 156);
            text-decoration: none
 
        }
     a:visited
        {
            color: rgb(126, 70, 156);
        }
     a:hover
        {
            color: rgb(255, 255, 255);
        }
     a:active
        {
            color: purple;
        }

    .navbar
        {
            background-color: rgb(52, 51, 51);
            overflow: hidden;
            position: fixed;
            bottom: 0;
            width: 100%;
            border-radius: 10px;
            opacity: 90%;
        }
    .navbar a 
        {
            float: left;
            display: block;
            color: rgb(126, 70, 156);
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
    .navbar a:hover 
        {
            background-color: grey;
            color: rgb(55, 37, 58);
            transition: background-color 1s,
                color 1s
        }
    .navbar a.active
        {
            color: white;
        }

h1 
            {
              background-color:  rgb(126, 70, 156);
              opacity: 40%;
            }
colorRed
            {
                color:red;
            }
colorDarkRed
            {
                color:rgb(169, 4, 4);
            }
colorGreen
            {
                color:green;
            }
colorDarkOrange
            {
                color:rgb(162, 107, 4);
            }
colorOrange
            {
                color:orange;
            }
colorYellow
            {
                color:yellow;
            }


main
            {
                
            }

The main in the CSS is empty for a reason, it will be used when fix this heading issue.

Fixed the spacing issue, still no coloring though. enter image description here

Please see [ask] and take the [tour]. You need to show some code here. We don't debug images. — isherwood, Jan 10 '23 at 16:45
Also show your CSS, which I assume contains styles for the color classes. — isherwood, Jan 10 '23 at 16:46
[How to remove the space between inline/inline-block elements?](https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-inline-block-elements) — isherwood, Jan 10 '23 at 16:46

Tyler · Answer 1 · 2023-01-10T16:59:35.303

Spacing Issue

Your <span> tags technically have a space between them because they are on new lines, that's why you are seeing spaces rendering in between the letters in your <h1>.

So instead of:

<span class="colorRed">
  Ak
</span>
<span color="colorDarkRed">
  a
</span>
<span class="colorDarkOrange">
  ri -
</span>
<span class="colorRed">
  Play
</span>
<span class="colorDarkRed">
  st
</span>
<span class="colorGreen">
  ation
</span>

Try:


<span class="colorRed">Ak</span><span color="colorDarkRed">a</span><span class="colorDarkOrange">ri -</span><span class="colorRed">Play</span><span class="colorDarkRed">st</span><span class="colorGreen">ation</span>

Color Classes

You should be able to set up the colors like this:

.colorRed {
  color: red;
}
.colorDarkRed {
  color:darkred 
}
/* etc.. */

edit: you need to set up your classes with a dot in front of them. So rather than:

colorDarkRed { /* styles */ }

Try:

.colorDarkRed { /* styles */ }

To elaborate on a correct answer: `span` is an inline-element. As such a linebreak will have the same effect as a normal space. The solution recommended is one of many possible solutions that however is one of the poorer solutions compared to the others as it potentially si harder to read. [This duplicate](https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-inline-block-elements) is a good summery of other solutions. — tacoshy, Jan 10 '23 at 23:18

How can I multicolor a h1 in HTML?

1 Answers1

Spacing Issue

Color Classes