BOOTCAMP FULL STACK

DEVELOPER
EJERCICIOS CSS
 Colorea

Cambia el estilo de tu elemento h2 para que el texto de ese elemento sea de color
rojo.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 H2 Azules

Elimina el atributo de estilo de tu elemento h2 y crea un bloque style para agregar tu

código CSS. Añade el código CSS necesario para hacer que todos los elementos h2
sean de color azul (blue).

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Elemento con estilo

Dentro de tu elemento style, cambia el selector h2 a .red-text y actualiza el valor del

color de blue a red.

Asigna a tu elemento h2 el atributo class con un valor de red-text.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Clases

Las clases te permiten usar los mismos estilos CSS en múltiples elementos HTML.
Puedes ver esto aplicando tu clase de red-text al primer elemento p.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Familia de letras

Haz que todos tus elementos p usen la fuente monospace.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 GoogleFont

Importa la fuente Lobster a tu página web. Luego, usa un selector de elementos para
establecer Lobster como font-family en tu elemento h2.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Degradado de fuentes

Para comenzar, aplica la fuente monospace al elemento h2, para que ahora tenga dos
fuentes: Lobster y monospace.

En el último desafío, habías importado la fuente Lobster usando la etiqueta link.

Ahora comenta esa importación de la fuente Lobster de Google Fonts (usando los
comentarios HTML que aprendiste antes) para que ya no esté disponible. Verás que
todos tus elementos h2 degradan a la fuente monospace font.

Nota: Si tienes la fuente Lobster instalada en tu computadora, no verás la

degradación porque tu navegador puede encontrar la fuente en tu sistema.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Tamaño de imágenes

Crea una clase llamada smaller-image y úsala para redimensionar la imagen de modo
que solo tenga 100 píxeles de ancho.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Bordeando

Crea una clase llamada thick-green-border (borde grueso verde). Esta clase debería
añadir un borde verde de 10px, "solid", alrededor de un elemento HTML. Aplica esa
clase a tu foto de gato.

Recuerda que puedes aplicar múltiples clases a un elemento usando su atributo class,
separando cada nombre de clase con un espacio. Por ejemplo:

<img class="class1 class2">

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Redondeando los bordes

Puedes especificar un border-radius usando píxeles como unidad de medida. Dale a

tu foto de gato un border-radius de 10px.

Nota: Este desafío acepta múltiples soluciones posibles. Por ejemplo, puedes añadir
border-radius a la clase .thick-green-border o a la clase .smaller-image.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Imagen Redonda

Dale a tu foto de gato un border-radius de 50%.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Fondos con colores

Crea una clase llamada silver-background con un background-color silver (plateado).

Asigna esta clase a tu elemento div.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Identificando

Asigna a tu elemento form el id cat-photo-form.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Identificando

Intenta asignar a tu formulario, que ahora tiene el atributo id llamado cat-photo-form,

un fondo verde.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Rellenar

Cambia el padding de la caja azul para que coincida con el de la caja roja.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Márgenes

Cambia el margin de la caja azul para que coincida con el de la caja roja.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Margen Negativo

Intenta establecer el margin a un valor negativo como el de la caja roja.

Cambia el margin de la caja azul a -15px para que llene todo el ancho horizontal de la
caja amarilla que lo rodea.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Relleno a los costados

Asigna a la caja azul un padding de 40px en sus lados superior e izquierdo, pero sólo
de 20px en sus lados inferior y derecho.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Clockwise

Utiliza clockwise notation (notación en el sentido de las agujas del reloj) para asignar
al elemento con la clase .blue-box un padding de 40px en su lado superior e
izquierdo pero solo 20px en su lado inferior y derecho.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Más Clockwise

Usa clockwise notation (notación en el sentido de las agujas del reloj) para asignar al
elemento con la clase blue-box un margen de 40px en su lado superior e izquierdo
pero un margen de solo 20px en su lado inferior y derecho.
En el siguiente link podrás escribir tu código y verificar tu resultado: click
 Selectores de atributos

Usando el selector de atributos type, intenta asignar a las casillas de verificación de

CatPhoto App un margen superior (margin-top) de 10px y un margen inferior
(margin-bottom) de 15px.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Unidades Relativas y Absolutas

Añade una propiedad padding al elemento con clase red-box y establécelo en 1.5em.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Estilos a BODY

Para demostrar que el elemento body existe aquí, podemos asignarle un

background-color black (negro).

Para ello, agregamos la siguiente declaración a nuestro elemento style:

body {
background-color: black;
}

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Heredando!

Primero, crea un elemento h1 con el texto Hello World

Luego, demos el color green (verde) a todos los elementos de tu página, añadiendo
color: green; a tu declaración de estilo del elemento body.

Finalmente, da a tu elemento body un valor para font-family de monospace

añadiendo font-family: monospace; a la declaración de estilo del elemento body.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Prioriza estilos sobre otros

Crea una clase CSS adicional llamada pink-text que asigne a un elemento el color
rosado ("pink").

Asigna a tu elemento h1 la clase pink-text.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Sobrescribiendo estilos

Crea una clase CSS adicional llamada blue-text que asigne a un elemento el color azul ("blue").
Asegúrate de que esté debajo de tu declaración de pink-text.

Aplica la clase blue-text a tu elemento h1 además de tu clase pink-text, y veamos cuál de las dos
gana.

Para aplicar múltiples atributos de clase a un elemento HTML debes dejar un espacio entre ellos,
como se muestra a continuación:

class="class1 class2"
Nota: No importa el orden en que las clases estén enlistadas dentro del elemento HTML.

Sin embargo, lo importante es el orden de las declaraciones de class clases en la sección <style>. La
segunda declaración siempre tendrá prioridad sobre la primera. Debido a que .blue-text fue
declarado segundo, este sobreescribirá los atributos de .pink-text.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Sobrescribiendo estilos con ID

Dale al elemento h1 el atributo id de orange-text. Recuerda, los estilos id se ven así:

<h1 id="orange-text">
Deja las clases blue-text y pink-text en tu elemento h1.

Crea una declaración CSS para el id orange-text en el elemento style. Aquí hay un
ejemplo de cómo se debería ver:

#brown-text {
color: brown;
}
Nota: No importa si declaras este CSS arriba o debajo de la clase pink-text, ya que el
atributo id siempre tendrá precedencia.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Sobrescribiendo estilos con
Class

Usa un inline style para hacer que nuestro elemento h1 sea de color blanco.
Recuerda, los estilos en línea se ven así:

<h1 style="color: green;">

Deja las clases blue-text y pink-text en tu elemento h1.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Colores Hexadecimales

Reemplaza la palabra black en el "background-color" (color de fondo) de nuestro

elemento body con su código hexadecimal equivalente, #000000.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Mezclar colores

Reemplaza las palabras clave de color en nuestro elemento style con los códigos
hexadecimales correctos.

Color Hex Code

Dodger Blue (azul dodger) #1E90FF
Green (verde) #00FF00
Orange (naranja) #FFA500
Red (rojo) #FF0000

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Hexadecimal Abreviado

¡Pruébalo! Intenta usar los códigos hexadecimales abreviados para asignar colores a
los elementos como se indica a continuación.

Color Hex code abreviado

Cyan (cian) #0FF
Green (verde) #0F0
Red (rojo) #F00
Fuchsia (fucsia) #F0F

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 RGB

Reemplacemos el código hexadecimal en el color de fondo de nuestro elemento body

por el valor RGB correspondiente al color negro: rgb(0, 0, 0)

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Mezclando colores con RGB

Reemplaza los hex codes en nuestro elemento style con los valores RGB correctos.

Color RGB
Blue (azul) rgb(0, 0, 255)
Red (rojo) rgb(255, 0, 0)
Orchid (color orquídea) rgb(218, 112, 214)
Sienna (siena) rgb(160, 82, 45)

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Variables CSS

En la clase penguin, cambia el valor black a gray, el valor gray a white y el valor yellow
a orange.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Variable personalizada

En la clase penguin, crea un nombre de variable --penguin-skin y asígnale el valor gray.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Más con variables personalizadas

Aplica la variable --penguin-skin a la propiedad background de las clases penguin-top,

penguin-bottom, right-hand y left-hand.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Valor de respaldo

Aparentemente hay un problema con las variables proporcionadas a las clases

.penguin-top y .penguin-bottom. En lugar de corregir el error de tipeo, añade black
como un valor de reserva o "fallback" a la propiedad background de las clases
.penguin-top y .penguin-bottom.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Compatibilidad con Navegadores

Parece que en este código se utiliza una variable para establecer el color de fondo de
la clase .red-box. Mejoremos la compatibilidad de nuestro código con otros
navegadores, añadiendo otra declaración de background justo antes de la declaración
existente, y estableciendo este valor de respaldo como red (rojo).

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Hereda variables CSS

Define una variable llamada --penguin-belly en el selector :root y asígnale el valor pink
(rosado). Luego podrás ver que la variable es heredada y que todos los elementos
secundarios que la utilizan tendrán el color de fondo rosado.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Variable más específica

Cambia el valor de --penguin-belly a white en la clase penguin.

En el siguiente link podrás escribir tu código y verificar tu resultado: click

 Media Query

Modifica el selector de la media query :root para que --penguin-size se redefina y

asigne el valor de 200px. Además, redefine --penguin-skin y asígnale el valor black
(negro). Luego, cambia el tamaño de la vista previa para ver este cambio en acción..

En el siguiente link podrás escribir tu código y verificar tu resultado: click

¡Continuamos!