Scribd
Upload
6 views

CSS Inerview Question and Answer

Uploaded by

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

CSS Inerview Question and Answer

Uploaded by

eonly6080
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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