There is a useful way to highlight an HTML element/tag(a) in a certain color

Question

Well, I want to define a color tag style.

The following example changes the style of an element

<p id="tag"> parágrafo </p> 

To change the style of an HTML element, this syntax is used:

<script>
   document.getElementById("tag").style.color = "blue";
</script>

So far so good, but I wish I could set a direct color on the tag displayed on the page

Then it would be syntax below, which puts the HTML element visible on the web page.

<p> parágrafo </p>

Result of the above syntax, its output is as in the line below

<p> parágrafo </p> 

So I want you to <p> and </p> have defined color, stipulated by me, for example - blue

Answer 1

You can use the selectors before and after:

.paragraphClass::before, .paragraphClass::after{
  color: blue;
}
.paragraphClass::before{
  content: '<p>';
}
.paragraphClass::after{
  content: '</p>';
}

<div class="paragraphClass">foo</div>

Answer 2

Follow another alternative.

body {
    background-color: lightblue;
    font-size: 10pt;
}

#code {
    background-color: whitesmoke;
}


samp { color: tomato; }

<strong>Exemplo: o Meu Primeiro código de mark-up</strong>

<pre id="code">

    <samp>&lt;html&gt;</samp> 

      <samp>&lt;head&gt;</samp>

        <samp>&lt;title&gt;</samp> Título <samp>&lt;/title&gt;</samp>

      <samp>&lt;/head&gt;</samp>

        <samp>&lt;body&gt;</samp>

          <samp>&lt;p&gt;</samp> parágrafo <samp>&lt;/p&gt;</samp>

        <samp>&lt;/body&gt;</samp>

    <samp>&lt;/html&gt;</samp>

</pre>

This tag samp represents an output of a computational result.

Answer 3

You can define a CSS rule for the tag itself.

p {
  color: #F00;
}

So all the tags p will turn red color.