Autor Tema: Ejemplo aplicar estilos mediante atributo class de HTML con CSS  (Leído 3013 veces)

wilfridocardena

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Hola a todos
Código: [Seleccionar]
<html>
<head>
<title>CSS – aprenderaprogramar.com</title>
<style type="text/css">
.color_verde {
color: green;
}
.color_amarillo {
color: yellow;
}
</style>
</head>
<body>
<p >Este texto va de color verde.</p>
<p >Este texto va de color amarillo.</p>
</body>
</html>

Tengo un problema con este codigo porque lo copio y lo pego tal y como esta pero al abrirlo en los exploradores tanto google chrome como internet explorer no me reconoce con los colores , se queda en negro nadamas aparece el texto en negro espero que alguien me pueda ayudar con esta duda porfavor ya que me gustaria saber si es que tengo que configurar algo en mi maquina o si es que tengo que cambiar algo en el codigo muchisimas gracias de antemano hasta la proxima duda
« Última modificación: 15 de Abril 2015, 10:36 por Alex Rodríguez »

javi in the sky

  • Avanzado
  • ****
  • Mensajes: 393
    • Ver Perfil
Hola Wilfrido, para que se apliquen los estilos tienes que definir el atributo class de los elementos HTML.

Es recomendable realizar este curso de HTML: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

Y luego el de CSS: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

El código quedaría así:

Código: [Seleccionar]
<html>
<head>
<title>CSS - aprenderaprogramar.com</title>
<style type="text/css">
.color_verde {
color: green;
}
.color_amarillo {
color: yellow;
}
</style>
</head>
<body>
<p class="color_verde">Este texto va de color verde.</p>
<p class="color_amarillo">Este texto va de color amarillo.</p>
</body>
</html>

Saludos!

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".