Estilos CSS en etiquetas HTML
Capítulo 3: Estilos directamente sobre etiquetas html
¿Cómo asignar estilos directamente sobre una etiqueta html
En este tercer capítulo te explico de forma muy breve como asignar estilos sobre las etiquetas HTML con el atributo style. Esto, no es lo más aconsejable salvo casos específicos. Debes conocer este tema, pero si aprendes a utilizar CSS más adelante, verás que es una manera mucho mejor de aplicar estilos para las páginas web.
El atributo style
Casi todas las etiquetas html se pueden personalizar directamente con estilos CSS gracias al atributo style. Veamos un ejemplo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html 5 avanzado - Capítulo 3 - El atributo style</title>
</head>
<body>
<h1>Título de la página</h1>
</body>
</html>El resultado, es lo esperado. Una cabecera <h1> sin ningún tipo de estilo, por defecto.
Ahora, vamos a añadirle a esta página, un fondo de color negro y vamos a poner el título en color blanco para que se vea sobre este fondo oscuro. Para hacerlo, tenemos que incluir un style a la etiqueta de apertura del <body> y otro a la cabecera.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html 5 avanzado - Capítulo 3 - El atributo style</title>
</head>
<body style="background-color: black;">
<h1 style="color: white;">Título de la página</h1>
</body>Con la propiedad background-color, especificamos un color de fondo. Con color, un color de fuente (letra).
Cada etiqueta html tiene sus posibles estilos, por ejemplo, hay estilos específicos para texto que no van a funcionar con imágenes.
Tampoco te preocupes por aprender mucho sobre este tema. Es algo que veremos en el siguiente curso, el de CSS. Solo quiero que conozcas este atributo y lo que hace.
En el vídeo de este capítulo tienes unos cuantos ejemplos más.
Comentarios
Si te quedan dudas sobre el temario, sobre html, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
