wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

CSS INT

Total questions: 98

Worksheet time: 1hrs 17mins

Name
Class
Date
1.

¿Que significa CSS?

a)

Estilo de hojas en cascada

b)

Cascada de hojas con estilo

c)

Hojas de estilo en cascada

d)

Hojas en cascada con estilo

2.

¿Para que se utiliza el CSS?

a)

Se utiliza para organizar la presentación y aspecto de una página web.

b)

Solo se utiliza para animar elementos de una pagina web.

c)

Para que se vea bonita una aplicacion.

d)

Se utiliza para añadir color, formas, codigo y caracteristicas especiales a una pagina web.

3.

Seleccione la sintaxis correcta de CSS.

a)
b)
c)
d)
4.

Seleccione todas las formas en la que se puede adjuntar CSS a un documento

a)

Externas

b)

Embebidas

c)

Internas

d)

En linea

e)

De internet

5.

¿Cual es la sintaxis para colocar CSS de manera externa?

a)
b)
c)
6.

¿Cual es la propiedad que coloca sangría a un texto?

a)

text-align

b)

text-indent

c)

text-center

d)

text-decoration

7.

¿Cual es la salida de un elemento h1, con el estilo de la imagen?

a)
b)
c)
d)
8.

¿Con cuál de los siguientes link hace una referencia a una hoja de estilo externa de forma correcta?

a)

<link rel=stylesheet type=text/css href=style.css />

b)

<link rel="styleshet" type="text/css" href="style.css">

c)

<link rel=stylesheet type=text/css href=style.css>

d)

<link rel="stylesheet" type="text/css" href="style.css" />

9.

En CSS, para cambiar el color de fondo de un elemento se usa

a)

color

b)

bgcolor

c)

background-color

d)

backcolor

10.
El valor de este atributo no puede ser duplicado, debe ser único en todo el documento.
a)
ID
b)
class
c)
etiqueta
d)
memoria
11.

Con esta etiqueta <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" /> enlazamos un/a:

a)

Hoja de estilos externa

b)

Código javascript

c)

Fuente web

12.

El formato más utilizado en las fuentes web son:

a)

SVG Font (.svg, .svgz)

b)

OpenType (.ttf, .otf),

c)

TrueType (.ttf)

d)

WOFF Web Open Font Format (.woff)

13.

La propiedad CSS margin: 10em 5em significa:

a)

margin-top, margin-bottom = 10em

margin-right, margin-left = 5em

b)

margin-right, margin-left = 10em

margin-top, margin-bottom = 5em

c)

margin-top, margin-right = 10em

margin-bottom, margin-left = 5em

14.

Propiedad que permite determinar un borde alrededor de un elemento HTML

a)

border

b)

padding

c)

margin

d)

float

15.

¿De las etiquetas a continuación cuál tiene un impacto directo sobre la página de resultados de búsqueda que ofrece Google sobre un determinado sitio web?

a)

<h1>

b)

<a href=”#” rel=”nofollow”>anchor</a>

c)

<title>

d)

<strong>

16.

¿Cuál es la forma más eficiente de aplicar estilos CSS en un documento HTML?

a)

En línea

b)

Incrustado en la cabecera

c)

Hojas de estilo externas

d)

Mediante PHP

17.

¿Cómo se indica que el color del texto es de color rojo?

a)

color: red ;

b)

color: #FF0000;

c)

color: RGBa(255, 0, 0, 0.8);

d)

Todas las respuestas son correctas

e)

color: rojo;

18.

¿Cómo se indica que todos los elementos "span" tienen el texto en negrita?

a)

span {text-color:bold}

b)

span {text-weight:bold}

c)

span {font-style:bold}

d)

span {font-weight:bold}

19.

¿Qué propiedad se emplea para cambiar el tipo de letra de un elemento?

a)

text-type

b)

font-type

c)

font-family

d)

text-family

20.

Que harías para seleccionar todas las imágenes y todos los enlaces que estén dentro de la etiqueta "section".

a)

section img section a {...}

b)

section img, section a {...}

c)

section img a {...}

d)

section, img a {...}

21.

Elementos block

a)

son posicionados uno sobre otro hacia abajo en la página.

b)

son posicionados lado a lado, uno al lado del otro en la misma

c)

son posicionados en las esquinas de la página

d)

Ninguna opción es correcta

22.

Elementos inline

a)

son posicionados uno sobre otro hacia abajo en la página.

b)

son posicionados lado a lado, uno al lado del otro en la misma línea, sin ningún salto de línea a menos que ya no haya más espacio horizontal

para ubicarlos.

c)

son posicionados en las esquinas de la página

d)

Ninguna opción es correcta

23.

Una página web es en

realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son

establecidas por estilos provistos por los navegadores o por los diseñadores usando CSS.

a)

La afirmación es VERDADERA

b)

La afirmación es FALSA

c)

HTML y CSS no tienen nada que ver

24.

Existen tres opciones para escribir las reglas en CSS. ¿La imagen corresponde?

a)

Estilo en línea

b)

Hoja de estilo interna mediante <style></style>

c)

Archivo CSS

d)

Ninguna opción es correcta

25.

Existen tres opciones para escribir las reglas en CSS. ¿La imagen corresponde?

a)

Estilo en línea

b)

<style></style>

c)

Archivo CSS

d)

Ninguna opción es correcta

26.

Existen tres opciones para escribir las reglas en CSS. ¿La imagen corresponde?

a)

Estilo en línea

b)

<style></style>

c)

Archivo CSS externo

d)

Ninguna opción es correcta

27.

Existen selectores básicos. ¿La imagen corresponde a la definición en CSS a un selector?

a)

Selector Universal

b)

Selector de Tipo

c)

Selector de Clase

d)

Selector de Atributo

e)

Selector ID

28.

Existen selectores básicos. ¿La imagen corresponde a la definición en CSS a un selector?

a)

Selector Universal

b)

Selector de Tipo

c)

Selector de Clase

d)

Selector de Atributo

e)

Selector ID

29.

Existen selectores básicos. ¿La imagen corresponde a la definición en CSS a un selector?

a)

Selector Universal

b)

Selector de Tipo

c)

Selector de Clase

d)

Selector de Atributo

e)

Selector ID

30.

Existen selectores básicos. ¿La imagen corresponde a la definición en CSS a un selector?

a)

Selector Universal

b)

Selector de Tipo

c)

Selector de Clase

d)

Selector de Atributo

e)

Selector ID

31.

Existen selectores básicos. ¿La imagen corresponde a la definición en CSS a un selector?

a)

Selector Universal

b)

Selector de Tipo

c)

Selector de Clase

d)

Selector de Atributo

e)

Selector ID

32.
¿Cuáles de los siguientes selectores usa una pseudo-clase?
a)
a:hover
b)
a.hover
c)
a>hover
33.

¿Cómo se escribe un comentario en CSS3?

a)

-- mi comentario

b)

<!-- mi comentario -->

c)

// mi comentario

d)

/* mi comentario */

34.

¿Cómo se hace en CSS para que el texto esté centrado?

a)

center: true

b)

text-center: true

c)

text-align: center

d)

align: center

35.

En CSS3, ¿cuál de estas declaraciones define un borde redondeado con un radio de 20px en la esquina inferior derecha?

a)

border-radius: 40px 20px 20px 80px;

b)

border-radius: 40px 20px;

c)

border-radius: 20px 20px 40px 20px;

d)

border-radius: 20px 40px 60px 80px;

36.

¿Cuál es la propiedad CSS que se utiliza para determinar el espacio entre el borde de un elemento y su contenido?

a)

border

b)

padding

c)

margin

d)

float

37.

Escoge 2 maneras de agrega margen solamente a la parte de arriba de un elemento

a)

margin: top 10px;

b)

margin: up 30px;

c)

margin-top: 15px;

d)

top-margin : 5px;

e)

margin: 10px 0 0 0;

38.

¿ En qué elemento del archivo HTML se pone el enlace a un archivo CSS separado?

a)

entre <head> y </head>

b)

entre <title> y </title>

c)

entre <body> y </body>

d)

entre <h1> y </h1>

39.

¿ Cómo se llama una pieza completa de CSS ?

a)

Declaración

b)

Selector

c)

Regla

d)

Propiedad

40.

En una regla CSS
¿ cómo se llama la palabra FUERA de las llaves { } ?

a)

Declaración

b)

Selector

c)

Regla

d)

Propiedad

41.

En una regla CSS
¿ cómo se llama CADA LÍNEA DENTRO de las llaves { } ?

a)

Propiedad

b)

Declaración

c)

Selector

d)

Valor

42.

Cada declaración CSS contiene ...

a)

selector

b)

propiedad

c)

propiedad y valor

d)

valor

43.

En una declaración CSS
¿ cuál es el símbolo que separa una propiedad de su valor ?

a)

= signo igual

b)

: dos puntos

c)

; punto y coma

d)

" comillas

44.

CADA declaración CSS termina con ...

a)

: dos puntos

b)

; punto y coma

c)

} llave

d)

signo mayor

45.

Para cambiar el fondo de un documento HTML
¿ a qué SELECTOR se aplicará la regla CSS ?

a)

head

b)

header

c)

body

d)

div

46.

¿ Qué propiedad CSS determina que una etiqueta HTML sea
un BLOQUE o un elemento EN LÍNEA ?

a)

box-sizing

b)

display

c)

border

d)

padding

47.

¿ Qué características tienen las etiquetas tipo BLOQUE ?

a)

Ocupan todo el ancho disponible

b)

Quedan una abajo de la otra

c)

Su altura depende de su contenido

d)

Todas son correctas

48.

¿ Qué propiedad CSS controla el espacio exterior de bloques HTML ?

a)

border

b)

box-sizing

c)

margin

d)

padding

49.

¿ Qué propiedad CSS controla el "relleno" de bloques HTML ?

a)

border

b)

box-sizing

c)

margin

d)

padding

50.

Los argumentos para la función RGB si se quiere obtener el color verde son:

a)

255,0,0

b)

255,255,255

c)

0,255,0

d)

125,125,125

51.

El argumento alpha en la función rgba() permite aplicar transparencia al color, una transparencia completa se logra con el valor 1.

a)

b)

52.

La propiedad flex de display permite que los elementos hijos se alineen de forma horizontal

a)

Verdadero

b)

Falso

53.

La propiedad "flex-direction: column" permite crear columnas para agregar contenido a la página

a)

Verdadero

b)

Falso

54.

La propiedad "justify-content:center" permite que los hijos se centren horizontalmente.

a)

Verdadero

b)

Falso

55.

La propiedad "justify-content:space-around" podría ser útil para crear un menú horizontal

a)

Verdadero

b)

Falso

56.

Con la propiedad "flex-wrap: wrap" se puede indicar que los elementos hijos no se ajusten en varias filas, sino que siempre permanezcan en una fila, aunque signifique un desbordamiento.

a)

Verdadero

b)

Falso

57.

¿Cuál es el valor predeterminado de la propiedad flex-direction?

a)

column-reverse

b)

row

c)

column

58.

¿Qué propiedad se utiliza para permitir que un elemento flexible crezca para ocupar el espacio disponible?

a)

flex-shrink

b)

flex-grow

c)

flex-basis

59.

¿Cómo se especifica el orden visual de un elemento flexible?

a)

order

b)

flex-order

c)

order-index

60.

¿Cuál es la función principal de la propiedad flex-shrink en Flexbox?

a)

Controla la capacidad de un elemento flexible para crecer y ocupar el espacio disponible.

b)

Define el tamaño inicial de un elemento flexible antes de que comience a distribuirse el espacio adicional.

c)

Determina la capacidad de un elemento flexible para contraerse y ocupar menos espacio cuando sea necesario

61.

¿Cuál es la función principal de la propiedad flex-basis en Flexbox?

a)

Establece el tamaño inicial de un elemento flexible antes de que comience la distribución del espacio adicional.

b)

Controla la capacidad de un elemento flexible para crecer y ocupar el espacio disponible.

c)

Determina el tamaño base de un elemento flexible antes de que se apliquen las propiedades flex-grow y flex-shrink

62.

¿Cuál es la función de la propiedad gap en este contexto?

a)

Define el espacio entre elementos flexibles dentro de un contenedor.

b)

Establece la separación entre las filas y columnas de una cuadrícula creada con Flexbox

c)

Especifica el margen exterior de los elementos hijos en un diseño flexible.

63.

¿Cuál es el propósito principal de la propiedad flex-wrap en Flexbox?

a)

Controla la capacidad de un elemento flexible para crecer y ocupar el espacio disponible.

b)

Establece la dirección en la que los elementos flexibles se colocan dentro de un contenedor (fila o columna).

c)

Determina si los elementos flexibles deben envolverse en múltiples líneas si no pueden ajustarse en la dirección principal

64.

¿Cuál es la función principal de la propiedad align-items en Flexbox?

a)

Alinea los elementos flexibles en la dirección transversal del contenedor.

b)

Controla la capacidad de un elemento flexible para crecer y ocupar el espacio disponible.

c)

Alinea los elementos flexibles a lo largo del eje transversal del contenedor

65.

¿Qué valor de `position` se utiliza para hacer que un elemento se comporte como `relative` hasta que alcance un cierto punto de desplazamiento, momento en el cual se comporta como `fixed`?

a)

sticky

b)

scroll

c)

static

d)

absolute

66.

¿Cuál de estas NO es una propiedad de Flexbox?

a)

grid-column

b)

justify-content

c)

display: flex;

d)

align-items

67.

¿Qué lenguaje aporta el diseño, la estética y los detalles en HTML5?

a)

Lenguaje C++

b)

CSS

c)

Dream Weaver

d)

Lenguaje Ensamblador

68.

¿Cuáles de los siguientes selectores usa una pseudo-clase?

a)

a:hover

b)

a.hover

c)

a>hover

69.

Cuales son las 4 posibilidades de Flex-direction

a)

column-inverse,row-left,column-right, column-reverse

b)

row,row-reverse,column, column-reverse

c)

row-flex,row-reverse-flex,column-flex, column-reverse-flex

70.

Selector general para dar estilo a todas las imagenes en css

<img id="destacada" src="imagen1.png" />

<img id="destacada" src="imagen2.png" />

a)

.destacada

b)

#destacada

c)

img

d)

ninguna de las anteriores

71.

Selector para asignar estilo a la imagen1.

<img id="destacada1" src="imagen1.png" />

<img id="destacada2" src="imagen2.png" />

a)

.destacada2

b)

#destacada2

c)

.destacada1

d)

#destacada1

72.

pseudo-clase que se activa cuando el usuario se desplaza sobre un elemento con el puntero del mouse.

a)

:hover

b)

:filter

c)

:attachment

d)

ninguna de las anteriores

73.

propiedad para aplicar filtros sobre una imagen

a)

hover

b)

filter

c)

attachment

d)

ninguna de las anteriores

74.

asignar un filtro en escala de grises

a)

filter: opacity(.5);

b)

filter: sepia(60%);

c)

filter: saturate(180%);

d)

filter: grayscale(80%);

75.

asignar un filtro de transparencia

a)

filter: opacity(.5);

b)

filter: sepia(60%);

c)

filter: saturate(180%);

d)

filter: grayscale(80%);

76.

Propiedad que permite redondear bordes en una imagen

a)

transform: rotateY(180deg);

b)

border-radius:50%;

c)

transform: rotate(360deg);

d)

ninguna de las anteriores

77.

propiedad que permitirá asignar una sombra al borde de una imagen.

a)

box-shadow

b)

transform

c)

border-radius

d)

todas las anteriores

78.

establece el margen para los cuatro lados

a)

webkit

b)

transform

c)

border

d)

margin

79.

El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de relleno.

a)

padding:0;

b)

display:flex;

c)

margin:auto;

d)

overflow:hidden;

80.

El código css para lograr este posicionamiento según la imagen es:

a)

flex-direction: row;

b)

flex-direction: row-reverse;

c)

flex-direction: column;

d)

flex-direction: column-reverse;

81.

El código css para lograr este posicionamiento según la imagen es:

a)

flex-direction: row;

b)

flex-direction: row-reverse;

c)

flex-direction: column;

d)

flex-direction: column-reverse;

82.

Tipos de posicionamiento:

a)

top, left, right, bottom

b)

static, relative, absolute, fixed, sticky

c)

sticky, mixed, relax, relative, absolute

d)

width, height, margin, border

83.

Se refiere al proceso de adaptar una página al viewport (área visible del navegador que se muestra en la pantalla) de todo tipo de dispositivos, como tablets o móviles:

a)

Diseño media query

b)

Diseño responsivo

c)

Diseño adaptativo

d)

Diseño de pantalla

84.

Técnicas del diseño responsivo:

a)

Mobile style & Desktop style

b)

Mobile form & Desktop form

c)

Mobile design & Desktop design

d)

Mobile first & Desktop first

85.

Para contener variables en CSS es necesario hacer uso de la pseudo-clase : (a)   , seguido de llaves.

86.

Al utilizar la propiedad display: flex en el elemento padre, los elementos hijos se colocarán en:

a)

Filas

b)

Columnas

87.

Teniendo en cuenta el código, ¿Qué verías en el navegador?

a)
b)
c)
d)
88.

¿Cuál es la primera propiedad que le pasamos al contenedor padre para especificar que vamos a trabajar con grid?

a)

display: auto;

b)

display: grid-container;

c)

display: grid-template;

d)

display: grid;

89.

¿Qué propiedad se utiliza para definir las columnas del grid?

a)

grid-columns;

b)

grid-layout-columns;

c)

grid-template-columns;

d)

columns;

90.

Para alinear verticalmente toda la malla de grid, ¿Cuál propiedad se utiliza?

a)

justify-content

b)

align-content

c)

align-items

d)

justify-items

91.

Para alinear horizontalmente solo un elemento hijo ¿Cuál propiedad se utiliza?

a)

align-items

b)

justify-content

c)

justify-items

d)

justify-self

92.

Qué propiedad nos permite modificar la posición natural de cualquier elemento del documento HTML.

a)
position
b)

relative

c)

absolute

d)

sticky

93.

Tipos de posicionamiento:

a)

top, left, right, bottom

b)

static, relative, absolute, fixed, sticky

c)

sticky, mixed, relax, relative, absolute

d)

width, height, margin, border

94.

El modulo de GRID es un sistema basado en .................

a)

filas

b)

columnas

c)

celdas

95.

El elemento padre de GRID se llama CONTENEDOR

a)

Verdadero

b)

Falso

96.

Se puede ajustar el espaciado entre los grid (celdas) usando la siguiente propiedad:

a)

column-gap

b)

row-gap

c)

todas son correctas (menos 1 parecida a esta)

d)

gap

e)

todas son incorrectas

97.

¿Cuál es el propósito de grid CSS?

a)

Crear animaciones interactivas en una página web.

b)

Añadir elementos decorativos a una página web.

c)

Optimizar el rendimiento del sitio web.

d)

Proporcionar un sistema de maquetación para crear diseños web complejos y responsivos.

98.

¿Cómo se alinean los elementos de la cuadrícula horizontalmente en CSS?

a)

justify-content

b)

align-items

c)

align-content

d)


justify-items