![CSS MCQs Questions Answers [Top 80]](https://www.jobsjaano.com/wp-content/uploads/2024/02/CSS-MCQs-Questions-Answers-Top-80.jpg)
CSS MCQs Questions Answers [Top 80]: We will cover all the MCQs on the same topic.
CSS MCQs with Answers | CSS Quiz | CSS MCQ Questions and Answers PDF
Question 1:
What does CSS stand for?
a) Counter Style Sheet
b) Cascading Style Sheet
c) Computer Style Sheet
d) Creative Style Sheet
Answer: b) Cascading Style Sheet
Question 2:
Which CSS property is used to set the text color of an element?
a) text-color
b) color
c) text-style
d) font-color
Answer: b) color
Question 3:
How can you apply an external CSS file to an HTML document?
a) Using the <style> tag
b) Using the class attribute
c) Using the link tag with the href attribute
d) Using the src attribute
Answer: c) Using the link tag with the href attribute
Question 4:
Which CSS property is used to control the spacing between lines of text?
a) margin
b) line-spacing
c) padding
d) line-height
Answer: d) line-height
Question 5:
What is the default value of the position property in CSS?
a) relative
b) static
c) absolute
d) fixed
Answer: b) static
Question 6:
Which CSS property is used to change the style of the cursor when hovering over an element?
a) mouse-style
b) cursor-style
c) pointer
d) cursor
Answer: d) cursor
Question 7:
What is the purpose of the CSS float property?
a) To align text vertically
b) To create a floating effect for an element
c) To set the background color of an element
d) To control the transparency of an element
Answer: b) To create a floating effect for an element
Question 8:
Which CSS property is used to control the size of an element’s content area, excluding padding and borders?
a) box-sizing
b) content-size
c) width
d) height
Answer: a) box-sizing
Question 9:
In CSS, what does the acronym “CSS3” refer to?
a) Cascading Style Sheet 3
b) Counter Style Sheet Level 3
c) Computer Style Sheet Version 3
d) Creative Style Sheet 3
Answer: a) Cascading Style Sheet 3
Question 10:
How can you select all paragraphs in CSS?
a) p *
b) p
c) paragraph
d) p:nth-child
Answer: b) p
Question 11:
What does the CSS property display: none; do?
a) Makes an element visible
b) Makes an element invisible
c) Adds a shadow to an element
d) Sets the element’s display style to block
Answer: b) Makes an element invisible
Question 12:
Which CSS pseudo-class is used to select and style an element when a user hovers over it?
a) :hover
b) :active
c) :focus
d) :visited
Answer: a) :hover
Question 13:
What is the purpose of the CSS z-index property?
a) To control the vertical stacking order of elements
b) To set the font size of an element
c) To define the order of flex items
d) To specify the order of table columns
Answer: a) To control the vertical stacking order of elements
Question 14:
Which CSS property is used to add rounded corners to an element?
a) border-radius
b) corner-radius
c) rounded-corners
d) box-radius
Answer: a) border-radius
Question 15:
In CSS, how do you set the background color of an element?
a) bg-color
b) color-background
c) background-color
d) bgcolor
Answer: c) background-color
Question 16:
What is the purpose of the CSS property flex-grow?
a) To set the flex basis of a flex container
b) To define the maximum size of a flex item
c) To control the growth factor of a flex item
d) To align a flex item along the cross-axis
Answer: c) To control the growth factor of a flex item
Question 17:
Which CSS property is used to create a shadow effect for text?
a) text-shadow
b) shadow-text
c) box-shadow
d) text-effect
Answer: a) text-shadow
Question 18:
What does the CSS property opacity: 0.5; do?
a) Makes the element transparent
b) Makes the element fully opaque
c) Adds a shadow to the element
d) Sets the element’s visibility to hidden
Answer: a) Makes the element transparent
Question 19:
Which CSS unit is relative to the font-size of the root element?
a) px (pixels)
b) em (em units)
c) % (percentage)
d) rem (root em units)
Answer: d) rem (root em units)
Question 20:
What is the purpose of the CSS property transition?
a) To define the duration and timing function of an animation
b) To set the transition speed of a scrolling element
c) To control the display of an element
d) To define the layout of a webpage
Answer: a) To define the duration and timing function of an animation
Question 21:
What does the CSS property position: absolute; do?
a) Positions the element relative to its normal position
b) Positions the element relative to its parent element
c) Makes the element invisible
d) Centers the element on the page
Answer: a) Positions the element relative to its normal position
Question 22:
Which CSS property is used to change the style of the border of an element?
a) border-style
b) border-color
c) border-width
d) border
Answer: a) border-style
Question 23:
In CSS, what does the box-shadow property do?
a) Adds a shadow to the text of an element
b) Adds a shadow to the background of an element
c) Adds a shadow to the entire box of an element
d) Adds a shadow to the border of an element
Answer: c) Adds a shadow to the entire box of an element
Question 24:
Which CSS property is used to control the visibility of an element?
a) visibility
b) display
c) hidden
d) opacity
Answer: b) display
Question 25:
What is the purpose of the CSS property text-align?
a) Sets the font size of the text
b) Aligns the text vertically
c) Aligns the text horizontally within its container
d) Adds space between lines of text
Answer: c) Aligns the text horizontally within its container
Question 26:
Which CSS property is used to specify the type of list item marker?
a) list-style-type
b) marker-type
c) list-item-style
d) item-marker
Answer: a) list-style-type
Question 27:
What is the purpose of the CSS property overflow?
a) Controls the display of an element’s overflow content
b) Adds a border around an element
c) Sets the background color of an element
d) Defines the spacing between elements
Answer: a) Controls the display of an element’s overflow content
Question 28:
Which CSS property is used to create a transition effect for a specified property?
a) transition-effect
b) animate
c) transition
d) transform
Answer: c) transition
Question 29:
What does the CSS property flex-direction control?
a) The order of flex items
b) The direction of the flex container’s main axis
c) The alignment of flex items
d) The spacing between flex items
Answer: b) The direction of the flex container’s main axis
Question 30:
In CSS, what does the background-size property control?
a) The color of the background
b) The size of the text
c) The size of the element’s border
d) The size of the background image
Answer: d) The size of the background image
Question 31:
Which CSS property is used to set the opacity level for an element?
a) transparency
b) opacity
c) visibility
d) alpha
Answer: b) opacity
Question 32:
What does the CSS property font-weight control?
a) The spacing between characters
b) The size of the font
c) The boldness of the font
d) The color of the font
Answer: c) The boldness of the font
Question 33:
Which CSS property is used to control the space between cells in a table?
a) cell-spacing
b) table-spacing
c) border-spacing
d) cell-margin
Answer: c) border-spacing
Question 34:
What does the CSS property max-width control?
a) The maximum height of an element
b) The maximum width of an element
c) The minimum width of an element
d) The minimum height of an element
Answer: b) The maximum width of an element
Question 35:
Which CSS property is used to set the color of an element’s text?
a) text-color
b) color
c) font-color
d) text-style
Answer: b) color
Question 36:
What does the CSS property box-sizing: border-box; do?
a) Includes padding and border in the element’s total width and height
b) Excludes padding and border from the element’s total width and height
c) Sets the box model to traditional mode
d) Adds padding and border to the element’s content width and height
Answer: a) Includes padding and border in the element’s total width and height
Question 37:
In CSS, what does the transition-timing-function property control?
a) The duration of the transition effect
b) The timing function for the transition
c) The type of transition effect
d) The delay before the transition starts
Answer: b) The timing function for the transition
Question 38:
Which CSS property is used to set the spacing between lines of text?
a) line-spacing
b) line-height
c) text-spacing
d) spacing
Answer: b) line-height
Question 39:
What is the purpose of the CSS property border-radius?
a) Sets the border color of an element
b) Adds a shadow to the border of an element
c) Adds rounded corners to an element
d) Controls the thickness of the element’s border
Answer: c) Adds rounded corners to an element
Question 40:
Which CSS property is used to control the visibility of an element based on the available space?
a) visibility
b) display
c) hidden
d) overflow
Answer: d) overflow
Question 41:
In CSS, what does the flex-wrap property control?
a) The wrapping of flex items within a flex container
b) The order of flex items
c) The size of flex items
d) The direction of the flex container’s main axis
Answer: a) The wrapping of flex items within a flex container
Question 42:
Which CSS property is used to specify the color of the border around an element?
a) border-color
b) color
c) border
d) outline-color
Answer: a) border-color
Question 43:
What does the CSS property text-decoration: underline; do?
a) Sets the font style to underline
b) Adds a line under the element’s content
c) Underlines the text within the element
d) Sets the text decoration color
Answer: c) Underlines the text within the element
Question 44:
In CSS, what does the media query do?
a) Adds media files to the webpage
b) Changes the layout based on the characteristics of the device
c) Adds multimedia content to the webpage
d) Defines the font family for the document
Answer: b) Changes the layout based on the characteristics of the device
Question 45:
Which CSS property is used to set the space between the inner border of an element and its content?
a) padding
b) margin
c) spacing
d) content-spacing
Answer: a) padding
Question 46:
What is the purpose of the CSS property position: relative;?
a) Positions the element relative to its normal position
b) Positions the element relative to its parent element
c) Centers the element on the page
d) Makes the element invisible
Answer: a) Positions the element relative to its normal position
Question 47:
Which CSS property is used to set the style of the cursor when hovering over an element?
a) mouse-style
b) cursor-style
c) pointer
d) cursor
Answer: d) cursor
Question 48:
In CSS, what does the vertical-align property control?
a) The alignment of the element along the horizontal axis
b) The alignment of the element along the vertical axis
c) The spacing between lines of text
d) The size of the element’s content
Answer: b) The alignment of the element along the vertical axis
Question 49:
Which CSS pseudo-class is used to select and style an element when a user clicks on it?
a) :hover
b) :active
c) :focus
d) :visited
Answer: b) :active
Question 50:
What is the purpose of the CSS property transform?
a) To set the transformation speed of an element
b) To rotate or scale an element
c) To control the transparency of an element
d) To define the layout of a webpage
Answer: b) To rotate or scale an element
Question 51:
What does the CSS property flex-shrink control?
a) The flexibility of a flex item to grow
b) The flexibility of a flex item to shrink
c) The spacing between flex items
d) The alignment of flex items
Answer: b) The flexibility of a flex item to shrink
Question 52:
Which CSS property is used to set the style of an element’s border, padding, and content?
a) box-model
b) box-format
c) box-style
d) box
Answer: a) box-model
Question 53:
In CSS, what does the opacity: 1; value indicate?
a) Fully transparent
b) Partially transparent
c) Fully opaque
d) Invisible
Answer: c) Fully opaque
Question 54:
Which CSS property is used to control the space between columns in a multi-column layout?
a) column-width
b) column-gap
c) column-spacing
d) column-margin
Answer: b) column-gap
Question 55:
What is the purpose of the CSS property transition-delay?
a) To define the delay before the transition starts
b) To set the duration of the transition effect
c) To control the timing function of the transition
d) To specify the transition property
Answer: a) To define the delay before the transition starts
Question 56:
Which CSS property is used to create a shadow effect for an element’s border?
a) border-shadow
b) box-shadow
c) border-effect
d) shadow-effect
Answer: b) box-shadow
Question 57:
What does the CSS property text-transform: uppercase; do?
a) Capitalizes the first letter of each word
b) Converts text to lowercase
c) Converts text to uppercase
d) Underlines the text
Answer: c) Converts text to uppercase
Question 58:
In CSS, what does the word-wrap property control?
a) The wrapping of text within an element
b) The spacing between words in a sentence
c) The word spacing in an element
d) The alignment of words within an element
Answer: a) The wrapping of text within an element
Question 59:
Which CSS property is used to set the font size of an element?
a) text-size
b) font-size
c) size
d) font-style
Answer: b) font-size
Question 60:
What is the purpose of the CSS property clear?
a) To set the clear color of an element
b) To clear the margin of an element
c) To clear the float of an element
d) To clear the padding of an element
Answer: c) To clear the float of an element
Question 61:
Which CSS property is used to control the alignment of text within an element?
a) align
b) text-align
c) vertical-align
d) alignment
Answer: b) text-align
Question 62:
What does the CSS property visibility: hidden; do?
a) Makes an element fully opaque
b) Makes an element invisible
c) Adds a shadow to an element
d) Sets the element’s display style to block
Answer: b) Makes an element invisible
Question 63:
Which CSS property is used to set the thickness of an element’s border?
a) border-width
b) border-thickness
c) border-style
d) border-size
Answer: a) border-width
Question 64:
In CSS, what does the font-family property control?
a) The font size of an element
b) The spacing between lines of text
c) The typeface or font family for text
d) The alignment of text within an element
Answer: c) The typeface or font family for text
Question 65:
What is the purpose of the CSS property outline?
a) To set the outline color of an element
b) To add a border around an element’s content
c) To create an outline effect for text
d) To create an outline around an element
Answer: d) To create an outline around an element
Question 66:
Which CSS property is used to control the spacing between characters in text?
a) letter-spacing
b) word-spacing
c) text-spacing
d) character-spacing
Answer: a) letter-spacing
Question 67:
In CSS, what does the margin: 0 auto; property do?
a) Centers the element horizontally
b) Adds margin to all sides of the element
c) Removes the margin from the element
d) Centers the element vertically
Answer: a) Centers the element horizontally
Question 69:
What does the CSS property box-sizing: border-box; do?
a) Includes padding and border in the element’s total width and height
b) Excludes padding and border from the element’s total width and height
c) Sets the box model to traditional mode
d) Adds padding and border to the element’s content width and height
Answer: a) Includes padding and border in the element’s total width and height
Question 70:
Which CSS property is used to create a shadow effect for text?
a) text-shadow
b) shadow-text
c) box-shadow
d) text-effect
Answer: a) text-shadow
Question 71:
What does the CSS property flex-grow control?
a) The order of flex items
b) The direction of the flex container’s main axis
c) The spacing between flex items
d) The growth factor of a flex item
Answer: d) The growth factor of a flex item
Question 72:
In CSS, what does the transition-timing-function property control?
a) The duration of the transition effect
b) The timing function for the transition
c) The type of transition effect
d) The delay before the transition starts
Answer: b) The timing function for the transition
Question 73:
Which CSS property is used to create a transition effect for a specified property?
a) transition-effect
b) animate
c) transition
d) transform
Answer: c) transition
Question 74:
What is the purpose of the CSS property max-width?
a) Sets the maximum height of an element
b) Sets the maximum width of an element
c) Sets the minimum width of an element
d) Sets the minimum height of an element
Answer: b) Sets the maximum width of an element
Question 75:
In CSS, what does the justify-content property control?
a) The alignment of items along the cross-axis in a flex container
b) The alignment of items along the main axis in a flex container
c) The justification of text within an element
d) The spacing between lines of text
Answer: b) The alignment of items along the main axis in a flex container
Question 76:
Which CSS property is used to set the style of the cursor when hovering over an element?
a) mouse-style
b) cursor-style
c) pointer
d) cursor
Answer: d) cursor
Question 77:
In CSS, what does the vertical-align property control?
a) The alignment of the element along the horizontal axis
b) The alignment of the element along the vertical axis
c) The spacing between lines of text
d) The size of the element’s content
Answer: b) The alignment of the element along the vertical axis
Question 78:
What is the purpose of the CSS property text-transform?
a) To transform text into uppercase or lowercase
b) To set the font size of an element
c) To control the visibility of an element
d) To add a shadow effect to text
Answer: a) To transform text into uppercase or lowercase
Question 79:
Which CSS property is used to set the color of an element’s text?
a) text-color
b) color
c) font-color
d) text-style
Answer: b) color
Question 80:
In CSS, what does the object-fit property control?
a) The size of the element’s content
b) The position of the element within its container
c) The fitting behavior for the content inside a replaced element
d) The alignment of text within an element
Answer: c) The fitting behavior for the content inside a replaced element
Question 81:
Which CSS property is used to set the thickness of an element’s border?
a) border-width
b) border-thickness
c) border-style
d) border-size
Answer: a) border-width
Question 82:
In CSS, what does the word-wrap property control?
a) The wrapping of text within an element
b) The spacing between words in a sentence
c) The word spacing in an element
d) The alignment of words within an element
Answer: a) The wrapping of text within an element
Question 83:
What does the CSS property outline: none; do?
a) Adds an outline around an element
b) Removes the outline from an element
c) Sets the outline color of an element
d) Adds a shadow to the outline of an element
**Answer: b) Removes the outline
Question 84:
Which CSS property is used to set the space between lines of text?
a) line-spacing
b) line-height
c) text-spacing
d) spacing
Answer: b) line-height
Question 85:
In CSS, what does the box-sizing: content-box; property do?
a) Includes padding and border in the element’s total width and height
b) Excludes padding and border from the element’s total width and height
c) Sets the box model to traditional mode
d) Adds padding and border to the element’s content width and height
Answer: b) Excludes padding and border from the element’s total width and height
Question 86:
What is the purpose of the CSS property overflow: hidden;?
a) Hides the element’s content that overflows its box
b) Adds a shadow to the element’s content
c) Sets the overflow color of an element
d) Expands the element to fit its content
Answer: a) Hides the element’s content that overflows its box
Question 87:
Which CSS property is used to create a transition effect for an element’s background color?
a) transition-background-color
b) animate
c) transition
d) background-transition
Answer: c) transition
Question 88:
In CSS, what does the visibility: visible; property do?
a) Makes an element fully opaque
b) Makes an element invisible
c) Adds a shadow to an element
d) Sets the element’s display style to block
Answer: a) Makes an element fully opaque
Question 89:
Which CSS property is used to set the spacing between columns in a multi-column layout?
a) column-width
b) column-gap
c) column-spacing
d) column-margin
Answer: b) column-gap
Question 90:
What is the purpose of the CSS property text-decoration: line-through;?
a) Adds a line under the element’s content
b) Underlines the text within the element
c) Strikes through the text within the element
d) Sets the decoration color of the text
Answer: c) Strikes through the text within the element
Question 91:
Which CSS property is used to control the alignment of text within an element?
a) align
b) text-align
c) vertical-align
d) alignment
Answer: b) text-align
Question 92:
In CSS, what does the margin: 0 auto; property do?
a) Centers the element horizontally
b) Adds margin to all sides of the element
c) Removes the margin from the element
d) Centers the element vertically
Answer: a) Centers the element horizontally
Question 93:
What does the CSS property text-transform: capitalize; do?
a) Converts text to uppercase
b) Converts text to lowercase
c) Capitalizes the first letter of each word
d) Adds an underline to the text
Answer: c) Capitalizes the first letter of each word
Question 94:
Which CSS property is used to set the style of the cursor when hovering over a hyperlink?
a) mouse-style
b) cursor-style
c) pointer
d) cursor
Answer: d) cursor
Question 95:
In CSS, what does the font-weight: bold; property do?
a) Sets the font size of an element
b) Controls the thickness of the font
c) Adjusts the spacing between characters
d) Makes the text bold
Answer: d) Makes the text bold
Question 96:
What is the purpose of the CSS property display: flex;?
a) Sets the display style to block
b) Creates a block-level flex container
c) Aligns the text horizontally
d) Makes an element invisible
Answer: b) Creates a block-level flex container
Question 97:
Which CSS property is used to set the background color of an element?
a) bg-color
b) color-background
c) background-color
d) bgcolor
Answer: c) background-color
Question 98:
In CSS, what does the box-shadow property do?
a) Adds a shadow to the text of an element
b) Adds a shadow to the background of an element
c) Adds a shadow to the entire box of an element
d) Adds a shadow to the border of an element
Answer: c) Adds a shadow to the entire box of an element
Question 100:
Which CSS property is used to set the color of an element’s border?
a) border-color
b) color
c) border
d) outline-color
Answer: a) border-color
Question 101:
What does the CSS property text-align: justify; do?
a) Aligns the text to the left
b) Aligns the text to the center
c) Justifies the text, creating even spacing between words
d) Aligns the text to the right
Answer: c) Justifies the text, creating even spacing between words
Question 102:
In CSS, what does the animation property control?
a) The duration of a transition effect
b) The timing function for an animation
c) The type of animation effect
d) The alignment of elements within a container
Answer: c) The type of animation effect
Question 103:
Which CSS property is used to set the style of an element’s border, padding, and content?
a) box-model
b) box-format
c) box-style
d) box
Answer: a) box-model
Question 104:
In CSS, what does the flex-basis property control?
a) The order of flex items
b) The initial size of a flex item
c) The spacing between flex items
d) The growth factor of a flex item
Answer: b) The initial size of a flex item
Question 105:
What does the CSS property overflow: scroll; do?
a) Hides the overflow content
b) Adds a scrollbar when overflow occurs
c) Expands the element to fit its content
d) Removes the overflow content
Answer: b) Adds a scrollbar when overflow occurs
Question 106:
Which CSS property is used to set the height of an element relative to its containing element?
a) height
b) max-height
c) min-height
d) relative-height
Answer: a) height
Question 107:
In CSS, what does the box-sizing: content-box; property do?
a) Includes padding and border in the element’s total width and height
b) Excludes padding and border from the element’s total width and height
c) Sets the box model to traditional mode
d) Adds padding and border to the element’s content width and height
Answer: b) Excludes padding and border from the element’s total width and height
Question 108:
Which CSS property is used to create a transition effect for an element’s background color?
a) transition-effect
b) animate
c) transition
d) background-transition
Answer: c) transition
Question 109:
What is the purpose of the CSS property line-height?
a) Controls the thickness of the lines in an element
b) Sets the height of the text line within an element
c) Adds space between lines of text
d) Adjusts the space between characters
Answer: b) Sets the height of the text line within an element
Question 110:
Which CSS property is used to create a transition effect for a specified property?
a) transition-effect
b) animate
c) transition
d) transform
Answer: c) transition
Question 111:
In CSS, what does the box-shadow property control?
a) Adds a shadow to the text of an element
b) Adds a shadow to the background of an element
c) Adds a shadow to the entire box of an element
d) Adds a shadow to the border of an element
Answer: c) Adds a shadow to the entire box of an element
Question 112:
What does the CSS property text-decoration: underline; do?
a) Sets the font style to underline
b) Adds a line under the element’s content
c) Underlines the text within the element
d) Sets the text decoration color
Answer: c) Underlines the text within the element
Question 113:
Which CSS property is used to control the spacing between lines of text?
a) line-spacing
b) line-height
c) text-spacing
d) spacing
Answer: b) line-height
Question 114:
In CSS, what does the max-width property control?
a) The maximum height of an element
b) The maximum width of an element
c) The minimum width of an element
d) The minimum height of an element
Answer: b) The maximum width of an element
CSS Interview Interview Questions
Basic CSS:
- What is CSS, and what is its primary purpose in web development?
- Explain the difference between inline, internal, and external CSS.
- How can you select an element in CSS? Provide examples of different CSS selectors.
- What is the box model in CSS, and how does it work?
- Describe the difference between
marginandpaddingin CSS. - Explain the concepts of specificity and inheritance in CSS.
- How do you center an element horizontally and vertically in CSS?
- What is the purpose of the
z-indexproperty, and how does it work? - How can you hide an element in CSS without affecting its layout?
- Explain the difference between
position: relative,position: absolute, andposition: fixed.
Responsive Design:
- What is responsive design, and how can it be achieved using CSS?
- Explain the use of media queries in CSS and provide an example.
- What is the purpose of the viewport meta tag in HTML, and how does it relate to responsive design?
- How can you create a responsive navigation menu using CSS?
- Describe the difference between a fluid layout and a fixed layout in the context of responsive design.
Advanced CSS:
- Explain the concept of CSS pre-processors, and name a few popular ones.
- What is the difference between
display: none;andvisibility: hidden;? - Describe the
box-shadowproperty in CSS and provide an example. - What is the purpose of the
transformproperty in CSS, and how can it be used? - Explain the use of CSS animations and transitions. Provide examples.
Browser Compatibility and Performance:
- How can you address cross-browser compatibility issues in CSS?
- What are CSS sprites, and how do they improve website performance?
- Explain the concept of CSS vendor prefixes. When and why are they necessary?
- How can you optimize CSS for faster page loading times?
- What is the purpose of the
will-changeproperty in CSS, and when should it be used?
CSS Interview Interview Questions for freshers
Basic CSS:
- What is CSS, and what is its primary purpose in web development?
- Explain the difference between inline, internal, and external CSS.
- How do you include an external CSS file in an HTML document?
- What is the box model in CSS, and what are its components?
- Describe the difference between margin and padding.
- Explain the difference between block-level and inline elements in CSS.
- How can you center an element horizontally and vertically in CSS?
- What is the importance of the
z-indexproperty in CSS? - What is the purpose of the
floatproperty, and how does it work? - What is the CSS specificity, and how does it affect the application of styles?
Selectors and Styling:
- Explain the difference between a class and an ID in CSS.
- How do you select all paragraphs with a class of “highlight” in CSS?
- What is the child combinator in CSS, and how does it work?
- Describe the difference between
display: block,display: inline, anddisplay: inline-block. - How can you hide an element from the page using CSS?
- What is the purpose of the
!importantdeclaration in CSS? - Explain the difference between
margin: autoandtext-align: centerfor centering an element horizontally. - What is the CSS
nth-childpseudo-class used for? - How can you create a responsive design using CSS media queries?
- Describe the purpose of the
box-shadowproperty in CSS.
Responsive Design and Flexbox:
- Explain the concept of responsive web design and how it can be achieved with CSS.
- What is the purpose of a viewport meta tag in HTML, and how does it affect responsive design?
- How does the CSS Flexbox layout model work, and what are its main properties?
- What is the key difference between Flexbox and Grid layout in CSS?
- How can you make a navigation bar responsive using CSS?
CSS Preprocessors:
- What is a CSS preprocessor, and why might you use one in a project?
- Name a popular CSS preprocessor and explain one of its features.
- How can variables be used in a CSS preprocessor to improve maintainability?
CSS interview questions for experienced professionals
General CSS:
- Explain the CSS box model and its components.
- Discuss the differences between
display: none;,visibility: hidden;, andopacity: 0;. - How does the CSS
z-indexproperty work, and what factors can affect stacking context? - Explain the concept of the CSS specificity hierarchy.
- Discuss the differences between
emandremunits in CSS. - How can you achieve responsive design using CSS media queries?
- Explain the purpose of the CSS
calc()function and provide an example of its use. - Discuss the differences between
inline,block,inline-block, andflexdisplay properties. - What is the significance of the CSS
positionproperty, and how dorelative,absolute,fixed, andstickydiffer? - How can you optimize CSS performance on a web page?
CSS Layout:
- Discuss the differences between CSS Grid and Flexbox layout models. When would you use one over the other?
- Explain the clearfix hack and its use in clearing floated elements.
- How does the CSS
floatproperty work, and what issues can arise when using it for layout? - What are the benefits of using a CSS preprocessor like Sass or Less?
- Explain the concept of a “sticky” position in CSS, and how can it be used for navigation bars or headers?
CSS Transitions and Animations:
- Discuss the differences between CSS transitions and animations. When would you choose one over the other?
- Explain the purpose of the
@keyframesrule in CSS animations. - How can you create a smooth transition effect on a hover state using CSS?
- Discuss the advantages and disadvantages of using CSS animations compared to JavaScript animations.
- Explain how you would optimize CSS animations for better performance.
Responsive Web Design:
- How do you implement a mobile-first approach in CSS?
- Discuss the use of the CSS
viewportmeta tag and its importance in responsive web design. - Explain the differences between adaptive and responsive design.
- What is the purpose of the CSS
flexproperty, and how can it be used for responsive layouts? - How do you handle images in a responsive web design, considering different screen sizes and resolutions?
Related Queries: