I need help with adding multicolor to a heading on my website using CSS. I am trying to define colors using the span element with different classes for each text section. However, the colors are not showing up as expected and there seems to be spacing issues between the span tags when rendered.
View current HTML and output here
I attempted to remove the styling for the h1 tag, thinking it might be causing the problem, but that did not resolve the issue.
Oops, forgot to include the actual code:
Here is the HTML snippet:
<!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>
And the corresponding 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 styling within the main class in the CSS file has been intentionally left blank until we resolve the heading color issue.
I managed to fix the spacing problem, but the coloring is still not working correctly. See image description here