Estilos directamente sobre etiquetas html - Curso de html5 avanzado - Capítulo 3

¿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:

Etiquetas html5

<!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>

Resultado en el navegador

El resultado, es lo esperado. Una cabecera <h1> sin ningún tipo de estilo, por defecto.

Cabecera h1 html5

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.

Etiquetas html5

<!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.


Capítulos


    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


    Comentarios

    Si te quedan dudas sobre el temario, sobre html5, 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.