CSS Interview Questions

1)What is CSS?

 CSS stands for Cascading Style Sheets.

 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
 CSS saves a lot of work. It can control the layout of multiple web pages all at once.
 External stylesheets are stored in CSS files.

2) What are the latest versions of CSS?

The latest version of CSS is CSS3, which is a modularized specification. It includes various
modules such as CSS Grid Layout, Flexbox, CSS Variables, and CSS Animations. While CSS4
has been discussed conceptually, it does not exist as a formal version; instead, CSS continues to
evolve through updates to these individual modules.
3) What is the syntax of CSS?
The syntax of CSS consists of selectors and declaration blocks:
Selector: Indicates which HTML element(s) to style.
Declaration Block: Contains one or more declarations, each including a property and a value,
enclosed in curly braces {}.

selector {
property: value;
}

4) What are the different types of CSS selectors?

Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)

 Simple Selector
p{
The element selector selects HTML elements based on the element name.
text-align: center;
Here, all <p> elements on the page will be center-aligned, with a red text color:
color: red;
ID Selector }
 The id selector uses the id attribute of an HTML element to select a specific
element.

The id of an element is unique within a page, so the id selector is used to select

one unique element!

To select an element with a specific id, write a hash (#) character, followed by
the id of the element.

#para1 {
text-align: center;
color: red;
}
Note: An id and class names cannot start with a number!

Class Selector

The class selector selects HTML elements with a specific class attribute.

HTML elements can also refer to more than one class.

To select elements with a specific class, write a period (.) character, followed by
the class name.

.center {
text-align: center;
color: red;
}

Universal Selector

The universal selector (*) selects all HTML elements on the page.

* {
text-align: center;
color: blue;
}

Grouping Selector

The grouping selector selects all the HTML elements with the same style
definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style
definitions):
 h1, h2, p {
text-align: center;
color: red;
}

 Combinator selectors
A CSS selector can contain more than one simple selector. Between the simple
selectors, we can include a combinator.

Descendant Selector (space)

The descendant selector matches all elements that are descendants of a

specified element.

The following example selects all <p> elements inside <div> elements:

Child Selector (>)

 The child selector selects all elements that are the children of a specified
element.

The following example selects all <p> elements that are children of a <div>
element:

Adjacent Sibling Selector (+)

The adjacent sibling selector is used to select an element that is directly after
another specific element.

Sibling elements must have the same parent element, and "adjacent" means
"immediately following".

The following example selects the first <p> element that are placed
immediately after <div> elements:
General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a
specified element.

The following example selects all <p> elements that are next siblings of <div>
elements:
  Pseudo-classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

 Style an element when a user mouses over it

 Style visited and unvisited links differently
 Style an element when it gets focus

 Pseudo-Elements

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

 Style the first letter, or line, of an element

 Insert content before, or after, the content of an element

5)What is the use of the :hover selector in CSS?

The :hover selector in CSS is used to apply styles to an element when the user
hovers over it with a pointing device (like a mouse). This is commonly used to
change the appearance of links, buttons, and other interactive elements to provide
visual feedback when the user interacts with them.

a:hover {
color: red;
text-decoration:
underline;
}

6) What is the use of the :active selector in CSS?

The :active selector in CSS is used to apply styles to an element when it is in the process of being
activated by the user. This typically occurs when the user clicks on the element

button:active { In this example, when the user clicks on a

button, its background color changes to blue
background-color: blue; and the text color changes to white while the
button is being pressed.
color: white;
}
7) What is the use of the :focus selector in CSS?
The :focus selector in CSS is used to apply styles to an element when it has focus,
meaning it is selected and ready to receive input from the user. This is commonly
used for form elements like input fields, buttons, and links to improve accessibility
and user experience.

input:focus {
border-color: In this example, when an input field receives focus
blue; (such as when a user clicks into it or navigates to it
using the keyboard), its border color changes to blue,
outline: none; and any default outline is removed.
}

8) What is the use of the :first-child selector in CSS?

The :first-child selector is used to select the specified selector, only if it is
the first child of its parent.

9)What is the use of the :last-child selector in CSS?

The :last-child selector matches every element that is the last child of its
parent.
<!DOCTYPE html>
Output
<html>
<head>
<style>
/* Selects the second element of div siblings */
div:nth-child(2) {
background: red;
}
/* Selects the second li element in a list */
li:nth-child(5) {
background: lightgreen;}
/* Selects every third element among any group of siblings */
:nth-child(3) {
background: yellow;}
</style>
</head>
<body>
<div><p>This is some text.</p></div>
<div><p>This is some text.</p></div>
<div><p>This is some text.</p></div>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
<li>Fifth list item</li>
</ul>

</body>
</html>
10)What is the use of the box-sizing property in CSS?
The box-sizing property in CSS controls how the total width and height of an
element is calculated. It defines whether the padding and border of the element
should be included in the specified width and height values, or if they should be
added on top of the specified values.

.box {
width: 200px;
In this example, if box-sizing is set to border-box, the total width
height: 100px;
of the .box element will be 200px, including padding and border.
padding: 20px; If it's set to content-box, the width would be 244px (200px + 2 *
20px padding + 2 * 2px border).
border: 2px solid black;
box-sizing: border-box;
}

11) What is the use of the float property in CSS?

The float property in CSS is used to position an element to the left or right within its container,
allowing other elements to flow around it. This property is commonly used for creating layouts
where elements are floated to create columns or wrap text around images.
12) What is the use of the clear property in CSS?
The position property in CSS is used to control the positioning of an element relative to its
containing element or to the viewport.
13) What is the use of the z-index property in CSS?
When elements are positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in
front of, or behind, the others).
14) What is the use of the text-transform property in CSS?
The text-transform property in CSS is used to specify how the text content of an element should
be transformed in terms of capitalization. Lowercase, uppercase.
h1 {
text-transform: uppercase;
}
15) What is the use of the vertical-align property in CSS?
The vertical-align property sets the vertical alignment of an element.

vertical-align: baseline|length|sub|super|top|texttop|middle|bottom|
text-bottom|initial|inherit;

16)What is the use of the overflow property in CSS?

The overflow property in CSS is used to specify how to handle content that exceeds the
dimensions of its container. It controls the behavior of content when it overflows the bounding
box of an element.
Values:
visible: The default value. Overflowing content is not clipped and will be visible outside the
element's box.
hidden: Overflowing content is clipped, and the rest of the content will be invisible.
scroll: Overflowing content is clipped, but a scrollbar is added to allow users to scroll through
the hidden content.
auto: Similar to scroll, but a scrollbar is added only if the content overflows the container.
inherit: Inherits the overflow property from its parent element.
17) What is the use of the visibility property in CSS?
The visibility property in CSS is used to control whether an element is visible or hidden, without
affecting the layout of the document. Unlike display: none, which removes an element from the
document flow, visibility: hidden hides the element but still occupies space in the layout.
Values:
visible: The default value. The element is visible.
hidden: The element is hidden, but it still takes up space in the layout.
collapse: For table rows, columns, and groups, this value hides the element and removes its
space. For other elements, it behaves the same as hidden.
inherit: Inherits the visibility property from its parent element.
18) What is the use of the opacity property in CSS?
The opacity property in CSS is used to set the transparency level of an element. It affects the
entire element, including its content, border, and background, by making it partially or fully
transparent.
Values:
<number>: A value between 0 (fully transparent) and 1 (fully opaque). Fractional values
represent varying levels of transparency.
inherit: Inherits the opacity value from its parent element.
19)What is the use of the transition property in CSS?
The transition property in CSS is used to create smooth animations by specifying the changes
that should occur when CSS properties are changed. It allows you to define the duration, timing
function, and delay for these changes, making it possible to animate elements seamlessly.
Components of the transition Property:
transition-property: Specifies the CSS property or properties to which the transition effect
should be applied.
transition-duration: Defines the duration over which the transition occurs (e.g., 2s for 2
seconds).
transition-timing-function: Describes how the intermediate values of the CSS property being
affected by the transition are calculated (e.g., ease, linear, ease-in, ease-out).
transition-delay: Specifies a delay before the transition starts (e.g., 1s for a 1-second delay).

button {
background-color: blue;
transition: background-
color 0.5s ease-in-out 0s;
}

20)What is the use of the transform property in CSS?

The transform property in CSS is used to apply 2D and 3D transformations to elements. These
transformations can include moving, rotating, scaling, and skewing the elements, allowing for
complex visual effects and animations.
Transform Functions:
translate(x, y): Moves an element from its current position by the specified x (horizontal) and y
(vertical) values.
rotate(angle): Rotates an element around its origin by the specified angle.
scale(x, y): Scales an element by the specified x (horizontal) and y (vertical) factors.
skew(x-angle, y-angle): Skews an element by the specified x and y angles.

div {
transform:
translate(50px, 100px)
rotate(45deg) scale(1.5);
}
21) What is the use of the animation property in CSS?
The animation property in CSS is used to create complex animations by specifying keyframes
and various animation parameters. This property allows elements to transition smoothly between
different styles over a specified duration, providing a rich user experience.

@keyframes
example {
from { transform:
translateX(0); }
to { transform:
translateX(100px); }
}
div {
animation:
example 2s ease-in-out 1s 22) What is a media query in CSS?
infinite alternate;
Media queries enable responsive web design by allowing CSS to
} adapt to various device environments, ensuring an optimal
viewing experience across a wide range of devices.

@media (max-width:
600px) {
body {
background-color:
lightblue;
}
}
23) What is CSS Grid?
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making
it easier to design web pages without having to use floats and positioning.
24) What is CSS Flexbox?
CSS Flexbox, or the Flexible Box Layout, is a layout model in CSS designed to
provide a more efficient way to lay out, align, and distribute space among items
within a container. Flexbox is especially useful for creating responsive web designs,
as it allows items to adjust and distribute space dynamically.

.container {
display: flex;
flex-direction:
row; /* Default value,
aligns items in a row */
justify-content:
center; /* Centers items
horizontally */
align-items:
center; /* Centers items
vertically */ 25) What is the difference between flex and grid?

gap: 10px; /* Flexbox:

Adds a 10px gap between
 One-Dimensional Layout: Handles layout in a single
flex items */
direction (row or column).
}
 Use Cases: Aligning items, distributing space within a
container, responsive navigation bars.

.flex-container {
display: flex;
flex-direction: row; /* or
column */
justify-content: center;
align-items: center;
}

Grid:
 Two-Dimensional Layout: Handles layout in both rows and columns.
  Use Cases: Complex layouts like full-page designs, galleries, dashboards.

.grid-container {
display: grid; Key Differences:

grid-template-columns:  Layout Type: Flexbox is one-dimensional, Grid is two-

repeat(3, 1fr); dimensional.

grid-template-rows: auto;  Primary Use Case: Flexbox for simpler, linear layouts;
Grid for complex, multi-dimensional layouts.
gap: 10px;
}
.item1 {
grid-column: 1 / 3; /*
Spans two columns */
grid-row: 1 / 2; /*
Occupies the first row */
}

26) What is the CSS Sprites?

CSS Sprites are a technique used to reduce the number of HTTP requests for images
on a web page by combining multiple images into a single file. This single image,
often called a sprite sheet, is then referenced and displayed using CSS.

What are the limitations of CSS?

1. CSS cannot always assure compatibility with every browser; you

need to be cautious while choosing the style selector.

2. The parent selector tag is not available, thus you can’t select the
parent selector tag.

3. Some selectors can lead to cross-browser issues due to their less

browser-friendly behavior.

4. We cannot request a webpage through CSS.

What are the differences between adaptive design and responsive design?

 Adaptive Design:

 Main focus is to develop a website in multiple fixed layout sizes.

 Offers good control over the design to develop variation in screens.

 It is very time-consuming and takes a lot of effort to build the best possible
adaptive design as examining it will need to go for many options with
respect to the realities of the end user.

 There are six standard screen sizes for the appropriate layouts; they are
320px, 480px, 760px, 960px, 1200px, 1600px to design.

 Responsive Design

 Main focus is to show content with respect to browser space.

 Offers less control over the design.

 It takes less time to build the design and there is no screen size issue
irrespective of content.

 It uses CSS media queries to design the screen layouts with respect to
specific devices and property changes in the screen.

How does Calc work?

Calc can be used to specify the result of the mathematical operation of two
or more elements. For example to specify the width elements by the addition
of two or more elements, we can write as

.foo {
Width: calc(100px+50px)