1 - Estilizando elementos con clases CSS
<!DOCTYPE html>
Bienvenido a mi página web
Este es un texto destacado que debería resaltar.
/* Archivo: styles.css */
.texto-destacado { color: #ff5733; /* Un color naranja brillante / font-weight: bold; / Negrita para mayor destaque / background-color: #f0f0f0; / Fondo claro para contraste / padding: 5px; / Espacio alrededor del texto / border-radius: 5px; / Bordes redondeados */ }
2 - Destacando títulos con CSS
<!DOCTYPE html>
Título de la Publicación
Contenido de la publicación del blog.
/* Archivo: styles.css */
.titulo-blog { color: #3498db; /* Color azul / font-size: 2.5em; / Tamaño de fuente grande / font-weight: bold; / Negrita para mayor énfasis / text-transform: uppercase; / Convertir el texto a mayúsculas / margin-bottom: 20px; / Espacio debajo del título */ }
3 - Estilos situacionales con clases CSS
<!DOCTYPE html>
Noticias de Hoy
¡Noticia Urgente: Este es un evento importante!
Esta es una noticia regular.
/* Archivo: styles.css */
.urgente { color: #e74c3c; /* Color rojo para urgencia / font-weight: bold; / Negrita para mayor énfasis / background-color: #f9ebea; / Fondo ligeramente rosado / padding: 10px; / Espacio alrededor del texto / border: 1px solid #e74c3c; / Borde rojo / border-radius: 5px; / Bordes redondeados */ }
4 - Entendiendo y aplicando el reset CSS
<!DOCTYPE html>
Bienvenido
Este es un párrafo de ejemplo.
/* Archivo: reset.css */
{ margin: 0; padding: 0; box-sizing: border-box; }
/* Archivo: styles.css */
body { font-family: Arial, sans-serif; padding: 20px; }
h1 { margin-bottom: 20px; color: #2c3e50; }
p { margin-bottom: 10px; color: #34495e; }
5 - Inspeccionando elementos y entendiendo el modelo de caja
Content: La caja que contiene el contenido real del elemento (texto, imagen, etc.). Padding: El espacio entre el contenido y el borde del elemento. Border: El borde alrededor del padding y el contenido. Margin: El espacio exterior al borde, separando el elemento de otros elementos.
6 - Aplicando el modelo de caja en la práctica
<!DOCTYPE html>
Ejemplo de Modelo de Caja
Este es un párrafo con estilo aplicado para demostrar el modelo de caja.
/* Archivo: styles.css */
.modelo-caja { margin: 20px; /* Espacio exterior / border: 2px solid #2980b9; / Borde azul / padding: 15px; / Espacio interior / background-color: #ecf0f1; / Fondo claro / color: #2c3e50; / Color del texto */ }
