Embedded Files
INSTITUTO UNIVERSITARIO DE TECNOLOGÍA INDUSTRIAL RODOLFO LOERO ARISMENDI
SUBDIRECCIÓN ACADÉMICA NACIONAL
ASIGNATURA: Desarrollo de la Web
SEMESTRE: 2026 - 03
SECCIÓN: 4DA
UNIDAD I: Fundamentos de HTML y CSS
SEMANA: 3 (Actividad de Transición)
FECHA Publicacion: 29/07/2026 3:32pm.
GUÍA PRÁCTICA: ESTILOS INLINE EN HTML – PUENTE HACIA CSS
TEMA: Aplicación de estilos directos con el atributo "style"
OBJETIVO DE LA ACTIVIDAD
Comprender cómo aplicar estilos directamente en elementos HTML usando el atributo style, para luego identificar las limitaciones de este método y dar paso al uso de clases CSS.
---
1. EXPLICACIÓN TEÓRICA: ¿QUÉ ES UN ESTILO INLINE?
Un estilo inline es una regla CSS aplicada directamente en una etiqueta HTML usando el atributo style.
Sintaxis:
<etiqueta style="propiedad: valor; propiedad: valor;">Contenido</etiqueta>
Ejemplo:
<p style="color: red; font-size: 18px;">Texto en rojo de 18px</p>
Ventajas:
✓ Rápido para pruebas o cambios puntuales
✓ No requiere archivo CSS externo
✓ Útil para entender la relación propiedad-valor
Desventajas:
✗ No se puede reutilizar (cada elemento debe estilarse por separado)
✗ Mezcla contenido con diseño (mala práctica a largo plazo)
✗ Difícil de mantener en proyectos grandes
→ Por esto, HOY aprenderemos inline para MAÑANA usar clases.
---
2. PROPIEDADES BÁSICAS PARA ESTILOS INLINE
Propiedad | Valor de Ejemplo | Efecto Visual
---------------------|------------------------------------|------------------------------------------
color | red, #333, rgb(0,0,0) | Cambia el color del texto
background-color | yellow, #f0f0f0, rgba(0,0,0,0.5) | Cambia el color de fondo del elemento
font-size | 16px, 1.2em, large, 100% | Define el tamaño de la letra
font-weight | bold, normal, 700, lighter | Controla el grosor de la letra
text-align | left, center, right, justify | Alinea el texto horizontalmente
padding | 10px, 5px 10px, 10px 20px 10px 20px| Espacio interno entre borde y contenido
margin | 10px, 0 auto, 20px 10px | Espacio externo entre elementos
border | 1px solid black, 2px dotted red | Define el borde alrededor del elemento
width | 100%, 300px, auto, 50vw | Establece el ancho del elemento
text-decoration | none, underline, overline, line-through | Aplica decoración al texto (subrayado, etc.)
3. EJEMPLOS PRÁCTICOS GUIADOS
3.1. MENÚ CON UL Y LI (Estilos Inline)
```html
<!-- Menú de navegación con estilos inline -->
<ul style="list-style-type: none; padding: 0; margin: 0; background-color: #333;">
<li style="display: inline; margin-right: 20px;">
<a href="#" style="color: white; text-decoration: none; font-weight: bold;">Inicio</a>
</li>
<li style="display: inline; margin-right: 20px;">
<a href="#" style="color: white; text-decoration: none; font-weight: bold;">Servicios</a>
</li>
<li style="display: inline; margin-right: 20px;">
<a href="#" style="color: white; text-decoration: none; font-weight: bold;">Contacto</a>
</li>
</ul>
```
Explicación clave:
- list-style-type: none → Quita los puntos de la lista
- display: inline → Pone los elementos en fila horizontal
- margin-right: 20px → Espacio entre cada ítem del menú
3.2. LISTA DE TEXTOS (5 elementos mínimo)
```html
<!-- Lista de habilidades con estilos inline -->
<h3 style="color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 5px;">Mis Habilidades</h3>
<ul style="padding-left: 20px;">
<li style="color: #27ae60; font-weight: bold; margin: 5px 0;">✓ HTML5 - Estructura web</li>
<li style="color: #27ae60; font-weight: bold; margin: 5px 0;">✓ CSS Básico - Estilos simples</li>
<li style="color: #27ae60; font-weight: bold; margin: 5px 0;">✓ Formularios - Captura de datos</li>
<li style="color: #27ae60; font-weight: bold; margin: 5px 0;">✓ Tablas - Organización de información</li>
<li style="color: #27ae60; font-weight: bold; margin: 5px 0;">✓ Enlaces - Navegación entre páginas</li>
</ul>
```
3.3. TABLA CON ESTILOS INLINE
```html
<!-- Tabla de notas con estilos inline -->
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
<thead>
<tr style="background-color: #3498db; color: white;">
<th style="border: 1px solid #2980b9; padding: 10px; text-align: left;">Materia</th>
<th style="border: 1px solid #2980b9; padding: 10px; text-align: center;">Nota</th>
<th style="border: 1px solid #2980b9; padding: 10px; text-align: center;">Estado</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #ecf0f1;">
<td style="border: 1px solid #bdc3c7; padding: 8px;">Desarrollo Web</td>
<td style="border: 1px solid #bdc3c7; padding: 8px; text-align: center; font-weight: bold;">18</td>
<td style="border: 1px solid #bdc3c7; padding: 8px; text-align: center; color: #27ae60;">Aprobado</td>
</tr>
<tr>
<td style="border: 1px solid #bdc3c7; padding: 8px;">Base de Datos</td>
<td style="border: 1px solid #bdc3c7; padding: 8px; text-align: center; font-weight: bold;">14</td>
<td style="border: 1px solid #bdc3c7; padding: 8px; text-align: center; color: #27ae60;">Aprobado</td>
</tr>
<tr style="background-color: #ecf0f1;">
<td style="border: 1px solid #bdc3c7; padding: 8px;">Programación</td>
<td style="border: 1px solid #bdc3c7; padding: 8px; text-align: center; font-weight: bold;">09</td>
<td style="border: 1px solid #bdc3c7; padding: 8px; text-align: center; color: #e74c3c;">Reprobado</td>
</tr>
</tbody>
</table>
```
---
4. EJERCICIOS PARA EL ESTUDIANTE
INSTRUCCIONES:
1. Copie cada ejercicio en su editor de código o en https://www.w3schools.com/html/tryit.asp
2. Complete el código siguiendo las indicaciones
3. Pruebe el resultado en el navegador
4. Entregue el código escrito + captura de pantalla
EJERCICIO 1: MENÚ PERSONALIZADO
Cree un menú horizontal con 4 opciones usando ul/li. Aplique estilos inline para:
- Quitar los puntos de la lista
- Poner los elementos en fila
- Color de fondo oscuro (#2c3e50)
- Texto blanco y sin subrayado en los enlaces
- Espacio entre cada opción
Espacio para su código:
```html
<!-- EJERCICIO 1: MENÚ PERSONALIZADO -->
<!-- Estudiante: _______________________________ -->
```
Validación:
☐ El menú es horizontal (no vertical)
☐ Tiene exactamente 4 opciones
☐ El fondo es oscuro y el texto blanco
☐ Los enlaces no tienen subrayado
☐ Hay espacio entre las opciones
---
EJERCICIO 4: TRANSICIÓN A CLASES (REFLEXIÓN)
Analice el código del Ejercicio 1 (Menú) y responda:
Pregunta 1: Si quisiera cambiar el color de fondo de TODOS los elementos del menú, ¿cuántas veces tendría que editar el código usando estilos inline?
Respuesta: _______________________________
Pregunta 2: ¿Qué pasaría si quiero reutilizar este mismo menú en otra página?
Respuesta: _______________________________
Pregunta 3: Proponga una solución usando una clase CSS (sin implementarla, solo escriba la idea):
Respuesta: _______________________________
Ejemplo de respuesta esperada:
"En lugar de repetir style='...' en cada li, podría crear una clase .menu-item { ... } y usar class='menu-item' en cada elemento."
---
5. PUENTE HACIA CLASES CSS: EL SIGUIENTE PASO
Una vez comprendido el estilo inline, observamos su principal limitación: REPETICIÓN.
Comparación: Inline vs Clases
```html
<!-- CON ESTILOS INLINE (Repetitivo) -->
<li style="color: white; font-weight: bold;">Opción 1</li>
<li style="color: white; font-weight: bold;">Opción 2</li>
<li style="color: white; font-weight: bold;">Opción 3</li>
<!-- CON CLASES CSS (Reutilizable) -->
<!-- En HTML -->
<li class="menu-item">Opción 1</li>
<li class="menu-item">Opción 2</li>
<li class="menu-item">Opción 3</li>
<!-- En archivo style.css -->
.menu-item {
color: white;
font-weight: bold;
}
```
Ventajas de usar clases:
✓ Escribo la regla UNA vez, la aplico MUCHAS veces
✓ Si quiero cambiar el diseño, modifico solo el CSS
✓ El HTML queda más limpio y legible
✓ Es el estándar profesional de desarrollo web
Próxima clase: Crearemos nuestro primer archivo style.css y migraremos estos ejercicios a clases.
---
6. CRITERIOS DE EVALUACIÓN
| Criterio | Puntos |
|----------|--------|
| Ejercicio 1: Menú funcional con estilos inline | 2.5 pts |
| Ejercicio 2: Lista con colores y formato correcto | 2.5 pts |
| Ejercicio 3: Tabla con bordes, colores y alineación | 2.5 pts |
| Ejercicio 4: Reflexión sobre clases CSS | 2.5 pts |
| TOTAL | 10 pts |
---
7. RECOMENDACIONES FINALES
✅ Para practicar:
- Use https://www.w3schools.com/html/tryit.asp para probar código rápidamente
- Cambie valores de color y tamaño para ver el efecto inmediato
- Experimente con propiedades nuevas del compendio de la sección 2
✅ Errores comunes a evitar:
- Olvidar los puntos y comas al final de cada propiedad: style="color: red; font-size: 16px;"
- Usar comillas simples dentro de comillas simples: style='color: 'red'' ❌
- Mejor: style="color: 'red'" o style='color: "red"' ✅
✅ Para la próxima clase:
- Traiga su proyecto de menú, lista y tabla con estilos inline
- Estaremos migrando ese código a un archivo CSS externo
- Investigue: ¿Qué es un selector de clase en CSS?
---
RECURSOS ADICIONALES
- W3Schools - HTML Styles: https://www.w3schools.com/html/html_styles.asp
- W3Schools - CSS Intro: https://www.w3schools.com/css/css_intro.asp
- Colores HTML: https://www.w3schools.com/colors/colors_names.asp
---
Page updated
Google Sites
Report abuse