Scribd
Upload
11 views

CSS Sample

Uploaded by

vishal sinha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as XLSX, PDF, TXT or read online on Scribd
11 views

CSS Sample

Uploaded by

vishal sinha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as XLSX, PDF, TXT or read online on Scribd
You are on page 1/ 20

S. No.

Topic Subtopic Question Type Difficulty Level

1 CSS Colors IO based Easy

2 CSS Borders IO based Medium

0000001
3 CSS Transformations Scenario based Hard

4 CSS Animations Scenario based Medium

0000002
5 CSS Animations Scenario based Easy

6 CSS Pagination Scenario based Medium

7 CSS Transitions Scenario based Hard

0000003
8 CSS RWD Media queries Scenario based Medium

9 CSS RWD Media queries Scenario based Easy

10 CSS RWD grid Scenario based Easy

0000004
11 CSS RWD grid Scenario based Easy

12 CSS RWD flex box Scenario based Easy

0000005
Question

What will be the output of the following code?


<!DOCTYPE html>
<html>
<body>
<h2 style="color:Tomato;text-align:center;">Hi there!</h2>
<p style="color:LightSeaGreen;">We're getting your order ready to
be shipped. We will notify you when it has been sent.</p>
<p style="color:BlanchedAlmond;">Thank you for purchasing.</p>
</body>
</html>

Which of the following options correctly state the output of the


following code?

<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
line-height: 25px;
text-align: centre;
border: 1px solid black;
border-style: dotted dashed double;
}
</style>
</head>
<body>
<h1>Borders in CSS</h1>
<p>Every paragraph will be affected by the style.</p>
</body>
</html>

0000006
Scenario:You are using CSS to design your webpage. You used an
image to create its reflection just below it using a fade out effect,
such that the reflection is not totally visible and a bit opaque using
rgba. You then rotate the image to the z axis 90 degree counter
clockwise. Since the image after rotating was stuck to the top and not
visible entirely, you have to implement padding to make it totally
visible. (Hint: The padding should be according to z axis relative to x
axis). The heading is named 'Istanbul' using shadow blur effect(3
effects).

Problem statement:Select from the code-snippets the correct code


resembling this condition.

Scenario: You have written the following CSS properties for animating
a square shape that you created.
<style>
div {
position: relative;
animation-name: animate;
animation-duration: 11s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
Problem statement: What does the properties animation-delay and
animation-iteration-count signify here?

0000007
Scenario: You have created a cube on which you are going to perform
animation using CSS properties. Now, you want that the speed of the
cube, when it is moving, should be same throughout the animation.
Problem statement: Which of the following CSS property will you use?

Scenario: You have added pagination at the end of your page. You
have used active and hoverable pagination.
Problem statement: Which of the following is an example of active and
hoverable pagination?

Scenario: You are designing a webpage using CSS properties. You


have written the following code for a container:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background: lightSalmon;
transition: width 2s, height 2s, transform 2.5s;
}

0000008
Scenario: You have made a webpage using CSS properties. It's a
descriptive webpage of Udaipur city. You have added a CSS property
such that when the user resizes the browser window the color
changes from 'lemonChiffon' to 'navajoWhite'.
Problem statement: Which of the following code-snippets will correctly
perform the above function?

Scenario: You have made a webpage using CSS properties such that
when the user 560 or more the font-size will become 50px, but when
it is less than 560px then the font-size will be 25px.
Problem statement: Which of the following properties will do that?

Scenario: You are designing a web page. You made it responsive using
CSS RWD grid properties.
Problem statement: Which property ensures that the padding and
border are included in the total width and height of the elements
before using grid properties?

0000009
Scenario: You are designing a web page using CSS RWD grid view
and media queries. You want to eliminate the media queries using a
specific function.
Problem statement: Which of the given options is the function used to
eliminate media queries?

Scenario: You have created flexbox on your webpage. You have used
various CSS flex properties as well as RWD properties.
Problem statement: Which of the followinh options correctly refers to
flex property?

00000010
Option A Option B Option C

Hi there! will be aligned in the Hi there! will be aligned in the The float property will work in
centre and the first paragraph centre and the first paragraph order to align 'Hi there!'
will be in the color will be in the color statement to work, therefore it
'LightSeaGreen' and the 'LightSeaGreen' and the since will be aligned to the left and
second paragraph will be there is no such color as the first paragraph will be in
coloured in 'BlanchedAlmond' 'BlanchedAlmond' in CSS the the color 'LightSeaGreen' and
second paragraph will be the second paragraph will
displayed in black color have the color
'BlanchedAlmond'

All the text will be of green All the text will be of green All the text will be of green
color and border lines will be color, the text will be aligned color, the text will be aligned
dotted and dashed. to centre and border width will to centre and border width will
be 1px and the border lines be 1px and the border lines
will be dotted, dashed and will be dotted, dashed and
double. double and all of the text lines
will be affected with the same
styles.

00000011
<!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html>
<html> <html> <html>
<head> <head> <head>
<style> <style> <style>
img { img { img {
-webkit-box-reflect: below -webkit-box-reflect: below -webkit-box-reflect: below
1px linear-gradient(to bottom, 1px linear-gradient(to bottom, 1px linear-gradient(to bottom,
rgba(0,0,0,0.0), rgba(0,0,0,0.0), rgba(0,0,0,0.0),
rgba(0,0,0,0.8)); rgba(0,0,0,0.8)); rgba(0,0,0,0.8));
transform: rotateZ(-90deg); transform: rotateZ(+90deg); transform: rotateZ(-90deg);
padding-left:150px; padding-right:150px; padding-right:150px;
} } }
</style> </style> </style>
The animation will be delayed The animation will be delayed The animation will be delayed
for 2s at the initial stage. The for 2s at the end stage before for 2s at the middle stage of
"infinite" property will make the animation starts again. the animation. The "infinite"
the animation continue infinite The "infinite" property will property will make the
number of times (in make the animation continue animation continue infinite
general:1000 times). infinite number of times. number of times.

00000012
animation-timing-function: animation-timing-function: animation-timing-function:
ease-out; ease-in-out; linear;

<style> <style> <style>


.paginate { .paginate { .paginate {
display: inline-block; display: inline-block; display: inline-block;
} } }

.paginate a { .paginate a { .paginate a {


color: black; color: black; color: black;
float: left; float: left; float: left;
padding: 8px 16px; padding: 8px 16px; padding: 8px 16px;
text-decoration: none; text-decoration: none; text-decoration: none;
} } }

The width and height of the The width and height of the The width and height of the
container will increase if the container will increase if the container will decrease if the
user doesn't hover over the user hovers over the user hovers over the
container. The direction of text container. The direction of text container. The direction of text
inside the container will be inside the container will be inside the container will be
opposite to the initial direction. opposite to the initial direction. opposite to the initial direction.
The container will rotate 180 The container will rotate 180 The container will rotate 180
degrees to 3 times degrees to 6 times degree for 3 times
(540/180=3). (540/90=6). (540/180=3).

00000013
<!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html>
<html> <html> <html>
<head> <head> <head>
<meta name="viewport" <meta name="viewport" <meta name="viewport"
content="width=device-width, content="width=device-width, content="width=device-width,
initial-scale=1.0"> initial-scale=1.0"> initial-scale=1.0">
<style> <style> <style>
img { img { img {
border-radius: 8px; border-radius: 8px; border-radius: 8px;
} } }
body { body { body {
background-color: background-color: background-color:
@media only screen and (min-
navajoWhite; @media only screen and (min-
navajoWhite; @media (min-width: 560px) {
navajoWhite;
width: 560px) { width: 560px) { div.resize {
div.resize { div.resize { font-size: 50px;
font-size: 50px; font-size: 50px; }
} } }
} } @media (max-width: 560px)
@media only screen and @media only screen and {
(max-width: 560px) { (max-width: 560px) { div.resize {
div.resize { div.resize { font-size: 25px;
font-size: 35px; font-size: 25px; }
} } }
} }
*{ *{ *{
box-sizing: border-box; box-size: border-box; box: border-box;
} } }

00000014
minmax() maxmin() min-max()

It is the shorthand for flex- It is the shorthand for flex- It is the shorthand for flex-
grow and flex-shrink grow, flex-shrink and flex- grow, flex-shrink and flex-
combined. The second basis combined. The second basis combined. The second
parameter (flex-shrink) is and third parameters (flex- and third parameters (flex-
optional. The default is 0 1 shrink and flex-basis) are shrink and flex-basis) are not
auto, but if you set it with a optional. The default is 0 1 optional. The default is 0 1
single number value, it’s like 1 auto, but if you set it with a auto, but if you set it with a
0. single number value, it’s like 1 single number value, it’s like 1
0. 0.

00000015
Option D Correct Answer Explanation

This will not display the The text-align property is


heading 'Hi there!' because we used to align the text to
have not closed the tag left, right or centre. The
<style>. The first paragraph color property used in style
will be in the color is used to provide color to
'LightSeaGreen' and the the text.
second paragraph will have A
the color 'BlanchedAlmond'

The code will not execute The border lines are dotted,
properly. dashed and double because
all the properties are used
in a single border definition.

00000016
<!DOCTYPE html> Padding will be given from
<html> the right side of Z-axis
<head> relative to giving a padding
<style> from top from X axis. To
img { rotate the image counter
-webkit-box-reflect: below clockwise we will use
1px linear-gradient(to bottom, C minus(-) sign.
rgba(0,0,0,0.0),
rgba(0,0,0,0.8));
transform: rotateZ(-90deg);
padding-top:150px;
}
</style>
The animation will be delayed The animation will complete
for 2s at the initial stage. The its cycle in 11s and will go
"infinite" property will make on infinitely. In the starting
the animation continue infinite stage it will be delayed for
number of times. 2 seconds.

00000017
animation-timing-function: linear - Specifies an
ease; animation with the same
speed from start to end.

<style> In the first option active


.paginate { property is not used. In the
display: inline-block; third the hover effect
} should be succeeded by
not. In the fourth option
.paginate a { B hover effect is not used.
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

The width and height of the The effect used here is


container will increase if the transition+transform when
user hovers over the a user hovers over the
container. The direction of text container. The containers
inside the container will be size will increase, and the
opposite to the initial direction. D text will appear in an upside
The container will rotate 180 down manner because the
degrees to 3 times element is rotating for
(540/180=3). 3(odd) times 180 degree.

00000018
<!DOCTYPE html> Media queries can also be
<html> used to change layout of a
<head> page depending on the
<meta name="viewport" orientation of the browser.
content="width=device-width, You can have a set of CSS
initial-scale=1.0"> C properties that will only
<style> apply when the browser
img { window is wider than its
border-radius: 8px; height, a called
} "Landscape" orientation.
body {
background-color:
@media only screen and (min-
lemonChiffon; Media queries can be used
width: 560px) { the font size of the
div.resize { webpage given the
font-size: 50px; condition.
}
} B
@media only screen and
(max-width: 560px) {
div.resize {
font-size: 25px;
}
}
*{ Ensure that all HTML
sizing: border-box; elements have the box-
} sizing property set to
border-box. This makes
sure that the padding and
A border are included in the
total width and height of
the elements.

00000019
min() In some cases, you may be
able to avoid writing media
queries by using minmax().

It is the shorthand for flex- The flex CSS shorthand


shrink and flex-basis property sets how a flex
combined. The default is 0 1 item will grow or shrink to
auto, but if you set it with a fit the space available in its
single number value, it’s like 1 flex container.
0.
B

00000020

You might also like