Estilos en línea
Cambie el aspecto de sus elementos directamente en HTML
Estilos en línea es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 4 lecciones en total.
Añadir un color de fondo
Puede hacer que sus elementos destaquen utilizando la propiedad background-color.
Ejemplo:
<p style="background-color: yellow;">This text has a yellow background.</p>
Estilos en línea: cómo añadir estilos sencillos a su HTML
¡Le damos la bienvenida a la lección sobre estilos en línea! Hoy aprenderá a aplicar estilos directamente a los elementos de su HTML mediante el atributo style.
¿Qué son los estilos en línea?
Los estilos en línea le permiten añadir CSS directamente a una etiqueta HTML mediante el atributo style. Es la forma más sencilla de aplicar estilos a su página.
Ejemplo:
<p style="color: red;">This is red text!</p>
color: red; cambia el color del texto a rojo.
Cambiar el tamaño de la fuente
Utilice la propiedad font-size para cambiar el tamaño del texto.
Ejemplo:
<p style="font-size: 24px;">This text is 24 pixels large.</p>
Combinar varios estilos
Los estilos en línea permiten combinar varias propiedades CSS. Separe cada propiedad con un punto y coma ;.
Ejemplo:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles!
</p>
Aplicar estilos a otros elementos
Los estilos en línea funcionan con todos los elementos HTML, como encabezados, botones e imágenes.
Ejemplo:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
Styled Button
</button>
Pruébelo usted mismo
Vamos a crear una página web utilizando estilos en línea. Este es un ejemplo para empezar:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This is an example of inline styling.
</p>
<button style="background-color: lightblue; padding: 10px; border: none;">
Click Me!
</button>
</body>
</html>
¡Excelente trabajo!
¡Enhorabuena! Ha aprendido a utilizar estilos en línea para añadir estilos sencillos y eficaces a sus elementos HTML. Los estilos en línea son ideales para hacer cambios rápidos, pero, a medida que crezca su página web, necesitará técnicas de estilización más avanzadas. En la próxima lección, exploraremos los conceptos básicos de CSS. ¡Prepárese para diseñar páginas web profesionales!
Uso del atributo style
¿Qué son los estilos en línea?
Los estilos en línea le permiten añadir CSS directamente a una etiqueta HTML mediante el atributo style. Es la forma más sencilla de aplicar estilos a su página.
Ejemplo:
<p style="color: red;">This is red text!</p>
color: red; cambia el color del texto a rojo.
<p style="color: red;">This is red text.</p>
Preguntas frecuentes
¿La lección «Estilos en línea» es gratis?
Sí — el texto completo de «Estilos en línea» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 4 lecciones en total.
¿Qué aprenderé en «Estilos en línea»?
Cambie el aspecto de sus elementos directamente en HTML Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML for Kids?
No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Estilos en línea»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?
Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Estilos en línea
- Conceptos básicos de CSS
- Colores y fondos
- Formato del texto