Scribd
Upload
35 views

CSS Questions

Css interview questions

Uploaded by

nanodix648
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

CSS Questions

Css interview questions

Uploaded by

nanodix648
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

91 CSS

Interview
Question
Sr.No Topic Number of Questions
1 Basic CSS 10
2 Selectors 4
3 CSS Box Model 7
4 Layout 8
5 Typography 7
6 Colors and Backgrounds 9
7 CSS Transition 5
8 CSS Animation 5
9 CSS Transform 10
10 CSS Flex 8
11 Grid Layout 10
12 Responsive Design 8
Total 91

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


Here are 99 CSS questions that cover a wide range of Q.5] What are the different ways to apply CSS
topics, including theory, concepts, and practical
questions. These questions will help you prepare to a web page?
effectively for an interview.
CSS can be applied in three ways:

Basic CSS
1. Inline styles: Directly within an HTML element.
2. Internal stylesheets: Within a <style> element in
the <head> section of an HTML document.
3. External stylesheets: inked to an HTML document
Q.1] What does CSS stand for? using the <link> element.

• CSS stands for Cascading Style Sheets. Q.6] What is an inline style?
Q.2] What is the purpose of CSS? • Inline styles are CSS styles applied directly to an
individual HTML element using the style attribute
• CSS is used to style and format the appearance of
web pages written in HTML and XML.
• It allows web developers to control aspects like
layout, colors, fonts, and spacing of HTML Q.7] What is an internal stylesheet?
elements.
• An internal stylesheet is CSS code written within a
Q.3] How do you link a CSS file to an HTML <style> element in the <head> section of an
document? HTML document.
• It applies styles to that particular HTML document
• You can link a CSS file to an HTML document using only.
the <link> element within the <head> section of
the HTML document. Q.8] What is an external stylesheet?

• An external stylesheet is a separate CSS file


linked to an HTML document using the <link>
• rel – It is used to indicate different relationships element.
between the current document and the linked • It allows styles to be applied across multiple
resource. Some common values are HTML documents.
- stylesheet
Q.9] How do you apply multiple styles to a
- icon
- preload single element?
- alternate
• Multiple styles can be applied to a single element
• type – The type attribute specifies the MIME
by separating each style declaration with a
type of the linked resource.
semicolon within the style attribute (for inline
Q.4] What is the syntax of a CSS rule? styles) or within the CSS rule:

• A CSS rule consists of a selector and a


declaration block.

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


✓ Selects all elements of a specific type
Q.10] What is the difference between a class
selector and an ID selector?

Class selector
• Defined using a dot (.) followed by a class name.
• Classes can be applied to multiple elements, and
one element can have multiple classes.
3. Class Selector (.)
✓ Selects elements with a specific class
attribute

4. ID Selector (#)
ID selector ✓ Selects a single element with a specific
• Defined using a hash (#) followed by an ID name. ID attribute
• IDs are unique within a document and should only
be applied to one element.

5. Attribute Selector
✓ Selects elements based on the presence
or value of an attribute.

Selectors
Q.11] What is a CSS selector?

• A CSS selector is a pattern that is used to select 6. Pseudo-classes


and style HTML elements based on various ✓ Selects elements based on their special
criteria such as element types, IDs, classes, state
attributes, and relationships with other
elements

Q.12] What are the types of CSS Selectors


1. Universal Selector (*)
✓ Selects all elements on the page
7. Pseudo-elements
✓ Selects specific parts of an element's
content

2. Type Selector

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


8. Descendant Selector (space)
✓ Selects elements that are descendants
of another element.

9. Child Selector (>)


✓ Selects elements that are direct children
of another element.

10. Adjacent Sibling Selector (+) • It is a keyword added to the selectors which will
✓ Selects the first element that allow to style the specific parts of an element’s
immediately follows a specified element, content.
and both elements must have the same • Pseudo classes - targets the entire element
parent. • Pseudo elements – targets the specific part of an
element
• Pseudo-elements are written with a double colon
(::)

Here are some common pseudo-elements

11. General Sibling Selector (~)


✓ Selects elements that are siblings of a
specified element.

Q.13] What is a pseudo-class?

• A pseudo-class is a way to style an element in


CSS based on its state or position without
needing extra HTML code.
• Pseudo-classes are particularly useful for
creating interactive and dynamic styles without
needing to manipulate the DOM directly with
JavaScript

Q.14] What is a pseudo-element?

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


CSS BOX MODEL
Q.19] How do you center an element
vertically?

Q.15] What is the CSS box model? • To center an element vertically, you can use
Flexbox
• The CSS box model is a fundamental concept that
describes the rectangular boxes generated for
elements in a web page, which includes the
element's content, padding, border, and margin

Q.20] What is the box-sizing property?

• The box-sizing property defines how the


total width and height of an element are
calculated.
• With box-sizing: border-box; the
Content
padding and border are included in the
element’s total width and height.

Q.16] What are the components of the box


model?

• Content: The actual content of the box, where


text and images appear.
• Padding: The space between the content and the
border. Q.20] How do you create a rounded border?
• Border: The border surrounding the padding (if
any) and content.
• Margin: The space outside the border, separating • Use the border-radius property to create
the element from other elements. rounded borders

Q.17] What is the difference between margin


and padding?

• Margin: Space outside the element's border,


creating space between elements.
• Padding: Space inside the element's border,
creating space between the content and the
border. Q.22] How do you create a border around an
element?
Q.18] How do you center an element
horizontally?

• To center an element horizontally, you can use the


margin: auto; property for block-level
elements

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


• Use the border-radius property to create • If there is no positioned ancestor, the element is
rounded borders positioned relative to the initial containing block
(usually the <html> element).
• The ancestor can have relative, absolute, fixed,
or sticky positioning
• It does not work with position static

LAYOUT
Q.23] What is the position property in CSS?

• The position property in CSS determines how


an element is positioned in a document.
• It can take several values: static, relative,
absolute, fixed, and sticky.
fixed Refer a codepen

Q.24] Different Values of the position Property • Positioned relative to the viewport, meaning it
stays in the same place even when the page is
static Refer a codepen scrolled

• Default positioning
• Elements are positioned according to the normal
flow of the document.
• We can’t use offsets like top, right, bottom,
and left

relative Refer a codepen

• Positioned relative to its normal position


Sticky Refer a codepen
• We can use offsets like like top, right,
bottom, and left • Acts like relative until the element reaches a
specified scroll point, then it "sticks" in place.
Here is the diagram which illustrates the static and
relative position
Q.25] What is the float property?

• Used to position an element to the left or


right within its container , allowing text and
inline elements to wrap around it.
Refer a codepen

Q.26] How do you clear floats in CSS?

• To clear floats and ensure elements below a


floated element are not affected, you can use the
clear property
Refer a codepen
absolute Refer codepen
Q.27] What are the different values of the
• Positioned relative to the nearest positioned display property?
ancestor

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


• Block - Elements take up the full width • Using the font-family property in CSS.
available and start on a new line
• Inline - Elements only take up as much
width as necessary and do not start on a
new line.
• inline-block - Behaves like inline
elements but can have a width and height.
• Flex - Turns the element into a flex
container Q.32] What is the font-family property?
• grid -Turns the element into a grid
container • The font-family property specifies the font family
for text.
Q.28] How do you create a flexbox layout? • It allows you to define a prioritized list of fonts to
use, separated by commas.
• If the first font is not available on the user's
• To create a flexbox layout, you set display: system, it falls back to the next one in the list.
flex; on the parent container and use various
properties like flex-direction, justify-
content, align-items, etc., on the child Q.33] What is the font-family property?
elements to control their layout.
• You specify a fallback font by listing multiple fonts
Q.29] What is the flex property? in the font-family property, separated by commas.

• The flex property is a shorthand for flex-


grow, flex-shrink, and flex-basis
combined, defining how a flex item will
grow or shrink to fit the available space.

Q.30] How do you create a grid layout in CSS?


Q.34] What is the font-size property?
• To create a grid layout, you set display:
• The font-size property in CSS specifies the size of
grid; on the container and define its
the font.
columns and rows using grid-template- • It can be set to various units like pixels (px), ems
columns, grid-template-rows, and place (em), or percentages (%).
items within the grid using grid-column
and grid-row properties. Q.35] How do you change the color of the text?
• Refer codepen
• Text color is changed using the color
property.

TYPOGRAPHY
Q.31] How do you change the font of an
element? Q.36] How do you change the color of the text?

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


• Text alignment can be controlled using the
text-align property.

2. Contain: Scales the background image to be fully


visible within the element, maintaining its aspect
ratio.

3. Specific Size: You can set specific dimensions for


the background image using units like pixels,
percentages, or any other CSS length units.

4. Auto: Maintains the original size of the


background image.
Colors & Backgrounds
Q.37] How do you change the color of the text?

• You can set the background color of an


element using the background-color
property.

5. Multiple Background Sizes: If you have multiple


background images, you can specify sizes for
each one.

Q.38] How do you set a background image?

• You can set a background image using the


background-image property.

Q.40] How do you repeat a background image?


Q.39] How do you set the size of a background
image? • You can control the repetition of a background
image using the background-repeat property.
• To set the size of a background image, you can • This prevents the background image from
use the background-size property in CSS. repeating.

Here are some common ways to use it


1. Cover: Scales the background image to cover the
entire element, possibly cropping it to fit.

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


• Other values include repeat, repeat-x, and Q.42] How do you create a gradient
repeat-y. background?

• You can create a gradient background using the


background property with a gradient function.

Q.41] What is the background-position


property?
Q.43] How do you create a semi-transparent
• Is used to specify the initial position of a background?
background image within its container
• You can set the position using keywords, length • You can create a semi-transparent background
values, or percentages using the rgba() function in the background-color
• This property helps in aligning the background property.
image as desired within the element.

Syntax

• x represents the horizontal position.


• y represents the vertical position. Q.44] How do you create a shadow effect?
Common Values
• You can create a shadow effect using the
box-shadow property for element shadows
or text-shadow for text shadows

• h-offset : The horizontal offset of the shadow


• v-offset: The vertical offset of the shadow
• blur (optional): The blur radius
• spread (optional): The spread radius
• Color (optional): The color of the shadow

Q.45] How do you change the opacity of an


REMEMBER element?

• You can use multiple background images in an • We can change the opacity of an element using
element and position each one as needed using the opacity property
the background-position property.
• This allows for creative and flexible design
options.

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


CSS TRANSITION
Remember
Q.46] What is a CSS transition? The syntax for the transition property is as follows

• A CSS transition allows you to change property


values smoothly (over a given duration) instead of
instantly.

Q.47] How do you create a transition effect? CSS ANIMATION


• You create a transition effect using the transition
property. Q.51] What is the transition-delay property?
• It specifies which properties to animate, the
duration of the animation, the timing function, • A CSS animation allows you to animate changes
and any delay before the animation starts. to CSS properties over time, using keyframes to
define the changes.
Q.48] What is the transition-duration
property? Q.52] How do you create a CSS animation?

• The transition-duration property specifies • You create a CSS animation by defining


how long the transition should take to complete. keyframes with the @keyframes rule and then
• It can be set in seconds (s) or milliseconds (ms). applying the animation to an element using the
animation property.
Q.49] What is the transition-timing-function
property? Q.53] What is the @keyframes rule?

• The @keyframes rule specifies the animation


• The transition-timing-function property
code.
describes how the intermediate values of the
• It defines the styles for the element at various
transition are calculated. points during the animation sequence.
• Common values include linear, ease, ease-in,
ease-out, and ease-in-out.
Q.54] What is the animation-duration
property?
Q.50] What is the transition-delay property?
• The animation-duration property specifies how
• The transition-delay property specifies the long an animation should take to complete one
amount of time to wait before starting the cycle.
transition.
• It can be set in seconds (s) or milliseconds (ms).
• It can be set in seconds (s) or milliseconds (ms).

Q.55] What is the animation-timing-function


Example of CSS Transition
property?

• The animation-timing-function property


specifies the speed curve of the animation.

Refer Advance CSS Animation and Transition git


hub repository

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


• Common values include linear, ease, ease-in, Q.59] How do you scale an element using
ease-out, and ease-in-out. CSS?

• You can scale an element using the scale()


function.

Q.60] How do you skew an element using


CSS?
CSS TRANSFORM
• You can skew an element using the skew()
Q.56] What is the animation-timing- function.
function property?

• The transform property applies a 2D or 3D


transformation to an element.
• This property allows you to rotate, scale, • This skews the element 20 degrees along the X-
axis and 10 degrees along the Y-axis.
skew, or translate an element.

Q.57] How do you translate an element using Q.61] What is the transform-origin property?
CSS?
• The transform-origin property specifies the point
around which a transformation is applied.
• You can translate an element using the
translate() function.

• This rotates the element 45 degrees around its


• This moves the element 50 pixels to the right and
top-left corner. Refer codepen
100 pixels down.

Q.62] How do you apply multiple transforms


Q.58] How do you rotate an element using CSS?
to an element?

• You can apply multiple transforms by chaining


them together.

• You can rotate an element using the rotate()


function.
• This rotates the element 45 degrees clockwise.
Q.63] What are 3D transforms, and how do
you use them?

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


• 3D transforms allow you to manipulate elements align and distribute space among items in a
in three-dimensional space. container, even when their size is unknown or
• Functions like rotateX(), rotateY(), translateZ(), dynamic
and scaleZ() • The main idea behind the flex layout is to give the
container the ability to alter its items' width,
height, and order to best fill the available
space.

Q.67] What is the main axis and cross axis in


• This rotates the element 45 degrees around the X- Flexbox?
axis and 30 degrees around the Y-axis.
• In Flexbox, the main axis and cross axis are
Q.64] What is the perspective property, and fundamental concepts that determine the layout
how is it used? and alignment of flex items within a flex container.

Main Axis
• The perspective property defines the perspective
from which a 3D element is viewed.
• It gives depth to 3D transformed elements. • The main axis is the primary axis along which flex
items are laid out.
• It is defined by the flex-direction property
• Directions
▪ row (default): The main axis runs
horizontally from left to right.
▪ row-reverse: The main axis runs
horizontally from right to left.
▪ column: The main axis runs vertically
from top to bottom.
▪ column-reverse: The main axis runs
vertically from bottom to top.

Cross Axis
Q.65] What is the backface-visibility
property? • The cross axis is perpendicular to the main axis.
• It runs in the opposite direction of the main axis
• The backface-visibility property • It is used for alignment and spacing of flex items.
• Directions
determines whether the back face of an
▪ When flex-direction is row or row-
element is visible when it is rotated reverse, the cross axis runs vertically.
▪ When flex-direction is column or
column-reverse, the cross axis runs
horizontally.

Refer the below figure

▪ Red Arrow ---- Main Axis


▪ Black Arrow --- Cross Axis

CSS FLEX
Q.66] What is Flexbox?

• Flexbox, or the Flexible Box Layout, is a CSS


layout module that provides an efficient way to

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


Q.69] What is the align-items property?
Row column
• The align-items property aligns flex items along
the cross axis.
• It can be used to set the default alignment for all
flex item
▪ Stretch
▪ flex-start
▪ flex-end
▪ center
▪ baseline

Row-reverse Column-reverse

Q.68] What is the justify-content property?

• The justify-content property aligns flex items


along the main axis of the container.
• It distributes space between and around content
items, with possible values:
▪ flex-start
▪ flex-end
▪ space-between
▪ space-around
▪ space-evenly
Q.70] What is the flex-direction property?

• The flex-direction property specifies the direction


of the main axis
✓ Row
✓ row-reverse
✓ column
✓ column-reverse

Q.71] What is the flex-wrap property?

✓ The flex-wrap property determines whether flex


items are forced into a single line or can wrap onto
multiple lines
✓ Common values are
▪ Nowrap : Wrap in single line
▪ Wrap : Multiple line wrapping
▪ wrap-reverse: Wrap in Multiple line
from bottom to top

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


Q.72] What is the align-content property?
Grid Layout
• The align-content property aligns flex lines (not
individual items) along the cross axis when there Q.74] What is CSS Grid Layout?
is extra space in the container
• Use align-content when your flex container has
more than one line of items. • CSS Grid Layout is a two-dimensional layout
• Values used are system for the web
✓ Stretch • It allows you to create complex, responsive web
✓ flex-start layouts more easily and consistently across
✓ flex-end browsers.
✓ center • Grid Layout enables you to align elements into
✓ space-between rows and columns, providing more control over
✓ space-around the design and the position of items
✓ space-evenly
Q.75] How do you create a grid container?

• To create a grid container, you use the display


property with a value of grid or inline-grid on the
container element.

Q.76] How do you define grid columns and


rows?
Source of this image: samanthaming.com
• You define grid columns and rows using the grid-
Q.73] What is the order property in Flexbox? template-columns and grid-template-rows
properties.
• These properties specify the size and number of
• The order property defines the order in which
columns and rows in the grid.
flex items are displayed within the flex container.
• By default, items have an order of 0, but this can
be changed to rearrange the items

Note:

✓ Lower values of order appear first, higher values


appear later.
✓ Negative values can be used to move items
before those with default order.

Q.77] What is the grid-template-columns


property?

• The grid-template-columns property defines the


number and width of columns in the grid.

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


• You can specify the width using various units like
pixels (px), percentages (%), fractions (fr), or any
other CSS units.

Q.78] What is the grid-template-rows


property? Q.80] What is the grid-gap property

• The grid-template-rows property defines the • The grid-gap property (now commonly referred to
number and height of rows in the grid. as gap) defines the spacing between rows and
columns in the grid.
• Similar to grid-template-columns, you can
specify the height using various units.

• It can take one or two values: one for both row


and column gap, or two values where the first is
the row gap and the second is the column gap.
Q.79] How do you create grid areas?
Q.81] How do you align items in a grid?
• Grid areas are defined using the grid-template-
You can align items in a grid using the following properties:
areas property.
• You name areas in the grid and then assign
elements to those areas using the grid-area • justify-items: Aligns items horizontally
property. Refer Codepen within their grid area.
• align-items: Aligns items vertically within their
grid area.
• place-items: A shorthand for setting both
justify-items and align-items.

Q.82] What is the grid-auto-flow property?

• The grid-auto-flow property controls how the


auto-placement algorithm works, specifying how
auto-placed items are inserted in the grid.
• It can take the following values:
✓ row (default): Items are placed by row.

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


✓ column: Items are placed by column. • They can be used to apply styles based on these
✓ dense: Items are placed to fill in gaps. conditions.

Q.83] How do you create a responsive grid layout? Q.87] How to Write a Media Query in CSS

• To create a responsive grid layout, you can use


media queries and relative units like percentages
(%) or fractions (fr).
• Additionally, the repeat() function and the
minmax() function can help create flexible grid
structures.
• This example changes the background color to
light blue on devices with a screen width of 600
pixels or less.

Q.88] What is the @media Rule?

• The @media rule in CSS is used to define a block


• auto-fit : Automatically fit as many columns as of CSS rules that will apply only if certain
possible in the available space. conditions are true, such as a minimum or
• minmax(150px, 1fr) : Each column should be at maximum width of the viewport.
least 150px wide but can grow to fill available
space (1fr) Q.89] What is the Viewport Meta Tag, and Why
is it Important?

RESPONSIVE • The viewport meta tag is used to control the layout


on mobile browsers.
DESIGN • It ensures that the web page is rendered correctly
on all devices by setting the viewport width to the
device width.
Q.84] What is Responsive Design?

• Responsive design is an approach to web design


that ensures web pages render well on a variety of
devices and window or screen sizes

Q.85] How do you create a responsive layout


using CSS? Q.90] Explain @media only screen and (max-
width: 600px)

• Use percentage-based widths for layout elements


rather than fixed pixel values • Only: This keyword is used to hide stylesheets
• Ensure images can scale within their containing from older browsers that do not support media
elements by using max-width: 100% queries. It's a way to ensure that the media query
will only apply in browsers that understand the
• Apply different styles based on the screen size or
media query syntax.
device characteristics
• Screen: This is a media type that targets screens,
such as computer monitors, tablets,
Q.86] What Are Media Queries? smartphones, etc.
• (max-width: 600px): This condition applies the
• Media queries are a CSS feature that allows styles within the media query if the viewport width
content rendering to adapt to different conditions is 600 pixels or less.
such as screen size, resolution, or orientation.

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio


😍 REMEMBER

Media Types

Media types specify the general category of the device or


rendering context

✓ all
✓ print
✓ screen
✓ speech

Media Features

Media features describe specific characteristics of the


user agent, output device, or environment:
Here are the few of them
To refer to more notes, please check the below links
✓ width
✓ min-width ✓ Click here for githubProfile
✓ max-width ✓ Click here for Portfolio
✓ height ✓ Click here for 99-CSS-Interview-Question
✓ min-height ✓ Click here for 99-HTML-Interview-Question
✓ max-height
✓ orientation
Follow me on linkedIn
Combining Media Queries

Media queries can be combined using logical operators

✓ and: Combines multiple media features.


✓ not: Negates a media query.
✓ only: Applies styles only if the entire query
matches

Q.991] Explain how you can make images


responsive using HTML and CSS. Provide an
example demonstrating different techniques
such as the srcset attribute in HTML and
CSS properties.

• The srcset attribute allows you to specify


different images for different device widths,
improving performance by serving the most
appropriate image size
• In this example
✓ srcset specifies different image files for
various widths (300w, 768w, 1200w)
✓ sizes defines the image display sizes
based on the viewport width.
✓ src provides a fallback image for
browsers that do not support srcset.

Prepared by – Vinayak Kittad | LinkedIn | Github Profile| Portfolio

You might also like