How do I have 3 different colors in one line of text?

HTML & CSS
1 
<style type="text/css"> 

.outer {
width:1500px;  /*1500*/
  border: 0px solid #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 168px;
  font-family: georgia;
  text-align: center;
  padding-top: 63px; /*102 */
  padding-bottom: 230px; /*500 */
  margin-top: 0;
  margin-bottom: 0;
}


</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Green Blue Red<span></span></p>

</div>

</body>
</html>
2

Put <span> tags around each piece of text that needs a different colour, give each a different class name, write your CSS for each class and set the colour as you need them.

2 Likes
3

Like this?

<style type="text/css"> 

.outer {
width:1500px;  /*1500*/
  border: 0px solid #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color: Green;
  font-style: normal;
  font-size: 168px;
  font-family: georgia;
  text-align: center;
  padding-top: 63px; /*102 */
  padding-bottom: 230px; /*500 */
  margin-top: 0;
  margin-bottom: 0;
}

.hr4 {
  color: Blue;
  font-style: normal;
  font-size: 168px;
  font-family: georgia;
  text-align: center;
  padding-top: 63px; /*102 */
  padding-bottom: 230px; /*500 */
  margin-top: 0;
  margin-bottom: 0;
}

.hr5 {
  color: Red;
  font-style: normal;
  font-size: 168px;
  font-family: georgia;
  text-align: center;
  padding-top: 63px; /*102 */
  padding-bottom: 230px; /*500 */
  margin-top: 0;
  margin-bottom: 0;
}



</style>

</head>
<body>

<div class="outer">
<p class="hr3">Green<span></span></p>
<p class="hr4">Blue<span></span></p>
<p class="hr5">Red<span></span></p>
</div>

</body>
</html>
4

The puts the text sitting on top of each other and not side by side.

5

More like this

2 Likes
6

Got it, thanks!

7

You put each word in a <p> (paragraph) tag, not a <span> as suggested.
A <p> is a block element, so starts on a new line by default.

A <span> is an inline element, so does not break off to a new line.

2 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.