1.- Estilizando elementos con clases CSS
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<title>Estilizando Elementos con Clases CSS</title>
</head>
<body>
<div class="container">
<p class="texto-destacado">Este es un texto destacado que resalta sobre el resto del contenido.</p>
</div>
</body>
</html>
.texto-destacado {
color: #FF6347;
font-weight: bold;
font-size: 1.2rem;
}
2.- Destacando títulos con CSS
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<title>Destacando Títulos con CSS</title>
</head>
<body>
<div class="container">
<h1 class="titulo-blog">Título de la Publicación del Blog</h1>
<p>Este es el contenido de la publicación.</p>
</div>
</body>
</html>
.titulo-blog {
color: #2E8B57;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 2px;
border-bottom: 2px solid #2E8B57;
padding-bottom: 5px;
}
3.- Estilos stiuacionales con clases CSS
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<title>Estilos Situacionales con Clases CSS</title>
</head>
<body>
<div class="container">
<p class="urgente">¡Noticia Urgente! Se ha producido un evento importante.</p>
</div>
</body>
</html>
.urgente {
color: #FF0000;
font-weight: bold;
background-color: #FFE4E1;
padding: 10px;
border-left: 5px solid #FF0000;
}
4.- Entendiendo y aplicando el reset CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
5.- Aplicando el modelo de caja en la práctica
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<title>Aplicando el Modelo de Caja en CSS</title>
</head>
<body>
<div class="container">
<p class="ajustado">Este párrafo tiene un margen, borde y relleno ajustados para demostrar el modelo de caja.</p>
</div>
</body>
</html>
.ajustado {
margin: 20px;
padding: 15px;
border: 2px solid #4CAF50;
background-color: #F0FFF0;
font-size: 1rem;
}