Capítulo 3: Hojas de estilo en

cascada CSS
IES ARCIPRESTE DE HITA
Curso 2023/2024
Módulo: AW– 1SMR
Profesora: Vanesa Martínez
Primeros pasos en CSS
 CSS (Cascading Style Sheets - en español Hojas de Estilo en
Cascadas) es usado para darle estilo y diseño a las
páginas Web — por ejemplo, para cambiar la fuente de
letra, color, tamaño y el espaciado de tu contenido;
dividir en múltiples columnas, o agregar
animaciones y otras propiedades decorativas.

 El CSS se puede usar para estilos de texto muy básicos como,

por ejemplo, cambiar el color y el tamaño de
los encabezados y los enlaces. Se puede utilizar para crear
un diseño, como podría ser convertir una columna de texto
en una composición con un área de contenido principal y
una barra lateral para información relacionada. Incluso
se puede usar para crear efectos de animación.
 Sintaxis de CSS
• El CSS es un lenguaje basado en reglas: cada usuario define las reglas que
especifican los grupos de estilos que van a aplicarse a elementos
particulares o grupos de elementos de la página web.
• Por ejemplo: «Quiero que el encabezado principal de mi página se muestre
en letras grandes de color rojo».
• El código siguiente muestra una regla CSS muy simple que proporcionaría
el estilo descrito en el párrafo anterior:
• La regla se abre con un selector. Este selecciona el elemento HTML que
vamos a diseñar. En este caso, diseñaremos encabezados de nivel uno
<h1>
• Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más
declaraciones, que tomarán la forma de pares de propiedad y valor.
• Cada par especifica cada una de las propiedades de los elementos
seleccionados y el valor que queremos dar a esa propiedad. Antes de
los dos puntos, tenemos la propiedad; y después, el valor.
• Las propiedades CSS admiten diferentes valores, dependiendo de qué
propiedad se esté especificando. En el ejemplo anterior, tenemos
la propiedad color, que puede tomar varios valores de color.
También tenemos la propiedad de font-size, que puede tomar
varias unidades de tamaño como valor.
• Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una
tras otra.
Módulos CSS
 Como hay tantas cosas que se podrían diseñar usando CSS, el
lenguaje se divide en módulos.
 Muchas de las páginas de documentación están organizadas
en torno a un módulo en particular.
 Por ejemplo:
• Fondos y bordes
• Dimensionar elementos en CSS
• Imágenes, medios y elementos de formulario
• Tablas
• Fundamentos de texto y fuentes tipográficas
• Aplicación de estilo a listas
• Dar estilo a los enlaces
Agregar CSS a un documento
Lo primero que se debe hacer es decirle al documento HTML que hay
algunas reglas CSS que queremos que use. Hay tres formas diferentes de
aplicar CSS a un documento HTML:
 Vincular un archivo externo CSS desde el encabezado del documento.

 Estilo en línea - Atributo style

 Estilo interno - Elemento "style“: En este caso, se usa el elemento "style"

dentro del "head"
Anatomía de una regla CSS
Anatomía de una regla CSS
• Selector: El elemento HTML en el que comienza la regla. Esta
selecciona el(los) elemento(s) a dar estilo (en este caso, los
elementos
<p> ). Para dar estilo a un elemento diferente, solo cambia el selector.

• Declaración: Una sola regla como color: red; especifica a cuál de las
propiedades del elemento quieres dar estilo y qué estilo.

• Propiedades: Maneras en las cuales puedes dar estilo a un elemento

HTML. (En este caso, color es una propiedad del elemento <p> ).
En CSS, seleccionas qué propiedad quieres afectar en tu regla.

• Valor de la propiedad: A la derecha de la propiedad, después de los

dos puntos, tienes el valor de la propiedad, para elegir una de
las muchas posibles apariencias para una propiedad
determinada (hay muchos valores para color además de red).
Nota las otras partes importantes de la sintaxis:
• Cada una de las reglas deben estar encapsuladas entre llaves ({}).
• Dentro de cada declaración, debes usar los dos puntos (:) para separar
la propiedad de su valor.
• Dentro de cada regla, debes usar el punto y coma (;) para separar una
declaración de la siguiente.
De este modo para modificar varios valores de propiedad a la vez, solo necesitas
escribirlos separados por punto y coma (;), así:
 Selectores CSS
En CSS los selectores se utilizan para delimitar los elementos HTML de nuestra
página web a los que queremos aplicar estilo.
Nombre del selector
Selector de elemento
Selector de identificación (ID)
Selector de clase
Selector de atributo
Selector de pseudoclase o de
estado
Qué selecciona Ejemplo
Todos los elementos HTML del p
tipo especificado. Selecciona <p>
El elemento en la página con el ID
especificado (en una página #mi-id
HTML dada, solo se permite un
único elemento por ID). Selecciona <p id="mi-id">
Los elementos en la página con la
clase especificada (una clase .mi-clase
puede aparecer varias veces en
una página). Selecciona <p class="mi-clase">
a[title] { }
Los elementos en una página con Selecciona el atributo title del
el atributo especificado. elemento a
Los elementos especificados,
pero solo cuando esté en el a:hover
estado especificado, por ejemplo Selecciona <a>, pero solo cuando
cuando el puntero esté sobre él. el puntero esté sobre el enlace.
Selector de pseudoclase o de estado
Genera un documento html con la explicación y un ejemplo de cada uno de los estados
siguientes (puedes consultar la siguiente documentación:
https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectors/
Pseudo-classes_and_pseudo-elements

 :active  :invalid
 :checked  :last-child
 :default  :link
 :disabled  :not()
 :empty  :nth-child()
 :enabled  :optional
 :first-child  :out-of-range
 :focus  :required
 :hover  :valid
 :in-range  :visited
 Estados
https://developer.mozilla.org/es/docs/Web/CSS/@media/hover

Cuando pasa el ratón

Combinación de Selectores CSS
Puedes seleccionar varios elementos y aplicar una sola regla a
todos ellos. Incluye varios selectores separados por comas (,).
Por ejemplo:
 Otras combinaciones de Selectores CSS
Un selector que enumera el selector de elementos HTML junto con la clase
determina qué elemento puede contener esa clase (Ej.: solo se puede usar la
clase special con los elementos li):

Un selector que anida elementos simplemente toma la forma de un espacio

entre otros dos selectores. Significa que se aplica a un elemento que este
dentro de otro. (Ej.: Para seleccionar un <em> que esté dentro de un elemento
<li>):
 Módulo de fuentes y estilos tipográficos
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the
_web/CSS_basics

Fundamentosdetextoyfuentestipográficas-Aprendesobre desarrollo web

| MDN (mozilla.org)

Font-family
Font-style
Font-weigth
Font-size
Color
Text-shadow
Text-align
list-style-type
List-style-image
Módulo de fondos y bordes
https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds
_and_borders

Background-color
Background-image
Background-repeat
Background-size
background-attachment
Flex CSS. Introducción

En CSS, inicialmente se utilizaba el posicionamiento (static, relative,

absolute...), los elementos en línea o en bloque (y derivados) o la
propiedad float para realizar maquetaciones, lo que a grandes rasgos
no dejaba de ser un sistema de creación de diseños bastante tosco que
no encajaba con los retos que tenemos en la actualidad: sistemas de
escritorio, dispositivos móviles, múltiples resoluciones, etc...

Flex (también llamado flexbox) es un sistema de elementos flexibles

que llega con la idea de olvidar estos mecanismos y acostumbrarnos a
una mecánica más potente, limpia y personalizable, en la que los
elementos HTML se adaptan y colocan automáticamente y es más fácil
personalizar los diseños de una página web.
Background
Background-image
Background-color
Background-repeat
Background-attachment
background-size:
https://developer.mozill
a.org/es/docs/Web/CSS
/background-
size

https://www.w3schools.
com/css/css_backgroun
d.asp

Bordes
Border style:
https://www.w3scho
ols.com/css/css_bor
Flex CSS. Conceptos
Para empezar a utilizar flex lo primero que debemos hacer es conocer
algunos de los elementos básicos de este nuevo esquema, que son los
siguientes:
 Flex CSS. Conceptos
• Contenedor: Es el elemento padre que tendrá en su interior cada uno
de los ítems flexibles. Observa que al contrario que muchas otras
estructuras CSS, por norma general, en Flex establecemos las
propiedades al elemento padre.
• Eje principal: Los contenedores flexibles tendrán una
orientación principal específica. Por defecto, el eje
principal del contenedor flex es en horizontal (en fila).
• Eje secundario o cruzado: De la misma forma, los contenedores
flexibles tendrán una orientación secundaria,
perpendicular a la principal. Si la principal es en
horizontal, la secundaria será en vertical (y viceversa).
• Ítem: Cada uno de los hijos que tendrá el contenedor en su interior.
Flex CSS. Modalidades
• Una vez tenemos claro esto, imaginemos el siguiente
escenario:

Para activar el modo flex, utilizaremos sobre el elemento contenedor

la propiedad display, y especificaremos el valor flex o inline-flex
Flex CSS. Dirección de los ejes
• Existen dos propiedades principales para manipular la dirección y
comportamiento de los ítems a lo largo del eje principal del contenedor. Son
las que veremos a continuación:

Mediante la propiedad flex-direction podemos modificar la dirección

del eje principal del contenedor para que se oriente en horizontal
(valor por defecto) o en vertical. Además, también podemos incluir el
sufijo -reverse para indicar que coloque los ítems en orden inverso.
Flex CSS. Dirección de los ejes
Estos serían los valores que puede tomar flex-direction:
Flex CSS. Dirección de los ejes
Esto nos permite tener un control muy alto sobre el orden de los
elementos en una página. Veamos la aplicación de estas propiedades
sobre el ejemplo anterior, para modificar el flujo del eje principal del
contenedor:
Flex CSS. Contenedor flex multilínea
En general, flex se suele utilizar para estructuras de una sola dimensión, es
decir, contenedores que sólo van en una dirección. Sin embargo, existe una
propiedad denominada flex-wrap con la que podemos especificar un
comportamiento especial del contenedor.

Por defecto, si un elemento no cabe dentro de nuestro contenedor flex, los

elementos se harán más pequeños (son flexibles) para ajustarlos al
contenedor. Sin embargo, con la propiedad flex-wrap podemos cambiar
este comportamiento y permitir que nuestro contenedor flex se desborde,
convirtiéndose en un contenedor flex multilínea.
Flex CSS. Contenedor flex multilínea
Los valores que puede tomar esta propiedad, son las siguientes:
Flex CSS. Atajo: Dirección de los ejes
Existe una propiedad de atajo llamada flex-flow, con la que podemos
resumir los valores de las propiedades flex-direction y flex-wrap,
especificándolas en una sola propiedad y ahorrándonos utilizar las
propiedades concretas:
Flex CSS. Huecos (gaps)
Existen dos propiedades de flexbox que permiten establecer el tamaño de un
«hueco» entre ítems desde el elemento padre contenedor, y que eliminan la
necesidad de estar utilizando padding o margin en los elementos hijos:

Si la propiedad flex-direction está establecida en column, podrás utilizar row-gap, y

en el caso de que la propiedad flex-direction se encuentre en row, podrás utilizar el
column-gap.

Eso sí, es posible usar ambas si tenemos la propiedad flex-wrap definida a wrap y,
por lo tanto, disponemos de multicolumnas flexbox.
Flex CSS. Atajo: Huecos (gaps)
En Flex CSS existe una propiedad de atajo para los huecos, denominada gap.
Con esta propiedad podemos indicar de una sola vez valores para las
propiedades row-gap y column-gap, de forma que escribimos menos y es más
cómodo en ciertas situaciones:
Flex CSS. Atajo: Huecos (gaps)
A continuación, podemos ver un ejemplo de su utilización en este fragmento
de código:

https://www.youtube.com/watch?v=esjagdcozX0&t=190s
Propiedades de alineación
Cuestiones habituales en el mundo de CSS suelen ser «Cómo centrar con Flex», «cómo
alinear verticalmente» o «cómo alinear horizontalmente».
Vamos a ver las propiedades de alineación de elementos para saber como distribuir los
elementos de un contenedor Flex.

principal 1️⃣ (recordemos que por defecto es el horizontal), mientras que otras actúan
Vamos a echar un vistazo a las siguientes propiedades, donde algunas actúan en el eje

en el eje secundario 2️⃣(por defecto, el eje vertical):

La última propiedad solo tiene efecto si tenemos un contenedor flex multilinea.

Propiedades de alineación

Pequeño resumen:
• justify-content: Se utiliza para alinear los ítems del eje principal (por defecto, el
horizontal).
• align-items: Usada para alinear los ítems del eje secundario (por defecto, el
vertical).
• align-content: Se utiliza para alinear el contenido del eje secundario entre
líneas (sólo en contenedor multilinea).
La propiedad justify-content
La primera propiedad, justify-content, sirve para colocar los ítems de un contenedor
mediante una disposición concreta a lo largo del eje principal (por defecto, en
horizontal). Los valores que puede tomar esta propiedad son los siguientes:
La propiedad justify-content
La propiedad justify-content
Ejercicio: ¿Qué valor tiene esta propiedad?
 La propiedad align-items
Se encarga de alinear los ítems en el eje secundario del contenedor.
Actúa sobre la única línea que tiene un contenedor flex sin wrap.
Los valores que puede tomar align-items son los siguientes:
La propiedad align-items
La propiedad align-items
La propiedad align-items
Ejercicio: ¿Qué valor tiene esta propiedad?
Ejercicio: ¿Qué valor tienen estas propiedades?
 Alineación multilínea
La propiedad align-content
Nos servirá cuando estemos tratando con un contenedor flex multilinea creado
mediante flex-wrap.
servirá para alinear cada una de las líneas del contenedor multilinea. Los valores
que puede tomar la propiedad align-content son los siguientes:
 Alineación multilínea
La propiedad align-content
 Alineación multilínea
La propiedad align-content
 Alineación multilínea
La propiedad align-content
 La propiedad align-self
Actúa exactamente igual que align-items, sin embargo es la primera
propiedad de flex que vemos que se utiliza sobre un ítem hijo específico
y no sobre el elemento padre contenedor. En caso de no existir, el valor
por defecto será stretch.

Gracias a ese detalle, align-self nos permite cambiar

comportamiento de align-items el y
sobreescribirlo
comportamientos específicos para ítems concretos con
que no queremos
que se comporten igual que el resto.
La propiedad align-self
La propiedad align-self
 Propiedades de flexibilidad
Como su propio nombre indica, una de las características más interesantes de flex
es la flexibilidad de sus elementos. Existen una serie de propiedades muy
interesantes para dotar de interacción y flexibilidad a los elementos que forman
parte de un contenedor flex.
 La propiedad flex-basis
Define el tamaño base por defecto (ancho para row y alto para colum) que tendrán
los ítems antes de aplicarle una cierta distribución de espacio. Se suele aplicar un
tamaño específico (unidades, porcentajes, etc...), pero también se puede aplicar la
palabra clave content que ajusta automáticamente el tamaño al contenido del
elemento. Este es el valor por defecto de la propiedad.
 La propiedad flex-grow
La propiedad flex-grow actúa en situaciones donde:
• Hay un flex-basis definido.
• Los ítems cubren el tamaño total del contenedor flex padre.
En esas situaciones, la propiedad flex-grow indica el factor de crecimiento de los
ítems en el caso de que no tengan un ancho o alto específico.

Por omisión, todos los elementos tienen un flew-grow: 0 definido, de modo

que el elemento tendrá el tamaño definido por la propiedad flex-basis.
Sin embargo, si colocamos un flex-grow: 1 al primer hijo (ejemplo anterior),
este crecerá hasta que la suma de los hijos ocupen el 100% del contenedor,
mientras que el resto de hijos tendrá el tamaño base definido por flex-basis.
 La propiedad flex-grow
En este caso, el primer elemento tiene un factor de crecimiento de 1, mientras el
segundo elemento tiene un factor de crecimiento de 2, el resto de elementos
tendrán un factor de crecimiento de 0, o sea, no crecen.
Así pues, tendremos que el elemento número 3 tiene un tamaño igual al flex-basis,
mientras que el elemento número 1 crece un poco más y el elemento número 2
crece un poco más que el número 1.

Recuerda que actúa siempre y cuando la suma del espacio de los elementos
hijos no superen el 100% del contenedor padre.
 La propiedad flex-shrink
Aplica un factor de decrecimiento cuando se reduce el contenedor.
La propiedad flex-shrink actúa en situaciones donde:
• Hay un flex-basis definido.
• Los ítems no cubren el tamaño total del contenedor flex padre.
Atajo: La propiedad flex
 Atajo: La propiedad flex
Por defecto, el valor por omisión de esta propiedad es 0 1 auto.
 Elementos flex animados
La propiedad transition sirve para preparar una animación cada vez que hagamos el
:hover y movamos el ratón sobre un elemento que cambia sus valores de flexibilidad
mediante flex y su color de fondo mediante background.