Contenido del Curso

CSS Fundamentals

1. Introducción a CSS

¿Qué es CSS?Conectando HTML y CSS Selectores para Estilizar Elementos HTML Desafío: Agrega Tus Primeros Estilos Desafío: Agregar los estilos utilizando el nombre de la clase Clases Pseudo de Acción del Usuario Reto: Clases de Pseudo-Clases de Acción del Usuario Colores de Texto Trabajo Efectivo con CSS Desafío: Variables en CSS

2. Estilos de Texto

Estilo del Texto Formateo de Texto Desafío: Formato de Texto Añadir Tipografías Personalizadas a la Página Web Propiedades de la Fuente Desafío: Fuentes

3. Modelo de Caja y Espaciado de Elementos

Modelo de Caja Dimensionamiento de Caja Añadir Espacio a Elementos Desafío: Ajuste del Tamaño del Cuadro Clases Pseudo Estructurales y Funcionales Desafío: Pseudo-Clases Estructurales Tipos de Elementos Trabaja con Elementos de Nivel de Bloque Trabaja con Elementos en Línea Desafío: Predecir la Disposición de la Página

4. Flexbox

¿Qué es Flexbox?Dirección de Flexión Justificar Contenido Horizontalmente Alinear elementos verticalmente Propiedades de Ítem Flexible Desafío: Flexbox Desafío: Trabajar con Flexbox

5. Efectos Decorativos

Color de Fondo Imagen de fondo Trabajar con Imágenes Elementos Pseudo-Decorativos Sombras Desafío: Efectos Decorativos Pasos Adicionales

CSS Fundamentals

Desafío: Efectos Decorativos

Tarea

Practiquemos y mejoremos el atractivo visual de la página web. La tarea incluye:

Añadir una sombra al elemento div con el nombre de clase card. Los valores de sombra especificados son rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Añade una imagen de fondo al elemento div con el nombre de clase card. Se proporciona el enlace de la imagen: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centra la imagen de fondo dentro de la tarjeta.

index.html

index.css

index.js

Para añadir una sombra a un elemento, utilice la propiedad box-shadow con el valor especificado. En este caso, el valor es rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Para establecer una imagen como fondo mediante la propiedad background-image, utilice la sintaxis url("ruta correcta"). Dentro de los corchetes, abra las comillas y especifique la ruta a la imagen. En esta tarea, se proporciona la ruta correcta: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Para determinar la posición de la imagen de fondo, utilice la propiedad background-position. En este escenario, establezca el valor center para la propiedad.

index.html

index.css

index.js

¿Todo estuvo claro?

Sección 5. Capítulo 6

Contenido del Curso

CSS Fundamentals

1. Introducción a CSS

2. Estilos de Texto

Estilo del Texto Formateo de Texto Desafío: Formato de Texto Añadir Tipografías Personalizadas a la Página Web Propiedades de la Fuente Desafío: Fuentes

3. Modelo de Caja y Espaciado de Elementos

4. Flexbox

¿Qué es Flexbox?Dirección de Flexión Justificar Contenido Horizontalmente Alinear elementos verticalmente Propiedades de Ítem Flexible Desafío: Flexbox Desafío: Trabajar con Flexbox

5. Efectos Decorativos

Color de Fondo Imagen de fondo Trabajar con Imágenes Elementos Pseudo-Decorativos Sombras Desafío: Efectos Decorativos Pasos Adicionales

CSS Fundamentals

Desafío: Efectos Decorativos

Tarea

Practiquemos y mejoremos el atractivo visual de la página web. La tarea incluye:

Añadir una sombra al elemento div con el nombre de clase card. Los valores de sombra especificados son rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Añade una imagen de fondo al elemento div con el nombre de clase card. Se proporciona el enlace de la imagen: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centra la imagen de fondo dentro de la tarjeta.

index.html

index.css

index.js

Para añadir una sombra a un elemento, utilice la propiedad box-shadow con el valor especificado. En este caso, el valor es rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Para establecer una imagen como fondo mediante la propiedad background-image, utilice la sintaxis url("ruta correcta"). Dentro de los corchetes, abra las comillas y especifique la ruta a la imagen. En esta tarea, se proporciona la ruta correcta: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Para determinar la posición de la imagen de fondo, utilice la propiedad background-position. En este escenario, establezca el valor center para la propiedad.

index.html

index.css

index.js

¿Todo estuvo claro?

Sección 5. Capítulo 6