CSS (Hojas de Estilo de Cascada)

Índice

  1. Introducción
  2. Propiedades CSS
  3. Selectores
  4. Selectores Descendientes
  5. Selectores de Atributos
  6. Diseño Responsivo
  7. Sass

Introducción

  • CSS se utiliza para personalizar la apariencia de un sitio web.
  • Aunque estamos comenzando, podemos agregar un atributo de estilo a cualquier elemento HTML para aplicarle CSS.
  • Cambiamos el estilo al alterar las propiedades de CSS de un elemento, escribiendo algo como color: blue o text-align: center.
  • En el siguiente ejemplo, hacemos un ligero cambio en nuestro primer archivo para darle un encabezado colorido.
html
1<!DOCTYPE html>
2<html lang="es">
3<head>
4<title>Hola!</title>
5</head>
6<body>
7<h1 style="color: blue; text-align: center;">Un Encabezado Colorido!</h1>
8  Hola, Neo!
9</body>
10<html>

Ejemplo:

Ejemplo de CSS, url de la imagen: /images/css-heading-color.png
  • Si aplicamos estilo a un elemento externo, automáticamente todos los elementos internos adquieren ese estilo. Podemos ver esto si trasladamos el estilo que acabamos de aplicar desde la etiqueta de encabezadoheadera la etiqueta de cuerpobody:
    • html
    1<!DOCTYPE html>
    2<html lang="en">
    3<head>
    4<title>Hola!</title>
    5</head>
    6<body style="color: blue; text-align: center;">
    7  <h1 >Un Encabezado Colorido!</h1>
    8    Hola, Neo!
    9</body>
    10<html>
    Ejemplo de CSS, url de la imagen: /images/css-2.png
    • Aunque podemos dar estilo a nuestra página web como lo hemos hecho anteriormente, para lograr un mejor diseño, deberíamos ser capaces de separar nuestro estilo de las líneas individuales
      1. Una forma de hacerlo es añadir tu estilo entre etiquetas<style>en la sección<head>del documento HTML. Dentro de estas etiquetas, escribimos qué tipos de elementos queremos estilizar y el estilo que deseamos aplicar a ellos. Por ejemplo:
    html
    1<html lang="es">
    2<!DOCTYPE html>
    3<head>
    4    <title>Hola!</title>
    5    <style>
    6        h1 {
    7            color: blue;
    8            text-align: center;
    9        }
    10    </style>
    11</head>
    12<body>
    13    <h1 >Un Encabezado de Color!</h1>
    14    Hola, Marte!
    15</body>
    16</html>
  • Otra forma es incluir un elemento<link>en la sección<head>de tu documento con un enlace a un archivo styles.css que contiene algún estilo. Esto significa que el archivo HTML se vería de la siguiente manera:
    • html
    1<html lang="es">
    2<!DOCTYPE html>
    3<head>
    4    <title>Hola!</title>
    5    <link rel="stylesheet" href="styles.css">
    6</head>
    7<body>
    8    <h1 >Encabezado de Color!</h1>
    9    Hola, mundanos!
    10</body>
    11</html>
  • Crearemos un archivostyles.cssque se vería de la siguiente manera:
    • css
    1h1 {
    2  color: blue;
    3  text-align: center;
    4}

    Propiedades CSS

    • Hay demasiadas propiedades de CSS para cubrir aquí, pero al igual que con los elementos HTML, generalmente es fácil buscar algo como "cambiar fuente a azul CSS" en Google para obtener el resultado deseado. Sin embargo, algunas de las más comunes son las siguientes:
      1. color: el color del texto.
      2. text-align: la alineación de los elementos en la página.
      3. background-color: puede ser establecido a cualquier color.
      4. width: en píxeles o porcentaje de la página.
      5. height: en píxeles o porcentaje de la página.
      6. padding: cuánto espacio debe dejarse dentro de un elemento. element
      7. margin: cuánto espacio debe dejarse fuera de un elemento.
      8. font-family: tipo de fuente para el texto en la página.
      9. font-size: medida de la fuente en píxeles.
      10. border: tamaño, tipo (solid, dotted, groove, etc.) y color.
    • Utilicemos lo que acabamos de aprender para mejorar nuestra tabla de océanos que se mencionó anteriormente. Aquí tienes un fragmento de HTML para comenzar:
    html
    1<!DOCTYPE html>
    2<html lang="en">
    3    <head>
    4        <title>Tabla con Estilo</title>
    5    </head>
    6    <body>
    7        <table>
    8            <thead>
    9                <th>Oceano</th>
    10                <th>Profundidad Promedio</th>
    11                <th>Máxima Profundidad</th>
    12            </thead>
    13            <tbody>
    14                <tr>
    15                    <td>Pacífico</td>
    16                    <td>4280 m</td>
    17                    <td>10911 m</td>
    18                </tr>
    19                <tr>
    20                    <td>Atlántico</td>
    21                    <td>3646 m</td>
    22                    <td>8486 m</td>
    23                </tr>
    24            </tbody>
    25        </table>
    26    </body>
    27<html>
    Ejemplo para tabla en CSS, url de la imagen: /images/table-style.png
  • Lo anterior se parece mucho a lo que teníamos antes, pero ahora, ya sea incluyendo una etiqueta de estilo<style>o un enlace a una hoja de estilo<link rel="stylesheet" href="styles.css">en la sección head de nuestro documento html. Agregamos el siguiente CSS:
    • css
    1table {
    2  border: 1px solid black;
    3  border-collapse: collapse;
    4}
    5            
    6td {
    7  border: 1px solid black;
    8  padding: 2px;
    9}
    10            
    11th {
    12  border: 1px solid black;
    13  padding: 2px;
    14}

    Lo que nos deja una tabla estilada como ésta:

    Ejemplo de CSS, url de la imagen: /images/table-styled.png
  • Es posible que ya estés pensando que hay cierta repetición innecesaria en nuestro CSS en este momento, ya que tantotdcomothtienen el mismo estilo. Podemos y debemcondensar esto en el siguiente código, utilizando una coma para indicar que el estilo debe aplicarse a más de un tipo de elemento.
    • css
    1table {
    2  border: 1px solid black;
    3  border-collapse: collapse;
    4}
    5            
    6td, th {
    7  border: 1px solid black;
    8  padding: 2px;
    9}

    Selectores CSS

    • Esto es una buena introducción a lo que se conocen como selectores CSS. Hay muchas formas de determinar qué elementos HTML estás estilizando, algunas de las cuales mencionaremos aquí:
      1. Tipo de elemento: esto es lo que hemos estado haciendo hasta ahora, estilizando todos los elementos del mismo tipo.
      2. Id: Otra opción es dar a nuestros elementos HTML un id de la siguiente manera:
        <h1 id="primer-encabezado">¡Hola!</h1>y luego aplicar estilos usando#first-header {...}utilizando el signo de numeral para indicar que estamos buscando por id. Es importante destacar que ningún par de elementos puede tener el mismo id, y ningún elemento puede tener más de un id porque es único.
      3. Clase: Esto es similar al id, pero una clase puede ser compartida por más de un elemento, y un solo elemento puede tener más de una clase. Agregamos clases a un elemento HTML de la siguiente manera:
        <h1 class="texto-pagina atenuado">¡Hola!</h1>(nota que acabamos de agregar dos clases al elemento: texto-pagina y atenuado). Luego, estilizamos en función de la clase usando un punto en lugar de un signo de numeral:.atenuado {...}
    • Ahora, también debemos lidiar con el problema del CSS potencialmente conflictivo. ¿Qué sucede cuando un encabezado debería ser rojo según su clase pero azul según su id? CSS tiene un orden de especificidad que va así:
      1. Estilo en línea (in-line styling).
      2. Id (id="")
      3. Clase (class="")
      4. Tipo de Elemento
    • Además de la coma para múltiples selectores, hay varias otras formas de especificar qué elementos deseas estilizar. Esta tabla de la conferencia proporciona algunas de ellas, y a continuación te presentaré algunos ejemplos.
    css
    1/*Selector de elementos múltiples*/
    2h1, h2 {
    3  font-weight: bold;
    4}
    5/*Para un selector descendiente*/
    6article p {
    7  font-size: 1rem;
    8}
    9/*Selector Child (hijo)*/
    10div > li {
    11  list-style: none;
    12}
    13/*Selector de hermanos adyacentes*/
    14li + li {
    15  font-family: 'Roboto';
    16}
    17/*Selector de atributo*/
    18li[data-category="frutas"] {   /*html = <li data-category="frutas">Manzana</li>*/
    19  color: green;
    20}
    21/*Selector de pseudoclases*/
    22li:hover {
    23  background-color: lightgray;
    24}
    25li:active {
    26  background-color: lightgreen;
    27}
    28/*Selector de pseudoelementos*/
    29span::before {
    30  content: "";
    31  position: absolute;
    32  background: #FAFAFA;
    33}

    Selectores descendientes

    Selector de descendencia: Aquí, utilizamos el selector de descendencia para aplicar estilo solo a los elementos de lista que se encuentran dentro de una lista desordenada.

    html
    1<!DOCTYPE html>
    2<html lang="en">
    3    <head>
    4        <title>Usando Selectores</title>
    5        <style>
    6            ul li {
    7                color: blue;
    8            }
    9        </style>
    10    </head>
    11    <body>
    12        <ol>
    13            <li>lista</li>
    14            <li> listo
    15                <ul>
    16                    <li>hola</li>
    17                    <li>adiós</li>
    18                    <li>madre de dios</li>
    19                </ul>
    20            </li>
    21            <li>listado</li>
    22        </ol>
    23    </body>
    24<html>
    Ejemplo CSS, url de la imagen: /images/descendent-css.png

    Selectores de atributos

    También podemos afinar nuestra selección basándonos en los atributos que asignamos a los elementos HTML utilizando corchetes. Por ejemplo, en la siguiente lista de enlaces, optamos por hacer que el enlace a Amazon sea de color rojo:

    html
    1<!DOCTYPE html>
    2<html lang="en">
    3    <head>
    4        <title>Usando Selectores</title>
    5        <style>
    6            a[href="https://www.amazon.com/"] {
    7                color: red;
    8            }
    9        </style>
    10    </head>
    11    <body>
    12        <ol>
    13            <li><a href="https://www.google.com/">Google</a></li>
    14            <li><a href="https://www.amazon.com/">Amazon</a> </li>
    15            <li><a href="https://www.facebook.com/">Facebook</a></li>
    16        </ol>
    17    </body>
    18<html>
    Ejemplo de CSS, url de la imagen: /images/links-css.png
    • No solo podemos usar CSS para cambiar permanentemente la apariencia de un elemento, sino también para modificar su aspecto bajo ciertas condiciones. Por ejemplo, ¿qué sucede si deseamos que un botón cambie de color cuando pasamos el cursor sobre él? Podemos lograr esto utilizando una pseudoclase CSS, que proporciona estilos adicionales en circunstancias especiales. Lo escribimos añadiendo dos puntos después de nuestro selector y luego especificando la circunstancia después de esos dos puntos.
    • En el caso del botón, agregaríamos:hoveral selector del botón para indicar el diseño que se aplicará solo cuando se pasa el cursor sobre él.
    html
    1<!DOCTYPE html>
    2<html lang="en">
    3    <head>
    4        <title>Pseudoclasses</title>
    5        <style>
    6            button {
    7                background-color: red;
    8                width: 200px;
    9                height: 50px;
    10                font-size: 24px;
    11            }
    12

    13            button:hover {
    14                background-color: green;
    15            }
    16        </style>
    17    </head>
    18    <body>
    19        <button>Button 1</button>
    20        <button>Button 2</button>
    21        <button>Button 3</button>
    22    </body>
    23<html>
    Ejemplo de CSS (botones), url de la imagen: /images/buttons.gif

    Diseño Responsivo

    • Hoy en día, muchas personas visitan sitios web en dispositivos distintos a las computadoras, como smartphones y tabletas. Es importante asegurarse de que tu sitio web sea legible para las personas en todos los dispositivos.
    • Una forma de lograr esto es mediante el conocimiento delviewport(ventana gráfica). Elviewportes la parte de la pantalla que es visible para el usuario en un momento dado. Por defecto, muchas páginas web asumen que elviewportes el mismo en cualquier dispositivo, lo que lleva a que muchos sitios (especialmente los más antiguos) sean difíciles de interactuar en dispositivos móviles.
    • Una forma sencilla de mejorar la apariencia de un sitio en un dispositivo móvil es agregar la siguiente línea en la sección head de nuestros archivos HTML. Esta línea indica al dispositivo móvil que utilice un viewport que tenga el mismo ancho que el del dispositivo que se está utilizando, en lugar de uno mucho más grande.
    html
    1<meta name="viewport" content="width=device-width, initial-scale=1.0">
    • Otra forma de adaptarnos a diferentes dispositivos es a través de las "media queries" (consultas de medios). Las media queries son formas de cambiar el estilo de una página según la forma en que se está visualizando la página.
    • Como ejemplo de una consulta de medios (media query), intentemos cambiar simplemente el color de la pantalla cuando se reduce a un cierto tamaño. Indicamos una consulta de medios escribiendo@media, seguido del tipo de consulta entre paréntesis:
    html
    1<!DOCTYPE html>
    2<html lang="en">
    3    <head>
    4        <title>Tamaño de pantalla</title>
    5        <style>
    6            @media (min-width: 600px) {
    7                body {
    8                    background-color: red;
    9                }
    10            }
    11

    12            @media (max-width: 599px) {
    13                body {
    14                    background-color: blue;
    15                }
    16            }
    17        </style>
    18    </head>
    19    <body>
    20        <h1>Bienvenidos a la página!</h1>
    21    </body>
    22</html>
  • Otra forma de manejar diferentes tamaños de pantalla es utilizando un nuevo atributo CSS conocido comoflexbox. Esto nos permite que los elementos se ajusten fácilmente a la siguiente línea si no caben horizontalmente. Para lograrlo, colocamos todos nuestros elementos en un contenedor que llamaremos "nuestro contenedor". Luego, añadimos estilo a ese div especificando que queremos utilizar un diseño de flexbox para los elementos dentro de él. También hemos agregado estilo adicional a los div internos para ilustrar mejor el ajuste que está ocurriendo aquí.
    • html
    1<!DOCTYPE html>
    2<html lang="en">
    3    <head>
    4        <title>Screen Size</title>
    5        <style>
    6            #container {
    7                display: flex;
    8                flex-wrap: wrap;
    9            }
    10

    11            #container > div {
    12                background-color: green;
    13                font-size: 20px;
    14                margin: 20px;
    15                padding: 20px;
    16                width: 200px;
    17            }
    18        </style>
    19    </head>
    20    <body>
    21        <div id="container">
    22            <div>Some text 1!</div>
    23            <div>Some text 2!</div>
    24            <div>Some text 3!</div>
    25            <div>Some text 4!</div>
    26            <div>Some text 5!</div>
    27            <div>Some text 6!</div>
    28            <div>Some text 7!</div>
    29            <div>Some text 8!</div>
    30            <div>Some text 9!</div>
    31            <div>Some text 10!</div>
    32            <div>Some text 11!</div>
    33            <div>Some text 12!</div>
    34        </div>
    35    </body>
    36</html>
    Ejemplo CSS (flexbox), url de la imagen: /images/flexbox.gif
  • Otra forma popular de estilizar una página es utilizando una cuadrícula HTML. En esta cuadrícula, podemos especificar atributos de estilo como anchos de columna y espacios entre columnas y filas, como se muestra a continuación. Ten en cuenta que cuando especificamos anchos de columna, decimos que el tercero es "auto", lo que significa que debería ocupar el resto de la página.
    • html
    1<!DOCTYPE html>
    2<html lang="en">
    3    <head>
    4        <title>My Web Page!</title>
    5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6        <style>
    7            .grid {
    8                background-color: green;
    9                display: grid;
    10                padding: 20px;
    11                grid-column-gap: 20px;
    12                grid-row-gap: 10px;
    13                grid-template-columns: 200px 200px auto;
    14            }
    15

    16            .grid-item {
    17                background-color: white;
    18                font-size: 20px;
    19                padding: 20px;
    20                text-align: center;
    21            }
    22        </style>
    23    </head>
    24    <body>
    25        <div class="grid">
    26            <div class="grid-item">1</div>
    27            <div class="grid-item">2</div>
    28            <div class="grid-item">3</div>
    29            <div class="grid-item">4</div>
    30            <div class="grid-item">5</div>
    31            <div class="grid-item">6</div>
    32            <div class="grid-item">7</div>
    33            <div class="grid-item">8</div>
    34            <div class="grid-item">9</div>
    35            <div class="grid-item">10</div>
    36            <div class="grid-item">11</div>
    37            <div class="grid-item">12</div>
    38        </div>
    39    </body>
    40</html>
    Ejemplo de grilla en CSS, url de la imagen: /images/grid.gif

    Bootstrap

    • Resulta que existen muchas bibliotecas que otras personas ya han desarrollado y que pueden facilitar la estilización de una página web. Una biblioteca popular que utilizaremos en todo el curso se llama Bootstrap.
    • Podemos incluir Bootstrap en nuestro código agregando una sola línea en la sección head de nuestro archivo HTML:
    html
    1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" 
    2integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    • A continuación, podemos explorar algunas de las características deBootstrapnavegando a la sección de documentación de su sitio web. En esta página, encontrarás numerosos ejemplos de clases que puedes agregar a elementos para estilizarlos con Bootstrap.
    • Una característica popular de Bootstrap es susistema de cuadrícula. Bootstrap divide automáticamente una página en 12 columnas, y podemos decidir cuántas columnas ocupa un elemento agregando la clasecol-x, donde x es un número entre 1 y 12. Por ejemplo, en la página siguiente, tenemos una fila de columnas de ancho igual y luego una fila donde la columna del centro es más grande:
    html
    1<!DOCTYPE html>
    2<html lang="es">
    3    <head>
    4        <title>Mi Página Web</title>
    5        <link rel="stylesheet" 
    6        href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
    7        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
    8        crossorigin="anonymous">
    9        <style>
    10            .row > div {
    11                padding: 20px;
    12                background-color: teal;
    13                border: 2px solid black;
    14            }
    15        </style>
    16    </head>
    17    <body>
    18        <div class="container">
    19            <div class="row">
    20                <div class="col-4">
    21                    Esto es una sección.
    22                </div>
    23                <div class="col-4">
    24                    Esto es otra sección.
    25                </div>
    26                <div class="col-4">
    27                    Esto es una tercera sección.
    28                </div>
    29            </div>
    30        </div>
    31        <br/>
    32        <div class="container">
    33            <div class="row">
    34                <div class="col-3">
    35                    Esto es una sección.
    36                </div>
    37                <div class="col-6">
    38                    Esto es otra sección.
    39                </div>
    40                <div class="col-3">
    41                    Esto es una tercera sección.
    42                </div>
    43            </div>
    44        </div>
    45    </body>
    46</html>

    Columnas

  • Para mejorar la capacidad de respuesta en dispositivos móviles, Bootstrap también nos permite especificar tamaños de columna que varían según el tamaño de la pantalla. En el siguiente ejemplo, utilizamos'col-lg-3'para indicar que un elemento debería ocupar 3 columnas en una pantalla grande, y'col-sm-6'para indicar que un elemento debería ocupar 6 columnas cuando la pantalla es pequeña:
    • html
    1<!DOCTYPE html>
    2<html lang="en">
    3    <head>
    4        <title>My Web Page!</title>
    5        <link rel="stylesheet" 
    6        href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
    7        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
    8        crossorigin="anonymous">
    9        <style>
    10            .row > div {
    11                padding: 20px;
    12                background-color: teal;
    13                border: 2px solid black;
    14            }
    15        </style>
    16    </head>
    17    <body>
    18        <div class="container">
    19            <div class="row">
    20                <div class="col-lg-3 col-sm-6">
    21                    This is a section.
    22                </div>
    23                <div class="col-lg-3 col-sm-6">
    24                    This is another section.
    25                </div>
    26                <div class="col-lg-3 col-sm-6">
    27                    This is a third section.
    28                </div>
    29                <div class="col-lg-3 col-sm-6">
    30                    This is a fourth section.
    31                </div>
    32            </div>
    33        </div>
    34    </body>
    35</html>

    Sass (Hojas de Estilo Sintácticamente Asombrosas)

    • Hasta ahora, hemos encontrado varias formas de eliminar la redundancia en CSS, como moverlo a archivos separados o usar Bootstrap, pero aún hay muchas áreas donde podemos hacer mejoras. Por ejemplo, ¿qué pasa si queremos que varios elementos tengan estilos diferentes, pero que todos tengan el mismo color? Si decidimos más tarde que queremos cambiar el color, tendríamos que hacerlo en varios elementos diferentes.
    • Sasses un lenguaje que nos permite escribir CSS de manera más eficiente de varias maneras, una de las cuales es permitiéndonos utilizar variables, como se muestra en el siguiente ejemplo.
    • Cuando escribimos en Sass, creamos un nuevo archivo con la extensiónvariables.scss. En este archivo, podemos crear una nueva variable agregando un signo de dólar("$")antes de un nombre, seguido de dos puntos y luego un valor. Por ejemplo, escribiríamos$color: red;para establecer la variable color en el valor rojo. Luego, accedemos a esa variable usando$color. Aquí tienes un ejemplo de nuestro archivo variables.scss:
    css
    1$color: red;
    2

    3ul {
    4    font-size: 14px;
    5    color: $color;
    6}
    7

    8ol {
    9    font-size: 18px;
    10    color: $color;
    11}
    • Para vincular este estilo a nuestro archivo HTML, no podemos simplemente enlazar el archivo.scss, ya que la mayoría de los navegadores web solo reconocen archivos.css. Para resolver este problema, debemosdescargar el programa llamado Sassen nuestras computadoras. Luego, en la terminal, escribimossass variables.scss:variables.css. Este comando compilará un archivo".scss" llamado variables.scss en un archivo".css" llamadovariables.css, al cual puedes agregar un enlace en tu página HTML.
    • Mientras usamos Sass, también podemos anidar físicamente nuestro estilo en lugar de usar los selectores CSS de los que hablamos anteriormente. Por ejemplo, si deseamos aplicar un estilo solo a los párrafos y listas desordenadas dentro de un div, podemos escribir lo siguiente:
    css
    1div {
    2  font-size: 18px;
    3            
    4  p {
    5      color: blue;
    6  }
    7            
    8  ul {
    9      color: green;
    10  }

    Una vez compilado en CSS, obtendríamos un archivo que se vería así:

    css
    1div {
    2    font-size: 18px;
    3}
    4

    5div p {
    6    color: blue;
    7}
    8

    9div ul {
    10    color: green;
    11}
  • Otra característica que Sass nos brinda se conoce comoherencia. Esto nos permite crear un conjunto básico de estilos que pueden ser compartidos por varios elementos diferentes. Lo hacemos agregando un '%' antes del nombre de una clase, agregando algunos estilos y luego, más adelante, agregando la línea@extend %nombre-de-claseal principio de algunos estilos. Por ejemplo, el siguiente código aplica los estilos dentro de la clase"message" a cada una de las clases diferentes a continuación, lo que resulta en una página web que se ve de la siguiente manera:
    • css
    1%message {
    2    font-family: sans-serif;
    3    font-size: 18px;
    4    font-weight: bold;
    5    border: 1px solid black;
    6    padding: 20px;
    7    margin: 20px;
    8}
    9

    10.success {
    11    @extend %message;
    12    background-color: green;
    13}
    14

    15.warning {
    16    @extend %message;
    17    background-color: orange;
    18}
    19

    20.error {
    21    @extend %message;
    22    background-color: red;
    23}
    Ejemplo CSS, url de la imagen: /images/inherit.png

    ¡Eso concluye nuestro contenido por hoy! ツ

    Compartir

    Todos los nombres de productos, logos y marcas son propiedad de sus respectivos creadores.