HTML/CSS text formatting: Assigning h1 "MyCloud" but "My" be white and "Clo-CodePudding

Essentially I need to figure out how to Create a large black box and then on top of it I want to have the text "MyCloud" with the "My" being white and the "Cloud" being another color. I got the text to finally be different colors but now the black box has disappeared.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyCloud</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <h1>
        <div myCloud>
            <span style="color: red">My</span><span style="color: blue;">Cloud</span>
        </div>
    </h1>
    <h2>Completed Projects:</h2>
    <h3>Contact Us</h3>
</body>
</html>

*{
    background-color: rgb(255, 255, 255);
}
.myCloud{
    background-color: black;
}
h2{
    background-color: #6331a8;
    text-align: center;
    color: white;
}
h3{
    color: black;
    background-color: #599ed4;
    text-align: right;
    text-decoration: underline;
    padding-right: 30px;
}

CodePudding user response：

you forget something in your code HTML.

try to add class before myCloud like this:

CodePudding user response：

You currently have:

<h1>
    <div myCloud>
        <span style="color: red">My</span><span style="color: blue;">Cloud</span>
    </div>
</h1>

Looks like you forgot class= before myCloud.

Try this:

<h1>
    <div >
        <span style="color: red">My</span><span style="color: blue;">Cloud</span>
    </div>
</h1>

EDIT: You were setting all background colors to be white with the * style at the top of your stylesheet.

.myCloud{
    background-color: black;
}
h2{
    background-color: #6331a8;
    text-align: center;
    color: white;
}
h3{
    color: black;
    background-color: #599ed4;
    text-align: right;
    text-decoration: underline;
    padding-right: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyCloud</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <h1 >
            <span style="color: red">My</span><span style="color: blue;">Cloud</span>
    </h1>
    <h2>Completed Projects:</h2>
    <h3>Contact Us</h3>
</body>
</html>