Scribd
Upload
5 views

CSS Inerview Question and Answer

Uploaded by

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

CSS Inerview Question and Answer

Uploaded by

eonly6080
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


Here are 91 CSS questions that cover a wide range of Q.5] What are the different ways to apply CSS
topics, including theory, concepts, and practical to a web page?
questions. These questions will help you prepare
effectively for an interview also it will teach you many CSS can be applied in three ways:
new concepts. 1. Inline styles: Directly within an HTML element.
2. Internal stylesheets: Within a <style> element in
the <head> section of an HTML document.
Basic CSS 3. External stylesheets: inked to an HTML document
using the <link> element.

Q.1] What does CSS stand for? Q.6] What is an inline style?

• Inline styles are CSS styles applied directly to an


• CSS stands for Cascading Style Sheets.
individual HTML element using the style attribute
Q.2] What is the purpose of CSS?

• CSS is used to style and format the appearance of


Q.7] What is an internal stylesheet?
web pages written in HTML and XML.
• It allows web developers to control aspects like • An internal stylesheet is CSS code written within a
layout, colors, fonts, and spacing of HTML <style> element in the <head> section of an HTML
elements. document.
Q.3] How do you link a CSS file to an HTML • It applies styles to that particular HTML document
only.
document?
Q.8] What is an external stylesheet?
• You can link a CSS file to an HTML document using
the <link> element within the <head> section of the • An external stylesheet is a separate CSS file linked
HTML document. to an HTML document using the <link> element.
• It allows styles to be applied across multiple
HTML documents.

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

Q.4] What is the syntax of a CSS rule?

• A CSS rule consists of a selector and a


declaration block.
✓ 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
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 (+)


✓ Selects the first element that • It is a keyword added to the selectors which will
immediately follows a specified element, allow to style the specific parts of an element’s
and both elements must have the same content.
parent. • Pseudo classes - targets the entire element
• 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?


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

Q.15] What is the CSS box model? • To center an element vertically, you can use

• 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

Flexbox

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 padding and
border are included in the element’s total
Content 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. • Use the border-radius property to create rounded
• Margin: The space outside the border, separating borders
the element from other elements.

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? • Use the border-radius property to create

• To center an element horizontally, you can use the


margin: auto; property for block-level elements

rounded borders
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
static Refer a codepen stays in the same place even when the page is
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


• We can use offsets like like top, right, bottom, and
left Sticky Refer a codepen

Here is the diagram which illustrates the static and • Acts like relative until the element reaches a
relative position specified scroll point, then it "sticks" in place.

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
• If there is no positioned ancestor, the element is • Block - Elements take up the full width
positioned relative to the initial containing block available and start on a new line
(usually the <html> element). • Inline - Elements only take up as much width
• The ancestor can have relative, absolute, fixed, as necessary and do not start on a new line.
or sticky positioning • inline-block - Behaves like inline elements
• It does not work with position static but can have a width and height.
• Flex - Turns the element into a flex container
• grid -Turns the element into a grid container
Q.28] How do you create a flexbox layout? Q.33] What is the font-family property?

• To create a flexbox layout, you set display: flex; on • You specify a fallback font by listing multiple fonts
the parent container and use various properties
like flex-direction, justify-content, align-items,
etc., on the child elements to control their layout.

Q.29] What is the flex property?

• 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 in the font-family property, separated by commas.
available space. Q.34] What is the font-size property?
Q.30] How do you create a grid layout in CSS?
• The font-size property in CSS specifies the size of
• To create a grid layout, you set display: grid; on the font.
the container and define its columns and • It can be set to various units like pixels (px), ems
rows using grid-template-columns, grid- (em), or percentages (%).
template-rows, and place 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 Q.36] How do you change the color of the text?
element?

• Using the font-family property in CSS. • Text alignment can be controlled using the
text-align property.

Q.32] What is the font-family property?

• The font-family property specifies the font family


Colors & Backgrounds
for text.
• It allows you to define a prioritized list of fonts to Q.37] How do you change the color of the text?
use, separated by commas.
• If the first font is not available on the user's • You can set the background color of an
system, it falls back to the next one in the list. 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?

• You can control the repetition of a background


Q.39] How do you set the size of a background image using the background-repeat property.
image? • This prevents the background image from
repeating.
• To set the size of a background image, you can • Other values include repeat, repeat-x, and
use the background-size property in CSS. repeat-y.
Here are some common ways to use it
1. Cover: Scales the background image to cover the
entire element, possibly cropping it to fit.

Q.41] What is the background-position


property?

• Is used to specify the initial position of a


background image within its container
2. Contain: Scales the background image to be fully
• You can set the position using keywords, length
visible within the element, maintaining its aspect
values, or percentages
ratio.
• This property helps in aligning the background
image as desired within the element.

Syntax

• x represents the horizontal position.


• y represents the vertical position.

3. Specific Size: You can set specific dimensions for Common Values
the background image using units like pixels,
percentages, or any other CSS length units.

4. Auto: Maintains the original size of the


background image.
Q.44] How do you create a shadow effect?

• 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

REMEMBER

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

Q.42] How do you create a gradient CSS TRANSITION


background?
Q.46] What is a CSS transition?
• You can create a gradient background using the
background property with a gradient function.
• 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?


Q.43] How do you create a semi-transparent
background? • You create a transition effect using the
transition property.
• You can create a semi-transparent
• It specifies which properties to animate, the
background using the rgba() function in the
duration of the animation, the timing
background-color property.
function, and any delay before the
animation starts.
Q.48] What is the transition-duration Q.52] How do you create a CSS animation?
property?
• You create a CSS animation by defining
• The transition-duration property specifies how keyframes with the @keyframes rule and then
long the transition should take to complete. applying the animation to an element using the
• It can be set in seconds (s) or milliseconds (ms). animation property.

Q.49] What is the transition-timing-function Q.53] What is the @keyframes rule?


property?
• 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
long an animation should take to complete one
• The transition-delay property specifies the
cycle.
amount of time to wait before starting the
• It can be set in seconds (s) or milliseconds (ms).
transition.
• It can be set in seconds (s) or milliseconds (ms). Q.55] What is the animation-timing-function
property?
Example of CSS Transition
• The animation-timing-function property
specifies the speed curve of the animation.
• Common values include linear, ease, ease-in,
ease-out, and ease-in-out.

Refer Advance CSS Animation and Transition git


hub repository

Remember
The syntax for the transition property is as follows

CSS ANIMATION
CSS TRANSFORM
Q.51] What is the transition-delay property?
Q.56] What is the animation-timing-function
• A CSS animation allows you to animate changes property?
to CSS properties over time, using keyframes to
define the changes.
• 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-
skew, or translate an element. axis and 10 degrees along the Y-axis.

Q.57] How do you translate an element using CSS? Q.61] What is the transform-origin property?

• You can translate an element using the • The transform-origin property specifies the point
around which a transformation is applied.

translate() function.
• This moves the element 50 pixels to the right and
100 pixels down. • This rotates the element 45 degrees around its
top-left corner. Refer codepen
Q.58] How do you rotate an element using
CSS? Q.62] How do you apply multiple transforms
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?
Q.59] How do you scale an element using
CSS?
• 3D transforms allow you to manipulate elements
in three-dimensional space.
• You can scale an element using the scale() • Functions like rotateX(), rotateY(), translateZ(),
function. and scaleZ()
• This rotates the element 45 degrees around the X-
axis and 30 degrees around the Y-axis.

Q.60] How do you skew an element using


CSS?
Q.64] What is the perspective property, and
• You can skew an element using the skew() how is it used?
function.
• 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.
• The backface-visibility property determines • It runs in the opposite direction of the main axis
whether the back face of an element is visible • It is used for alignment and spacing of flex items.
when it is rotated • Directions
▪ When flex-direction is row or row-
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? Row column

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


layout module that provides an efficient way to
align and distribute space among items in a
container, even when their size is unknown or
dynamic
Prepared
• Thebymain
– Vinayak Kittad
idea behind | LinkedIn
the flex | Github
layout is to give the Profile| Portfolio
container the ability to alter its items' width,
height, and order to best fill the available
space.
Row-reverse Column-reverse
Q.67] What is the main axis and cross axis in
Flexbox?

• In Flexbox, the main axis and cross axis are


fundamental concepts that determine the layout
and alignment of flex items within a flex container.

Main Axis
Q.68] What is the justify-content property? Q.71] What is the flex-wrap 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

✓ 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
Q.69] What is the align-items property? bottom to top

• The align-items property aligns flex items along


Q.72] What is the align-content property?
the cross axis.
• It can be used to set the default alignment for all • The align-content property aligns flex lines (not
flex item individual items) along the cross axis when there
▪ Stretch is extra space in the container
▪ flex-start • Use align-content when your flex container has
▪ flex-end more than one line of items.
▪ center • Values used are
▪ baseline ✓ Stretch
✓ flex-start
Q.70] What is the flex-direction property? ✓ flex-end
✓ center
✓ space-between
• The flex-direction property specifies the direction ✓ space-around
of the main axis
✓ Row
✓ row-reverse
✓ column
✓ column-reverse
✓ space-evenly • 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?

• You define grid columns and rows using the grid-


template-columns and grid-template-rows
properties.
Source of this image: samanthaming.com
• These properties specify the size and number of
columns and rows in the grid.
Q.73] What is the order property in Flexbox?

• The order property defines the order in which 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 Q.77] What is the grid-template-columns
before those with default order. property?

• The grid-template-columns property defines the


Grid Layout
Q.74] What is CSS Grid Layout?

• CSS Grid Layout is a two-dimensional layout


system for the web
• It allows you to create complex, responsive web number and width of columns in the grid.
layouts more easily and consistently across • You can specify the width using various units like
browsers. pixels (px), percentages (%), fractions (fr), or any
• Grid Layout enables you to align elements into other CSS units.
rows and columns, providing more control over
the design and the position of items

Q.75] How do you create a grid container?

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


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
• Similar to grid-template-columns, you can columns in the grid.
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-
areas property. You can align items in a grid using the following properties:
• You name areas in the grid and then assign
elements to those areas using the grid-area • justify-items: Aligns items horizontally within
property. Refer Codepen 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.
✓ column: Items are placed by column.
✓ dense: Items are placed to fill in gaps.
Q.80] What is the grid-gap property
Q.83] How do you create a responsive grid layout?

• 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 Q.88] What is the @media Rule?
minmax() function can help create flexible grid
structures.

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


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

•
RESPONSIVE
The viewport meta tag is used to control the layout
on mobile browsers.
• It ensures that the web page is rendered correctly

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

Q.87] How to Write a Media Query in CSS

• This example changes the background color to


light blue on devices with a screen width of 600
pixels or less.
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.

😍 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

✓ width
✓ min-width
✓ max-width
✓ height
✓ min-height
✓ max-height
✓ orientation

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.91] Explain how you can make images


responsive using HTML and CSS. Provide an

You might also like