Loading...

Estilos HTML

HTML por defecto no es muy atractivo visualmente. Los estilos ayudan a hacer el contenido más atractivo — permitiéndote aplicar colores, tamaños, fuentes y disposición a los elementos.

Uso de estilos en línea

Los estilos en línea se aplican directamente a un elemento HTML utilizando el atributo style. Esta es una solución rápida para elementos individuales, pero no se recomienda para proyectos grandes.

Detalles del Código

<p style="color: red;">This text is red.</p>
<h1 style="font-size: 40px;">Large Heading</h1>

Vista Previa

This text is red.

Agregar estilos usando la etiqueta <style>

Un bloque <style> dentro de la sección <head> de un documento HTML te permite definir reglas CSS internas. Esto es útil cuando deseas reglas aplicables a toda la página sin crear un archivo separado.

Uso de archivos CSS externos

La mejor práctica es organizar los estilos en un archivo separado y cargarlo con una etiqueta <link> en el <head>. Esto hace que tu código sea más limpio y reutilizable.

Propiedades CSS más utilizadas

Las propiedades CSS más utilizadas incluyen el color del texto (color), el tamaño de fuente (font-size), la familia de fuente (font-family) y la alineación del texto (text-align). Dominar estas propiedades permite mejoras visuales significativas.

Errores comunes al usar estilos

No uses demasiados métodos de estilo diferentes en la misma página. Recuerda que los estilos en línea sobrescriben el CSS externo, lo que complica el mantenimiento. Siempre busca la simplicidad y la coherencia.

¿Cuándo usar cada método?

  • Usa estilos en línea solo para pruebas rápidas o casos excepcionales.
  • El bloque <style> es bueno cuando se trabaja con un solo archivo HTML, por ejemplo, para aprender.
  • Para proyectos serios, siempre usa archivos CSS externos.
  • Evita mezclar diferentes métodos de estilo: busca coherencia en todo el proyecto.

Resumen

Los estilos definen cómo se ve una página web. Los elementos HTML básicos pueden tener estilos aplicados en línea, mediante bloques de estilo incrustados o a través de archivos CSS externos. Elegir el método adecuado da como resultado un código más limpio y mantenible.

Arrastra la línea CSS correcta que establece el color de fondo a gris claro.

Código

<!DOCTYPE html>

<html>

<head>

<style>

body {

Arrastra el elemento aquí

}

</style>

</head>

<body>

<h1>Hello</h1>

</body>

</html>

Respuestas

background-color: #f0f0f0;
font-size: 18px;
border: 1px solid red;

Vista previa

Sigue Tu Progreso 🚀

Aprende más fácilmente siguiendo tu progreso completamente gratis.


Herramientas destacadas

Hub de CódigoBoardly NUEVOLinksy NUEVOChromo NUEVO

Seleccionar idioma

Establecer tema

© 2025 ReadyTools. Todos los derechos reservados.