There is a useful way to highlight an HTML element / tag in a given color

Navigation
2

Well, I want to set a color to the 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, use this syntax: 

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

So far so good, but I wanted to be able to set a direct color in the tag displayed on the page

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

&lt;p&gt; parágrafo &lt;/p&gt;

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

<p> parágrafo </p>

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

    
asked by anonymous 25.01.2017 / 05:01

3 answers

7

You can use the before and after : 

.paragraphClass::before, .paragraphClass::after{
  color: blue;
}
.paragraphClass::before{
  content: '<p>';
}
.paragraphClass::after{
  content: '</p>';
}
<div class="paragraphClass">foo</div>
    
25.01.2017 / 09:00
0

You can define a CSS rule for the tag itself. 

p {
  color: #F00;
}

So all p tags will be red.

    
25.01.2017 / 20:05
0

Here's 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 samp tag represents an output of a computational result.

    
25.01.2017 / 18:25
Calculate Time Range [duplicate] Validating TextBox