How to change each line of texts color using css-CodePudding

How do I change the color of each individual line in this scenario to the color specified. I keep changing all the text to either one of these colors but cant seem to separate each line to its specified color.

<p>This text is red.</p>
<p>This text is blue.</p>
<p>This text is green.</p>

CodePudding user response：

Use a simple tag <p> with a class like:

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

<p class='red'>This text is red.</p>

<p class='blue'>This text is blue.</p>

<p class='green'>This text is green.</p>

CodePudding user response：

if you want to affect the color by line number you can use pseudo class :nth-child(number)

p:nth-child(1) {
  color: red;
}

p:nth-child(2) {
  color: blue;
}

p:nth-child(3) {
  color: green;
}

<p>This text is red.</p>
<p>This text is blue.</p>
<p>This text is green.</p>

CodePudding user response：

You can also utilize CSS Variables to make the color more dynamic:

/* Best practice to define CSS Variables in :root */
:root {
  --color: black;
}

/* Base CSS class */
.colorify {
  color: var(--color);
}

/* Specialize implementations of the .colorify CSS class */
.colorify.colorify-blue { --color: blue; }
.colorify.colorify-red { --color: red; }
.colorify.colorify-green { --color: green; }
.colorify.colorify-brown { --color: brown; }

<p  style="--color: red;">
  This text is red because of CSS variable on <code>p</code>.
</p>
<p >
  This text is blue because of <code>colorify-blue</code>.
</p>
<p >
  This text is black because of the default value for the CSS Variable <code>--color</code>.
</p>
<p >
  This text is green, but <span >this is brown</span>.
</p>