CSS

Question 1

¿Cómo se les puede dar estilo a los elementos de html?

Adiciona un ejemplo

Answer 1

con el elemento <style></style>, dentro de este hay que poner el lemento y el estilo que se busca:
~~~
<style>
h1 {
text-align:center
}
</style>
~~~

text

Question 2

¿cómo relacionar un archivo css con un html?

Answer 2

Dentro del elemento head agregar un elemento <link></link> que tenga un atributo rel con valor “stylesheet” y el atributo href con el valor del nombre del documento.css donde estén los estilos que querramos agregar.

Question 3

¿Cómo podemos hacer que la página se vea similar en un dispositivo móvil como en una página web?

Answer 3

Añadiendo al elemento head un elemento meta con nombre viewport y content width=device-width, initial-scale=1.0
~~~

<meta></meta>

~~~

Question 4

¿Cuál es la diferencia entre div y section?

Answer 4

Con el elemento section se separa una sección de la estructura de la página, mientras que el div se utiliza principalmente con motivos de diseño

Question 5

¿Cómo se puede hacer que un elemento tenga un tamaño en relación con el elemento padre?

Answer 5

especificando su width en porcentaje. Ejemplo:
~~~
div {
width: 80%;
}
~~~

Question 6

ipo¿Cuáles son los tipos de selectores en CSS?

Answer 6

De tipo(elemento), de clase

Question 7

¿Cómo se puede poner una imagen de fondo de la página?

Answer 7

Por medio de la propiedad “background-image” que tiene que tener un valor de url(https://…….jpg).

Ejemplo:
`body {

background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)

}`

Question 8

¿Cómo seleccionar clases en CSS?

Answer 8

Primero hay que agregar el atributo de clase al elemento html y luego en el archivo de estilos de CSS hay que poner .class { propiedad: valor

Ejemplo:
~~~
.flavor {
text-align: left;
}
~~~

Question 9

¿Qué propiedad podemos usar para dar espacio entre el contenido y los lados)

Answer 9

padding-left, padding-right, padding-top y padding-bottom (si todas son iguales se pueden sustituir por padding)

les damos valos en px (p.e. 20px)

Question 10

¿Cómo se puede hacer para modificar que un elemento de link cambie dado su estado (visitado, hover, activo…)

Answer 10

a: visited {
color: blue;}

Question 11

¿Cómo podemos hacer que las imágenes se comporten como heading element que son block-level?

Answer 11

con la propiedad display: block;

Question 12

cómo se puede centrar un elemento?

Answer 12

agregar la propiedad de margin:auto;

Question 13

¿Cómo agregar sombra a un elemento?

Answer 13

Agregar la propiedad box-shadow:
box-shadow: offsetX offsetY blurRadius spreadRadius color;

Question 14

¿Cómo le hacemos para quitar la barra de scroll horizontal?

Answer 14

poniendo la propiedad margin: 0; al elemento body.

Question 15

Si en css tenemos dos estilos distintos que se aplican a un mismo elemento, ¿cuál es el que se mostrará en pantalla?

Answer 15

El estilo especificado al último.

Question 16

¿cuál tiene prioridad, el estilo en línea, el selector de clase, el selector de elemento o el selector id? ¿Por qué?

Answer 16

Prioridad:
estilo en línea > id > clase > elemento
Porque es más específico.

Question 17

qué podemos hacer para que se priorice un estilo sobre el otro?

Answer 17

en la propiedad en css que queremos que se aplique ponemos !important

Question 18

¿Cómo se definen variables en css?

Answer 18

En el elemento padre hay que agregar:
~~~
–pinguino-piel: rgb(187, 36, 187);
~~~
y en donde lo querramos aplicar (siempre y cuando sea un hijo del elemento padre):

background: var(--pinguino-piel);

Question 19

¿cómo se pone un valor de respaldo?

Answer 19

Dos opciones: primero poner:
~~~
background: black;
background: var(--pinguino-piel);
~~~
background: var(--pinguino-piel, black);

Esto sirve en exploradores que no soportan variables en css