How to Set Different Colors in HTML in One Statement

How to set different colors in HTML in one statement?

You could use CSS for this and create classes for the elements. So you'd have something like this

p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }

Then your HTML would read:

<p class="detail">My Name is: <span class="name">Tintinecute</span> </p>

It's a lot neater then inline stylesheets, is easier to maintain and provides greater reuse.

Here's the complete HTML to demonstrate what I mean:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
    p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
    span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }
    </style>
</head>
<body>
    <p class="detail">My Name is: <span class="name">Tintinecute</span> </p>
</body>
</html>

You'll see that I have the stylesheet classes in a style tag in the header, and then I only apply those classes in the code such as <p class="detail"> ... </p>. Go through the w3schools tutorial, it will only take a couple of hours and will really turn you around when it comes to styling your HTML elements. If you cut and paste that into an HTML document you can edit the styles and see what effect they have when you open the file in a browser. Experimenting like this is a great way to learn.

Multi-Colored Text in one line

Not quite sure what you're after, but if you want the font color to be based on an attribute you can use data. The nice thing about this approach instead of using ids, is that you can easily set/get the values or elements with Javascript if needed.

Also, you should be using span tags rather than a.

body {  background-color: #1A1A1D;}
.header {  text-align: center;  font-size: 48px;}
span[data-color] {  text-shadow: 2px 2px #000000;}
span[data-color="super"] {  color: #FF6447;}
span[data-color="bone"] {  color: #FFB951;}
span[data-color="craft"] {  color: #FFF547;}

<div class="header">  <span data-color="super">SUPER</span><span data-color="bone">BONE</span><span data-color="craft">CRAFT</span></div>

Make HTML text have 2 colors without making new line

Wrap the white text in span. And, then set it's color property to white. This will work:

<p style="color:#fc0000;background-color:#404040">Text Color Yellow <span style="color:#ffffff">Text Color White</span></p>

Note: You are also missing # signs in color codes.

What is the best practice for multiple colors in a sentence in HTML/CSS?

<font> tag is deprecated. MDN Docs

Best way is in your question itself. Using span to wrap a particular word.

.red {  color: red;}.blue {  color: blue;}.yellow {  color: yellow;}

<p>Sally found all the <span class="red">RED</span> seashells down by the <span class="blue">BLUE</span> seashore out in the <span class="yellow">YELLOW</span> sun ...</p>

How to switch between two different colors with one button using javascript

You can use toggle function on the classList of that element. Add a class and toggle it.

function start() {  var submit = document.getElementById("submit");  submit.addEventListener("click", toggle);};
function toggle() {  var color = document.getElementById("body");  color.classList.toggle('black');};

start();

.black {  background-color: black;}

<body id="body">   <button id="submit">Submit      <label id="switch">          <input type="checkbox" checked>          <span class="slider"></span>      </label>   </button></body>

How to use different colors in the same HTML link?

Your code part for a:hover .tag works fine and is rendered correctly, but there is an underline on the link on its own. So you need to remove the underline on the link and add it only to part with text.

body {
  background: #E7CEAF;
}

a {
  color: white;
  background: darkred;
  text-decoration: none;
}

a:hover {
  color: powderblue;
  text-decoration: none;
}

.tag {
  font-style: italic;
  color: yellow;
}

a:hover .tag {
  text-decoration: underline;
}

a:hover .text {
  text-decoration: underline;
}

This is some text: <a href="https://www.example.com">
<span class="tag">[this is a tag] </span>
<span class="text">This is a link, the tag being part of the link</span></a>

How to Set Different Colors in HTML in One Statement