CSS QUESTION AND ANSWER
Question No. 1: What Flex layout? Difference Flex and Grid
layout? Answer: A flex container expands items to fill available free
space or shrinks them to prevent overflow. Most importantly, the flex
layout is direction-agnostic as opposed to the regular layouts.
Difference Flex and Grid layout:
Grid Flex
CSS Grid layout is a The CSS Flexbox offers a
two-dimensional grid-based layout one-dimensional layout. It is helpful
system with rows and columns, in allocating and aligning the space
making it easier to design web among items in a container. It works
pages without having to use floats with all kinds of display devices and
and positioning. screen sizes.
The Grid layout is designed for The flexbox layout is best suited to
larger-scale layouts that are not application components and
linear in design small-scale layouts.
CSS Grid deploys fractional Flex direction allows developers to
measure units for grid fluidity and align elements vertically or
auto-keyword functionality to horizontally.
automatically adjust columns or
rows.
CSS grids are for 2D layouts. It Flexbox works better in one
works with both rows and columns. dimension only.
Question No. 2: Explain CSS position property? What are some
differences between absolute position and relative position?
Answer:
CSS position property:
The position property-specifics the type of positioning method used for
an element (static, relative, absolute, fixed, sticky).
Difference between the absolute and relative position:
position: relative places an element relative to its current position without
changing the layout around it, whereas position: absolute places an
element relative to its parent's position and changing the layout around it.
Question No. 3: What is a box model? And what are the different
elements of a box model?
Answer:
Box model:
The CSS box model is essentially a box that wraps around every
HTML element. It consists of: margins, borders, padding, and the
actual content.
Different elements of the box model:
1. Content - The content of the box, where text and images
appear.
2. Padding - Clears an area around the content. The padding is
transparent.
3. Border - A border that goes around the padding and content.
4. Margin - Clears and area outside the border. The margin is
transparent.
Question No. 4: What is the hover effect? What is the purpose of
the active class?
Answer:
Hover effect:
The hover selector is used to select elements when you mouse over
them. The hover: CSS pseudo-class matches when the user interacts
with an element with a pointing device. But does not necessarily activate
it. It is generally triggered when the user hovers over an element with the
cursor (mouse pointer).
Purpose of the active class:
The active is a CSS pseudo-class. It specifies and selects an element
based on a state active state- and is used to apply a style to an element
that is being activated by the user. It is often used to target and style an
element when it’s active.
Question No. 5: What are the different types of Selectors in
CSS? Answer:
CSS Selectors:
CSS selectors are used to “find” the HTML element you want to style.
I can divide CSS selectors into five categories:
● Simple selectors (select element based on name, id, class)
● Combinator selectors (select element based on a
specific relationship between them)
● Pseudo-class selectors (selector elements based on a
certain state)
● Pseudo-element selectors (select and style a part of
an element)
● Attribute selectors (select element based on an
attribute or attribute value)
Question No. 6: What is CSS Specificity?
Answer:
Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be applied.
Specificity is based on the matching rules which are composed of
different sorts of CSS selectors.
Question No. 7: What is a CSS Preprocessor? What are some
benefits of Sass?
Answer:
What is a CSS preprocessor: A CSS preprocessor is a program that
lets you generate CSS from the preprocessor’s own unique syntax to
use a CSS preprocessor, you must install a CSS compiler on your web
server.
What are some benefits of Sass:
● Sass is fully CSS-compatible.
● It is more stable, powerful, and elegant than CSS.
● It is based on JavaScript and is a superset of CSS.
● It has its own syntax and compiles to readable CSS.
● It is an open-source preprocessor that is interpreted into CSS.
● It supports language extensions for manipulating colors and
other values.
● It Provides well-formatted, customizable output.
Question No. 8: What is a Pseudo element? Give an example of
pseudo element
Answer:
Pseudo-element: Pseudo-elements effectively create new elements
that are not specified in the markup of the document and can be
manipulated much like a regular element. This introduces huge benefits
for creating cool effects with minimal markup, also aiding significantly in
keeping the presentation of the document out of the HTML and in CSS
where it belongs.
Example of pseudo element:
A CSS pseudo-class is a keyword added to a selector that specifies a
special state of the selected element(s). For example, :hover can be
used to change a button's color when the user's pointer hovers over it.
Question No. 9: How will you use media queries to make a
website responsive?
Answer: It uses the @media rule to include a black of CSS properties if a
certain condition is true.
Example:
@media only screen and (max-width: 700px) {
body{
Background-color: blue;
}
}
Question No. 10: How will you make font size responsive?
Answer: The text size can be set with a vw unit, which means the
“viewport width”.
Example: <h1 style=”font-size:2vw;”>Hello world</h1>
Question No. 11: What is the Difference between transition
and transform?
Answer:
Transformation is a fundamental change of state, the passage
from one way of being to another. Transition is a gradual
psychological and emotional process through which individuals
and groups reorient themselves so that they can function and find
meaning in a changed situation.
Question No. 12: How will you horizontally and vertically center a div
inside a div?
Answer:
Additionally, you need to define the parent container as a flex container.
You can do this by setting the display property to “flex.” Then define the
align-items and justify-content property to “center.” This will tell the
browser to center the flex item (the div within the div) vertically and
horizontally.
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Question No. 13: Who maintains the CSS specification?
Answer:
World Wide Consortium maintains the CSS specifications.
Question No. 14: What does CSS selector mean?
Answer:
A string equitation of HTML elements by which declarations or a set of
it, is declared and is a link that can be referred for linking HTML and Style
is CSS selector
Question No. 15: How can the dimension be defined of an element?
Answer:
Dimension properties can be defined by:
● Height
● Max-height
● Max-width
● Min-height
● Min-width
● Width
Question No. 16: Define float property of CSS?
Answer:
By float property, the image can be moved to the right or the left along
with the text to be wrapped around it. Element before this property is
applied do not change their properties.
Question No. 17: How does Z index function?
Answer:
Overlapping may occur while using CSS for positioning HTML element. Z
index helps in specifying the overlapping element. It is a number which
can be positive or negative, the default value being zero.
Question No. 18: How can backward compatibility be designed
in CSS?
Answer:
HTML sheet methods is collaborated with CSS and used accordingly.
Question No. 19: How can the gap under the image be removed?
Answer:
As image being inline element are treated same as texts, so there is a
gap left, which can be removed by:
Example:
img {
display: block;
}
Question No. 20: What is Inline style?
Answer:
The Inline style a CSS is used to add up styling to individual HTML
elements.
