- Estilizando elementos con clases CSS
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Ejercicio 1</h1>
<p class="texto-destacado">Desarrollo Ejercicio 1 </p>
</body>
</html>
style.css
body {
border: 2px solid #FF8225;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 50px;
margin-right: 50px;
text-align: center;
background-color: #F8EDED;
color: #FF8225;
}
.texto-destacado{
color: #173B45;
}
- Destacando títulos con CSS
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="titulo-blog"> Ejercicio 2</h1>
<p>Desarrollo de mi primer blog </p>
</body>
</html>
style.css
body {
border: 2px solid #FF8225;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 50px;
margin-right: 50px;
text-align: center;
background-color: #F8EDED;
color: #FF8225;
}
.titulo-blog{
color: #B43F3F;
}
- Estilos situacionales con clases CSS
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="titulo-blog"> Ejercicio 3</h1>
<p class="urgente">¡Ultima hora! Terrible incendio en el parque principal de la ciudad </p>
<p> Promociones en los almacenes de ropa de los diferentes centros comerciales</p>
<p> En adopción camada de chachorros de raza Husky Samoyedo</p>
</body>
</html>
style.css
body {
border: 2px solid #FF8225;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 50px;
margin-right: 50px;
text-align: center;
background-color: #F8EDED;
color: #FF8225;
}
.titulo-blog{
color: #b9420c;
}
.urgente{
color: #B43F3F;
}
- Entendiendo y aplicando el reset CSS
style.css
*{
padding: 0;
margin: 0;
}
body {
border: 2px solid #FF8225;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 50px;
margin-right: 50px;
text-align: center;
background-color: #F8EDED;
color: #FF8225;
}
.titulo-blog{
color: #b9420c;
}
.urgente{
color: #B43F3F;
}
- Inspeccionando elementos y entendiendo el modelo de caja
- Sección Margin: Consiste en l espacio entre la caja y otros elementos alrededor de la página.
- Sección Border: Es el borde de la caja.
- Sección Padding: Espacio entre el contenido y el borde de la caja.
- Sección Content: Puede ser el texto, la imagen o los elementos que se encuentran dentro de la caja.
- Aplicando el modelo de caja en la práctica
style.css
.titulo-blog{
margin: 20px;
color: #b9420c;
}
p {
margin: 20px;
border: 20px;
color: #FF8225;
}