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">
<title>Estilizando elementos</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header></header>
<main>
<p class="texto-destacado"> ¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. </p>
</main>
<footer></footer>
</body>
</html>
.texto-destacado {
color: #D5D3C1;
}
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">
<title>Blog</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1 class="titulo-blog">Bienvenido a mi blog personal</h1>
</header>
<main>
<p> ¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. </p>
</main>
<footer></footer>
</body>
</html>
.titulo-blog {
color: #d2691e;
}
3.- Estilos situacionales con clases CSS
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noticia</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header></header>
<main>
<p class="urgente"> Noticia Urgente: Alura Latam y Oracle lanzan cursos para programadores </p>
</main>
<footer></footer>
</body>
</html>
.urgente {
color: red;
}
4.- Entendiendo y aplicando el reset CSS
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portafolio</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header></header>
<main>
<h1>Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">con un Front-end de calidad!</strong></h1>
<p>
¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
</p>
<a href="https://www.linkedin.com/in/carlos-alberto-gonzalez-custodio">Linkedin</a>
<a href="https://github.com/CarlosGC-LP">Github</a>
<img src="img/perfil.jpg" alt="Imagen de perfil">
</main>
<footer></footer>
</body>
</html>
* {
padding: 10;
margin: 10;
}
5.- Inspeccionando elementos y entendiendo el modelo de caja
padding: Al manipular el padding, defines la posición y el tamaño del contenido dentro del espacio interior de su elemento border: Es una propiedad abreviada para propiedades de CSS como lo son: border-color, border-style, border-width, margin: Ayuda a definir dónde comienza y termina una línea de texto dando un margen entre el area del contenido y con los bordes de la misma
6.- 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">
<title>Portafolio</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header></header>
<main>
<h1>Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">con un Front-end de calidad!</strong></h1>
<p>
¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
</p>
<a href="https://www.linkedin.com/in/carlos-alberto-gonzalez-custodio">Linkedin</a>
<a href="https://github.com/CarlosGC-LP">Github</a>
<img src="img/perfil.jpg" alt="Imagen de perfil">
</main>
<footer></footer>
</body>
</html>
* {
margin: 30px;
padding: 30px;
}
body {
background-color: #D5D3C1;
color: #000000;
}
.titulo-destaque {
color: #22D4FD;
border: 2px solid #22D4FD;
}