Vídeo de Ricardo López Arriaga Bueno Clase 4 CSS3.@rickylobu en YouTube

CSS 3 Cascading Style Sheets

Escrito por: Ricardo López Arriaga Bueno

CSS (Cascading Style Sheets, en español Hojas de Estilo en Cascada) es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en HTML o XML. MDN Web Docs

CSS fue desarrollado por el W3C en 1996 para separar la presentación del contenido, permitiendo a los desarrolladores web definir el estilo de los elementos HTML de manera más eficiente. CSS permite controlar el diseño de múltiples páginas web a la vez, facilitando la consistencia y el mantenimiento del diseño. Historia y fundamentos de la Web

CSS permite separar el contenido de un documento HTML de su presentación (colores, fuentes, formas, etc.), facilitando la accesibilidad, la flexibilidad y el control del formato. Las especificaciones de CSS son desarrolladas por el W3C. CSS permite aplicar múltiples hojas de estilo a un documento y establece un esquema de prioridad para determinar qué reglas se aplican en caso de conflicto. (Gutiérrez, 2014)

Anatomía de una declaración CSS

La estructura básica de CSS se compone de selectores y declaraciones. Un selector apunta al elemento HTML que deseas estilizar, y una declaración contiene una propiedad y un valor separados por dos puntos.

Estructura de CSS: selectores y declaraciones
Imágen de la anatomía de una declaración CSS de Platzi

Estructura de CSS:

  • Selector: Indica el elemento HTML al que se aplicará el estilo. Por ejemplo, p { } selecciona todos los párrafos.
  • Declaración: Consiste en una propiedad y un valor. Por ejemplo, color: blue; es una declaración que establece el color del texto a azul.
  • Propiedad: Especifica el aspecto del elemento que deseas cambiar. Ejemplos incluyen color, font-size, y margin.
  • Valor: Define el valor de la propiedad. Por ejemplo, en color: blue;, blue es el valor.

Añadir CSS a HTML

Existen tres formas de añadir CSS a un documento HTML: utilizando el atributo style en línea dentro de la etiqueta HTML: <span style="color: red;">, la segunda forma es con la etiqueta <style> en el encabezado del documento, o la tercera, siendo la convención y la forma más común: vinculando un archivo CSS externo con la etiqueta <link rel="stylesheet">.

  • Con el atributo style:

    Este método se utiliza para aplicar estilos directamente a un elemento HTML específico.

    <p style="color: white; font-size: 14px;"> es un párrafo estilizado en línea.</p>
  • Con la etiqueta <style>:

    Este método se utiliza para definir estilos en el encabezado del documento HTML, aplicándolos a múltiples elementos.

    
        <head>
            <style>
                p {
                    color: blue;
                    font-size: 14px;
                }
            </style>
        </head>
  • Con un archivo CSS externo:

    Este método se utiliza para mantener los estilos en un archivo separado, lo que facilita el mantenimiento y la reutilización de estilos en múltiples páginas.

    
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>

    Crea y nombra un nuevo archivo con extención .css 

    
    /*   En el documento styles.css  */
    /* Esto es un comentario en un documento.css*/
    /* Puedes ver más comentarios educativos 
        inspeccionando esta página con F12 */
        
    p {
        color: blue;
        font-size: 14px;
    }

Selectores por etiqueta, id y class

Se Pueden añadir estilos a los elementos HTML por su nombre de etiqueta, por el atributo id único del elemento y a multiples elementos mediante el atributo class

Métodos para Agregar CSS
Método de Agregar CSS Descripción Sintaxis en HTML Selector en CSS
Nombre de Etiqueta Aplica estilos a todos los elementos de un tipo específico. <p>Este es un párrafo.</p> p { color: blue; }
Atributo ID Aplica estilos a un elemento específico con un ID único. <p id="parrafo1">Este es un párrafo.</p> #parrafo1 { color: green; }
Atributo Class Aplica estilos a uno o más elementos que comparten una clase. <p class="texto-destacado">Este es un párrafo.</p> .texto-destacado { color: red; }

De tarea te recomiendo profundizar y practicar en:

Combinadores y Separadores en CSS

Combinador/Separador Descripción Ejemplo Enlace a MDN
+ (Next-sibling combinator) Selecciona el elemento que es el siguiente hermano inmediato del primer elemento. h1 + p MDN
> (Child combinator) Selecciona los elementos que son hijos directos del primer elemento. div > p MDN
|| (Column combinator) Selecciona celdas en una tabla que están en la misma columna que un elemento especificado. col || td MDN
~ (Subsequent sibling combinator) Selecciona todos los elementos que son hermanos del primer elemento. h1 ~ p MDN
" " (Descendant combinator) Selecciona todos los elementos que son descendientes del primer elemento. div p MDN
| (Namespace separator) Selecciona elementos en un espacio de nombres específico. ns|element MDN

Modelo de caja en CSS: Box-model

Modelo de caja en CSS
Imágen del modelo de caja del inglés Box-model de fedmentor
╭☞( ͡ ͡° ͜ ʖ ͡͡°)╭☞ ¿Quieres un buen consejo?

Se recomienda presionar F12 para inspeccionar esta página en tu navegador. También puedes hacer tus experimentos en Playground al final de esta página web así como ver y modificar este archivo .html y .css en:

Playground de MDN Docs Web

El modelo de caja en CSS describe cómo se colocan y dimensionan los elementos en una página web. Cada elemento se representa como una caja rectangular, que consta de los siguientes componentes:

  • Contenido: El área donde se muestra el contenido del elemento (texto, imágenes, etc.).
  • Padding: El espacio entre el contenido y el borde del elemento. Se puede ajustar con la propiedad padding.
  • Borde: El contorno del elemento. Se puede ajustar con la propiedad border.
  • Margen: El espacio exterior alrededor del borde del elemento. Se puede ajustar con la propiedad margin.

Ejemplo de caja
Con F12 me puedes ver mejor

En el ejemplo anterior, la caja tiene un contenido de 200px de ancho y 100px de alto, un padding de 10px, un borde de 5px y un margen de 15px.

Prioridad y especificidad

La cascada es el mecanismo que determina cómo se aplican los estilos cuando hay múltiples reglas que afectan a un mismo elemento.

La especificidad es un cálculo que determina qué reglas CSS se aplican a un elemento cuando hay múltiples reglas que podrían aplicarse. La especificidad se calcula en función de los selectores utilizados:

  1. Selectores de ID: Tienen la mayor especificidad.
  2. Selectores de clase, atributos y pseudoclases: Tienen una especificidad media.
  3. Selectores de tipo (etiqueta) y pseudoelementos: Tienen la menor especificidad.

Ejemplo de uso de especificidad

Imagina que tienes los siguientes tres parrafos HTML5 en tu documento index.html:

  1. <p id="parrafo1" class="texto-destacado importante">Este es un párrafo con id y class.</p>

  2. <p class="texto-destacado">Este es otro párrafo sólo con class.</p>

  3. <p>Este es un tercer párrafo con la etiqueta p sola sin atributo.</p>

Si le agregas los siguientes estílos CSS3 a tu documento styles.css:


    p { 
        color: black; /* Especificidad: 1 */
    }
    .texto-destacado { 
        color: green; /* Especificidad: 10 */ 
    } #parrafo1 {
        color: red; /* Especificidad: 100 */ 
    } .importante { 
        color: purple !important; /* Sobrescribe cualquier otra regla */ 
    }

El resultado renderizado sería el siguiente:

  1. Este es un párrafo con id y class.

  2. Este es otro párrafo sólo con class.

  3. Este es un tercer párrafo con la etiqueta <p> sola sin atributo.

Diseño y Posicionamiento

Propiedades Comunes

  • Color de texto: color: red; /* #ffffff, rgb(xxx,xxx,xxx), rgba(x,x,x,x) */
  • Tamaño de fuente: font-size: 20px; /* Ajusta el tamaño del texto */
  • Alineación: text-align: center; /* Alineación horizontal del texto */
  • Márgenes: margin: 10px; /* Espacio exterior alrededor del elemento */
  • Relleno: padding: 15px; /* Espacio interior dentro del borde */
  • Borde: border: 2px solid black; /* Define el borde del elemento */

Conceptos de Display

  • Block: display: block; /* Componente se comporta como caja */
  • Inline: display: inline; /* Elemento no rompe la línea */
  • Inline-block: display: inline-block; /* Inline con dimensiones ajustables */
  • Flex: display: flex; /* Layout flexible */
  • Grid: display: grid; /* Diseño en filas y columnas */

Propiedad Position

  • Static: position: static; /* Posición predeterminada */
  • Relative: position: relative; top: 10px; /* Posición relativa a su posición original */
  • Absolute: position: absolute; left: 20px; /* Relativo a su contenedor posicionado */
  • Fixed: position: fixed; bottom: 0; /* Fijo respecto a la ventana */
  • Sticky: position: sticky; top: 0; /* Pegajoso según el scroll */

Uso de Float y Clearfix

Técnicas clásicas para posicionamiento.

Flotante1
Flotante2
Contenido normal
junto a un elemento flotante

Por favor nota la diferencia entre las dos siguinetes oraciones:

Esto es un 
contenido flotado 
mediante la etiquta  
float: left;
Esto es un 
contenido flotado 
pero <div class="clearfix"> corta el
float: left; con float:none; clear:both;

Transform: translate

Centrar elementos usando transform: translate.

Centrado

CSS de Caja Centrada con transform: translate:


/* Ejemplo de transform */
.pre-largo {
    width: 50%;
    height: 300px;
    float: left;
}

#example-transform {
    display: flex;
    width: 49%;
    height: 370px;
    float: left;
    border: #2965F1 solid 1px;
    border-radius: 25px;
}

.centrado {
    position: relative;
    width: fit-content;
    height: fit-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2965F1;
    padding: 10px;
    border: 2px solid #6A9955;
    box-shadow: #6A9955 2px 3px;
}

Uso de z-index y Transform

Controla la superposición de elementos.

CSS de figuras:


/* Ejemplo de z-index con FIGURAS */
#ejemplo_z-index {
display: block;
width: 49%;
height: 370px;
float: left;
border: 1px solid #2965F1;
border-radius: 25px;
position: relative;
}

.cuadrado {
position: absolute;
width: 100px;
height: 100px;
background: red;
z-index: 1;
left: 35%;
top: 30%
}

.circulo {
position: absolute;
width: 100px;
height: 100px;
background: blue;
border-radius: 50%;
z-index: 2;
left: 45%;
top: 40%
}

.triangulo {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
z-index: 3;
left: 50%;
top: 50%
}

.pre-largo {
width: 50%;
height: 300px;
float: left;
}
╭☞( ͡ ͡° ͜ ʖ ͡͡°)╭☞ ¿Quieres ver la etiqueta <marquee>? Esto es un <marquee behavior="scroll"> Los valores posibles en behavior son scroll, slide, y alternate. Esto es un <marquee behavior="slide"> Los valores posibles en behavior son scroll, slide, y alternate. Esto es un <marquee behavior="alternate"> Los valores posibles en behavior son scroll, slide, y alternate.

Lo que dice es: Esto es un <marquee behavior="x"> Los valores posibles en behavior son scroll, slide, y alternate.
Tristemente esta en proceso de eliminación y no se recomienda su uso.

Transiciones y animaciones

¿Sabes quién es el de la foto?

╭☞( ͡ ͡° ͜ ʖ ͡͡°)╭☞ Coloca el Mouse sobre la imágen

imagen

CSS de figuras:


/*  Transiciones y Animaciones*/
#example-animation {
    display: block;
    width: 50%;
    align-items: center;
    justify-content: center;
    float: left;
}

.animated-background {
    width: 100%;
    height: 100%;
    background: linear-gradient(200deg, #e4d833, #044dd6, #cf2dc7, #3dc713);
    background-size: 800% 800%;
    animation: GradientAnimation 10s ease infinite;
}

@keyframes GradientAnimation {
    0% {
        background-position: 0% 50%;
        background-position-y: bottom;
    }

    50% {
        background-position: 100% 50%;
        background-position-y: top;
        background-size: 100% 100%;
    }

    100% {
        background-position: 0% 50%;
        background-position-y: bottom;
    }
}

#img-alan {
    background: linear-gradient(200deg, #e4d833, #044dd6, #cf2dc7, #3dc713);
    transition: 3s;
    border-radius: 10px;
    width: 35%;
    transform: translate(50%, 0%);
}

#img-alan:hover {
    background: linear-gradient(200deg, #e4d833, #044dd6, #cf2dc7, #3dc713);
    background-size: 800% 800%;
    animation: GradientAnimation 10s ease-in-out infinite;
    border-radius: 99%;
    transform: translate(50%, 0%);
    scale: 115%;
}

Pseudoclases en CSS

Pseudoclase Descripción Ejemplo Enlace a MDN
:hover Aplica estilos cuando el usuario coloca el cursor sobre un elemento. a:hover { color: red; } MDN
:active Aplica estilos cuando un elemento está siendo activado por el usuario. a:active { color: blue; } MDN
:focus Aplica estilos cuando un elemento ha recibido el foco. input:focus { border-color: green; } MDN
:nth-child(n) Aplica estilos a un elemento que es el enésimo hijo de su padre. li:nth-child(2) { background-color: yellow; } MDN
:first-child Aplica estilos al primer hijo de su padre. p:first-child { font-weight: bold; } MDN
:last-child Aplica estilos al último hijo de su padre. p:last-child { font-style: italic; } MDN
:checked Aplica estilos a los elementos de formulario que están seleccionados. input:checked { background-color: blue; } MDN
:disabled Aplica estilos a los elementos de formulario que están deshabilitados. input:disabled { background-color: gray; } MDN
:enabled Aplica estilos a los elementos de formulario que están habilitados. input:enabled { background-color: white; } MDN
:visited Aplica estilos a los enlaces que han sido visitados. a:visited { color: purple; } MDN

Pseudoelementos en CSS

Pseudoelemento Descripción Ejemplo Enlace a MDN
::before Inserta contenido antes del contenido de un elemento. p::before { content: "Nota: "; } MDN
::after Inserta contenido después del contenido de un elemento. p::after { content: " (fin)"; } MDN
::first-line Aplica estilos a la primera línea de un elemento de bloque. p::first-line { font-variant: small-caps; } MDN
::first-letter Aplica estilos a la primera letra de un elemento de bloque. p::first-letter { font-size: 2em; color: red; } MDN
::selection Aplica estilos a la parte de un documento que ha sido seleccionada por el usuario. ::selection { background: yellow; color: black; } MDN
::placeholder Aplica estilos al texto de marcador de posición de un campo de entrada. input::placeholder { color: gray; } MDN

Responsive Design

¿Qué es el Diseño Responsive?

El diseño responsive permite que los sitios web se adapten automáticamente al tamaño y orientación de cualquier dispositivo, proporcionando una experiencia de usuario óptima. Esto se logra utilizando consultas de medios (@media) en CSS para definir estilos específicos según las características del dispositivo, como su ancho de pantalla.

Medidas Estándar de Pantallas

  • Dispositivos móviles: Ancho menor o igual a 767px.
  • Tablets: Ancho entre 768px y 991px.
  • Escritorio estándar: Ancho entre 992px y 1199px.
  • Pantallas grandes: Ancho mayor o igual a 1200px.

Ejemplo de Consultas de Medios

A continuación, se muestran ejemplos de consultas de medios en CSS para diferentes tamaños de dispositivos. Puedes utilizarlas como base para construir tus propios estilos adaptativos: 

            
@media (max-width: 767px) {
    /* Estilos para móviles */
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Estilos para tablets */
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* Estilos para escritorio normal */
}

@media (min-width: 1200px) {
    /* Estilos para pantallas grandes */
}

Más información

Para profundizar en los fundamentos del diseño responsive, consulta esta guía completa sobre Bases de Responsive Design en Lenguaje CSS.

Profundizar en CSS: SASS, LESS, WordPress, Bootstrap y Material Design

LESS

LESS es un preprocesador CSS que amplía las capacidades del lenguaje, permitiendo el uso de variables, anidación de selectores, mixins, operaciones matemáticas y funciones. Su sintaxis simplificada permite escribir CSS de manera más eficiente y organizada. LESS se compila en CSS estándar para ser utilizado en el navegador o en proyectos web.

SASS

SASS (Syntactically Awesome Stylesheets) es otro preprocesador CSS ampliamente utilizado, conocido por su flexibilidad y características avanzadas. Ofrece dos sintaxis: SASS (independiente de llaves y puntos y coma) y SCSS (compatible con la sintaxis de CSS estándar). Permite el uso de variables, mixins, bucles, funciones y módulos, simplificando el mantenimiento y escalabilidad del código.

WordPress

WordPress es un sistema de gestión de contenidos (CMS) diseñado para crear sitios web y blogs. Se basa en PHP y MySQL, y cuenta con una enorme cantidad de temas y plugins que facilitan la personalización de diseño y funcionalidad. WordPress soporta el uso de CSS personalizado para modificar la apariencia de un sitio, además de permitir la integración con preprocesadores como SASS o LESS mediante plugins.

Bootstrap

Bootstrap es un framework CSS que simplifica la creación de sitios web responsivos y modernos. Incluye un sistema de rejillas, componentes predefinidos (como botones, tarjetas y modales) y utilidades CSS para personalización rápida. Su diseño "mobile-first" asegura que los sitios web se adapten de manera óptima a diferentes dispositivos y tamaños de pantalla.

Material Design

Material Design es un sistema de diseño desarrollado por Google que proporciona directrices visuales y de interacción para aplicaciones y sitios web. Se basa en principios como jerarquía visual, uso intencional del color, animaciones naturales y diseño responsivo. Material Design incluye componentes predefinidos y recursos para crear interfaces atractivas y consistentes.

¿Quieres codificar? Playground MDN, IDE online

También puedes modificar esta página web en: Playground de MDN Docs Web

Pero te recomiendo como IDE en linea la página web: stackblitz.com

Ir a Playground