Skip to content

CSS 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.

O bien también puedes visualizar los videos siendo miembro en Youtube. Accede a miembros del canal aquí y accede a los videos de esta sección.

Vista rápida

Ingresa el siguiente código

html
<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:

html
<link rel="stylesheet" href="estilos.css" />

Crea el archivo en cuestión estilos.css Y ahora escribamos nuestras primeras lineas de código CSS.

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:

html
<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.

css
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.

css
#mi_id_unico {
    text-align: center;
    color: red;
}
html
<p id="mi_id_unico">Lorem ipsum dolor sit amet</p>

Clase

Ventaja: Podemos agregar esa clase a más de un elemento HTML.

css
.mi-clase {
    background-color: #e8505b;
    color: #f3ecc2;
}
html
<button class="mi-clase">Mi botón</button>

Ejercicios

Trata de resolver los siguientes ejercicios:

Práctica

Documentación utilizada:

css
/* 
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;
}
html
<!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>