Como mudar a cor de uma palavra especifica dentro de uma frase com css?

Question

ol&aacute; me ajudem com isso:

Existe um par&aacute;grafo  Meu dia foi lindo demais.

exemplo: Quero alterar a cor da palavra dia para roxo e da palavra lindo para azul. Como fa&ccedil;o isso da forma mais f&aacute;cil?

Estou criando do zero no index.php um tutorial de aprendizado, e existem palavras  em certas frases que eu preciso alterar a cor dentro na LI ou &agrave;s vezes dentro do P. Por isso, pe&ccedil;o ajuda para fazer da maneira mais profissional poss&iacute;vel.

o unico jeito que eu encontrei para fazer isso at&eacute; agora foi criando metatags personalizadas e ficou assim:

cg{
   color:green;
}
cv{
  color: red;
}

html:
&lt;li&gt;exemplo &lt;cv&gt;lindo dia&lt;/cv&gt; exemploxxx &lt;cg&gt;boa tarde&lt;/cg&gt; para todos&lt;/li&gt;

Answer

Faz muito tempo q fa&ccedil;o html e css, por&eacute;m eu criei um c&oacute;digo aqui funcional.
&lt;!DOCTYPE html&gt;
&lt;html lang=pt-br&gt;
  &lt;head&gt;
    &lt;meta charset=UTF-8&gt;
    &lt;meta name=viewport content=width=device-width, initial-scale=1.0&gt;
    
    &lt;link rel=stylesheet type=text/css href=stylesheet.css media=screen/&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;section class=content&gt;
      &lt;div class=example-with-paragraph&gt;
        &lt;p&gt;Meu &lt;span class=word-color-dia&gt;dia&lt;/span&gt; foi &lt;span class=word-color-lindo&gt;lindo&lt;/span&gt; demais&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=example-with-list&gt;
        &lt;ul&gt;
          &lt;li&gt;exemplo &lt;span class=color-blue&gt;lindo&lt;/span&gt; &lt;span class=color-purple&gt;dia&lt;/span&gt; exemplo &lt;span class=color-green&gt;boa tarde&lt;/span&gt; para todos&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;
Css:
/* Estilos para a se&ccedil;&atilde;o de conte&uacute;do */
.content {
  max-width: 800px;
  margin: 0 auto;
}

/* Estilos para a cor da palavra 'dia' */
.word-color-dia {
  color: purple;
}

/* Estilos para a cor da palavra 'lindo' */
.word-color-lindo {
  color: blue;
}

/* Estilos para a cor azul */
.color-blue {
  color: blue;
}

/* Estilos para a cor roxa */
.color-purple {
  color: purple;
}

/* Estilos para a cor verde */
.color-green {
  color: green;
}

Answer

luis-oliveir... disse: Faz muito tempo q fa&ccedil;o html e css, por&eacute;m eu criei um c&oacute;digo aqui funcional.
&lt;!DOCTYPE html&gt;
&lt;html lang=pt-br&gt;
  &lt;head&gt;
    &lt;meta charset=UTF-8&gt;
    &lt;meta name=viewport content=width=device-width, initial-scale=1.0&gt;
    
    &lt;link rel=stylesheet type=text/css href=stylesheet.css media=screen/&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;section class=content&gt;
      &lt;div class=example-with-paragraph&gt;
        &lt;p&gt;Meu &lt;span class=word-color-dia&gt;dia&lt;/span&gt; foi &lt;span class=word-color-lindo&gt;lindo&lt;/span&gt; demais&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=example-with-list&gt;
        &lt;ul&gt;
          &lt;li&gt;exemplo &lt;span class=color-blue&gt;lindo&lt;/span&gt; &lt;span class=color-purple&gt;dia&lt;/span&gt; exemplo &lt;span class=color-green&gt;boa tarde&lt;/span&gt; para todos&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;
Css:
/* Estilos para a se&ccedil;&atilde;o de conte&uacute;do */
.content {
  max-width: 800px;
  margin: 0 auto;
}

/* Estilos para a cor da palavra 'dia' */
.word-color-dia {
  color: purple;
}

/* Estilos para a cor da palavra 'lindo' */
.word-color-lindo {
  color: blue;
}

/* Estilos para a cor azul */
.color-blue {
  color: blue;
}

/* Estilos para a cor roxa */
.color-purple {
  color: purple;
}

/* Estilos para a cor verde */
.color-green {
  color: green;
}
&lrm;ent&atilde;o usando span e classes &eacute; mais profissional do que usar essas tags personalizadas n&atilde;o sem&acirc;nticas, realmente faz sentido kkkk

Answer

Gabriel Roch... disse: luis-oliveir... disse: Faz muito tempo q fa&ccedil;o html e css, por&eacute;m eu criei um c&oacute;digo aqui funcional.
&lt;!DOCTYPE html&gt;
&lt;html lang=pt-br&gt;
  &lt;head&gt;
    &lt;meta charset=UTF-8&gt;
    &lt;meta name=viewport content=width=device-width, initial-scale=1.0&gt;
    
    &lt;link rel=stylesheet type=text/css href=stylesheet.css media=screen/&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;section class=content&gt;
      &lt;div class=example-with-paragraph&gt;
        &lt;p&gt;Meu &lt;span class=word-color-dia&gt;dia&lt;/span&gt; foi &lt;span class=word-color-lindo&gt;lindo&lt;/span&gt; demais&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=example-with-list&gt;
        &lt;ul&gt;
          &lt;li&gt;exemplo &lt;span class=color-blue&gt;lindo&lt;/span&gt; &lt;span class=color-purple&gt;dia&lt;/span&gt; exemplo &lt;span class=color-green&gt;boa tarde&lt;/span&gt; para todos&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;
Css:
/* Estilos para a se&ccedil;&atilde;o de conte&uacute;do */
.content {
  max-width: 800px;
  margin: 0 auto;
}

/* Estilos para a cor da palavra 'dia' */
.word-color-dia {
  color: purple;
}

/* Estilos para a cor da palavra 'lindo' */
.word-color-lindo {
  color: blue;
}

/* Estilos para a cor azul */
.color-blue {
  color: blue;
}

/* Estilos para a cor roxa */
.color-purple {
  color: purple;
}

/* Estilos para a cor verde */
.color-green {
  color: green;
}
&lrm;ent&atilde;o usando span e classes &eacute; mais profissional do que usar essas tags personalizadas n&atilde;o sem&acirc;nticas, realmente faz sentido kkkk
Sim, utilizar as tags sem&acirc;nticas padr&atilde;o do HTML, como 
&lt;span&gt;
 e 
&lt;div&gt;
, e associ&aacute;-las a classes CSS &eacute; considerado mais profissional e sem&acirc;ntico do que criar tags personalizadas n&atilde;o sem&acirc;nticas. No entanto, eu sou leigo em HTML, programa&ccedil;&atilde;o e tal, e s&oacute; me lembro de fazer assim.

Ferramentas

Mover Tópico