Guías bluuwebCSS Fundamentos
- CSS (en inglés Cascading Style Sheets) Hojas de estilo en Cascada.
- Es el responsable de todo lo visual de nuestro sitio web.
- CSS describe cómo deben mostrarse los elementos HTML.
⭐ Videos Premium ⭐
Esta sección es parte del curso en Udemy. Si quieres acceder a ella, puedes comprar el curso en Udemy: Bootstrap 5 by bluuweb.
Vista rápida
Ingresa el siguiente código
<h1 style="color: peru;">Título del sitio web</h1>
Y wualá cambiamos el color del título de nuestro sitio web.
Archivos separados
Como estamos trabajando con un lenguaje diferente a HTML podemos ordenar nuestro código en archivos con la extensión .css
Dentro del <head> escribe los siguiente:
<link
rel="stylesheet"
href="estilos.css"
/>
Crea el archivo en cuestión estilos.css Y ahora escribamos nuestras primeras lineas de código CSS.
h1 {
font-size: 50px;
}
Ten en cuenta que ahora todos los <h1> que crees tendrás los mismos estilos.
Sintaxis
Definamos las reglas generales para escribir código CSS.
- El selector apunta al elemento HTML que desea diseñar.
- El bloque de declaración contiene una o más declaraciones separadas por punto y coma.
- Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
- Múltiples declaraciones CSS están separadas por punto y coma, y los bloques de declaración están rodeados por llaves.
Alernativas
Dentro del head puedes incluir código CSS:
<style>
p {
color: palevioletred;
}
</style>
Por lo tanto tienes 3 formas de trabajar con CSS:
- CSS externo
- CSS interno
- CSS en línea
¿Por qué se llaman estilos en cascada?
Esto pasa porque se pueden sobre-escribir los estilos para un determinado elemento. Por lo tanto, un estilo en línea tiene la máxima prioridad y anulará los estilos externos e internos y los valores predeterminados del navegador. https://www.w3schools.com/css/css_howto.asp
colores
https://www.w3schools.com/css/css_colors.asp
Por nombre: (muy limitado)
Colores en hexadecimal: (lo más utilizado)
RGB y RGBA: (podemos agregar transparencia)
HSL
Selectores
Hace referencia a como aplicamos estilos a determinados elementos HTML. https://www.w3schools.com/css/css_selectors.asp
Elementos HTML
Estilos generales: Ya que todos nuestros párrafos tendrás el mismo diseño.
p {
text-align: center;
color: red;
}
ID
Cuidado: Los ID son únicos por cada documento HTML por lo tanto no puede haber dos o más elementos HTML con el mismo ID.
#mi_id_unico {
text-align: center;
color: red;
}
<p id="mi_id_unico">Lorem ipsum dolor sit amet</p>
Clase
Ventaja: Podemos agregar esa clase a más de un elemento HTML.
.mi-clase {
background-color: #e8505b;
color: #f3ecc2;
}
<button class="mi-clase">Mi botón</button>
Ejercicios
Trata de resolver los siguientes ejercicios:
Práctica
Documentación utilizada:
/*
https://colorhunt.co/palette/191657
*/
/*
primary: #383e56
secondary: #f69e7b
light: #eedad1
info: #d4b5b0
*/
.bg-primary {
background-color: #383e56;
}
.bg-secondary {
background-color: #f69e7b;
}
.bg-light {
background-color: #eedad1;
}
.bg-info {
background-color: #d4b5b0;
}
.text-primary {
color: #383e56;
}
.text-secondary {
color: #f69e7b;
}
.text-light {
color: #eedad1;
}
.text-info {
color: #d4b5b0;
}
.text-white {
color: #fff;
}
.text-center {
text-align: center;
}
.w-200 {
width: 200px;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Mi primer sitio web con CSS</title>
<link
rel="stylesheet"
href="estilos.css"
/>
</head>
<body>
<!-- agregar secciones -->
<header class="bg-primary text-center">
<hr />
<h1 class="text-light">Mi primer sitio web con estilos CSS</h1>
<hr class="bg-primary" />
<p class="text-info">Lorem ipsum dolor sit amet consectetur.</p>
<hr />
</header>
<!-- navbar -->
<nav class="text-center">
<button class="w-200 bg-secondary text-primary">Inicio</button>
<button class="w-200 bg-secondary text-primary">Nosotros</button>
<button class="w-200 bg-secondary text-primary">Servicios</button>
<button class="w-200 bg-secondary text-primary">Blog</button>
<button class="w-200 bg-secondary text-primary">Contacto</button>
</nav>
<!-- navbar -->
<!-- main -->
<main>
<table>
<tr>
<td>
<div class="bg-info">
<hr />
<h3 class="text-center text-primary">Lorem, ipsum dolor.</h3>
<hr />
<p class="text-center">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis
obcaecati nihil vitae expedita neque aperiam a exercitationem
tempore reiciendis recusandae, minima velit. Quis voluptatem
error delectus doloremque placeat aspernatur. Excepturi!
</p>
<hr />
<div class="text-center">
<button class="bg-primary text-white">Más información</button>
</div>
<hr />
</div>
</td>
<td>
<div class="bg-info">
<hr />
<h3 class="text-center text-primary">Lorem, ipsum dolor.</h3>
<hr />
<p class="text-center">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis
obcaecati nihil vitae expedita neque aperiam a exercitationem
tempore reiciendis recusandae, minima velit. Quis voluptatem
error delectus doloremque placeat aspernatur. Excepturi!
</p>
<hr />
<div class="text-center">
<button class="bg-primary text-white">Más información</button>
</div>
<hr />
</div>
</td>
<td>
<div class="bg-info">
<hr />
<h3 class="text-center text-primary">Lorem, ipsum dolor.</h3>
<hr />
<p class="text-center">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis
obcaecati nihil vitae expedita neque aperiam a exercitationem
tempore reiciendis recusandae, minima velit. Quis voluptatem
error delectus doloremque placeat aspernatur. Excepturi!
</p>
<hr />
<div class="text-center">
<button class="bg-primary text-white">Más información</button>
</div>
<hr />
</div>
</td>
</tr>
</table>
</main>
<!-- main -->
<!-- pie de página -->
<footer class="bg-secondary text-center">
<hr />
<p>Todos los derechos reservados 2020</p>
</footer>
</body>
</html>