Top 50 CSS Interview Questions with Answers

Post Views: 6

What does CSS stand for?
A. Creative Style Sheets
B. Cascading Style Sheets
C. Continuous Style Sheets
D. Coordinated Style Sheets

Answer: B

Which of the following is not a CSS property?
A. font-style
B. text-transform
C. background-color
D. image-radius

Answer: D

What is the syntax for creating a CSS class?
A. .class_name {}
B. class_name {}
C. #class_name {}
D. ?class_name {}

Answer: A

Which property is used to change the background color of an element?
A. color
B. background-color
C. text-color
D. none of the above

Answer: B

Which property is used to add spacing between lines of text?
A. line-height
B. spacing
C. letter-spacing
D. none of the above

Answer: A

What is the CSS box model?
A. It is a way of describing how elements are displayed on a web page
B. It is a way of describing the layout of a web page
C. It is a way of describing the margins, borders, padding, and content of an element
D. It is a way of describing the colors used on a web page

Answer: C

What is the default display property of a element?
A. block
B. inline
C. inline-block
D. none of the above

Answer: A

Which property is used to add a border to an element?
A. border-style
B. border-size
C. border-color
D. all of the above

Answer: D

Which property is used to change the font of an element?
A. font-family
B. font-size
C. font-style
D. all of the above

Answer: A

Which property is used to create a drop shadow effect on an element?
A. text-shadow
B. box-shadow
C. element-shadow
D. none of the above

Answer: B

What is the default value of the position property?
A. static
B. relative
C. absolute
D. fixed

Answer: A

Which property is used to change the opacity of an element?
A. opacity
B. transparent
C. visibility
D. none of the above

Answer: A

Which property is used to create columns of text on a web page?
A. column-gap
B. column-count
C. column-width
D. all of the above

Answer: D

What is the difference between padding and margin?
A. Padding is the space between an element and its border, while margin is the space between an element and the next element
B. Margin is the space between an element and its border, while padding is the space between an element and the next element
C. Margin is the space between an element and a wall, while padding is the space between an element and a cushion
D. Padding and margin are the same thing

Answer: B

What is the difference between absolute and relative positioning?
A. Absolute positioning positions an element relative to the viewport, while relative positioning positions an element relative to its parent element
B. Absolute positioning positions an element relative to its parent element, while relative positioning positions an element relative to the viewport
C. Absolute positioning positions an element in the center of the page, while relative positioning positions an element to the left or right of the page
D. Relative positioning positions an element in the center of the page, while absolute positioning positions an element to the left or right of the page

Answer: A

Which property is used to align text within an element?
A. text-align
B. text-justify
C. text-indent
D. all of the above

Answer: A

What is the syntax for applying a style to a specific element?
A. element style {}
B. style element {}
C. element {style}
D. style {element}

Answer: C

Which property is used to create an underline effect on text?
A. underline
B. text-underline
C. text-decoration
D. none of the above

Answer: C

Which property is used to create a strikethrough effect on text?
A. strike
B. text-strike
C. text-decoration
D. none of the above

Answer: C

Which property is used to create a bold effect on text?
A. bold
B. font-weight
C. font-style
D. none of the above

Answer: B

Which property is used to create an italic effect on text?
A. italic
B. font-style
C. text-style
D. none of the above

Answer: B

Which property is used to add an image as a background to an element?
A. background-image
B. image-background
C. background-color
D. all of the above

Answer: A

Which property is used to control the amount of white space between words?
A. word-spacing
B. letter-spacing
C. line-height
D. none of the above

Answer: A

Which property is used to add a gradient effect to an element?
A. gradient-effect
B. background-gradient
C. linear-gradient
D. none of the above

Answer: C

Which of the following is not a valid value for the display property?
A. block
B. inline
C. flex
D. side

Answer: D

Which property is used to create an outline around an element?
A. outline-style
B. outline-color
C. outline-width
D. all of the above

Answer: D

Which property is used to change the size of an element?
A. width
B. height
C. both a and b
D. none of the above

Answer: C

What is the difference between em and rem units?
A. Em is relative to the font-size of the parent element, while rem is relative to the font-size of the root element
B. Rem is relative to the font-size of the parent element, while em is relative to the font-size of the root element
C. Em is a fixed size unit, while rem is a variable size unit
D. Rem is a fixed size unit, while em is a variable size unit

Answer: A

Which property is used to center an element horizontally within its container?
A. text-align
B. margin
C. padding
D. none of the above

Answer: A

Which property is used to center an element vertically within its container?
A. vertical-align
B. text-align
C. margin
D. padding

Answer: A

What is the difference between inline and block elements?
A. Block elements take up the full width of their container, while inline elements only take up the space needed by their content
B. Inline elements take up the full width of their container, while block elements only take up the space needed by their content
C. Inline elements are always displayed in a single line, while block elements can be displayed in multiple lines
D. Block elements are always displayed in a single line, while inline elements can be displayed in multiple lines

Answer: A

Which property is used to add spacing between the border and the content of an element?
A. padding
B. margin
C. border-spacing
D. none of the above

Answer: A

Which property is used to add an image to a web page?
A. image-src
B. img-url
C. src
D. all of the above

Answer: C

Which property is used to create a transition effect on an element?
A. transition
B. transition-effect
C. transition-duration
D. all of the above

Answer: A

Which property is used to create an animation effect on an element?
A. animation
B. animation-name
C. animation-duration
D. all of the above

Answer: A

What is the difference between padding-left and padding-right?
A. Padding-left adds space to the left of an element, while padding-right adds space to the right of an element
B. Padding-right adds space to the left of an element, while padding-left adds space to the right of an element
C. Padding-left and padding-right are the same thing
D. None of the above

Answer: A

What is the difference between CSS and HTML?
A. CSS is used to style the layout of a web page, while HTML is used to structure the content of a web page
B. HTML is used to style the layout of a web page, while CSS is used to structure the content of a web page
C. CSS and HTML are the same thing
D. None of the above

Answer: A

Which property is used to change the color of text?
A. color
B. text-color
C. font-color
D. none of the above

Answer: A

What is the difference between a class and an ID in CSS?
A. A class can be applied to multiple elements, while an ID can only be applied to one element
B. A class can only be used once, while an ID can be used multiple times
C. A class is used for styling text, while an ID is used for styling images
D. None of the above

Answer: A

What is the difference between a pseudo-element and a pseudo-class in CSS?
A. A pseudo-element is used to style a part of an element, while a pseudo-class is used to style a state or condition of an element
B. A pseudo-class is used to style a part of an element, while a pseudo-element is used to style a state or condition of an element
C. A pseudo-element and a pseudo-class are the same thing
D. None of the above

Answer: A

Which property is used to add a border-radius to an element?
A. border-radius
B. border-style
C. border-size
D. none of the above

Answer: A

Which property is used to create a shadow effect on text?
A. shadow-effect
B. text-shadow
C. shadow-text
D. none of the above

Answer: B

What is the difference between a child selector and a descendant selector in CSS?
A. A child selector only selects direct children of an element, while a descendant selector selects all children of an element
B. A descendant selector only selects direct children of an element, while a child selector selects all children of an element
C. A child selector and a descendant selector are the same thing
D. None of the above

Answer: A

What is the difference between a relative and absolute unit in CSS?
A. A relative unit is based on another value, while an absolute unit is a fixed value
B. An absolute unit is based on another value, while a relative unit is a fixed value
C. A relative unit and an absolute unit are the same thing
D. None of the above

Answer: A

Which property is used to create a vertical menu on a web page?
A. vertical-menu
B. menu-direction
C. display
D. none of the above

Answer: C

What is the difference between a serif and sans-serif font?
A. Serif fonts have decorative lines at the end of each character, while sans-serif fonts do not
B. Sans-serif fonts have decorative lines at the end of each character, while serif fonts do not
C. Serif and sans-serif fonts are the same thing
D. None of the above

Answer: A

Which property is used to create a gradient colored background on an element?
A. background-gradient
B. linear-gradient
C. color-gradient
D. none of the above

Answer: B

Which property is used to create a transition effect on the color of an element?
A. transition-color
B. transition-style
C. transition-duration
D. none of the above

Answer: A

What is the difference between min-width and max-width in CSS?
A. Min-width sets the minimum width of an element, while max-width sets the maximum width
B. Max-width sets the minimum width of an element, while min-width sets the maximum width
C. Min-width and max-width are the same thing
D. None of the above

Answer: A

What is the difference between display: none; and visibility: hidden; in CSS?
A. Display: none; removes the element from the page, while visibility: hidden; hides the element but keeps it in the page
B. Visibility: hidden; removes the element from the page, while display: none; hides the element but keeps it on the page
C. Display: none; and visibility: hidden; are the same thing
D. None of the above

Answer: A

Author
Recent Posts

Ashwani Kumar

Sr. Software Engineer at Cotocus Private Limited

There is no end to education. It is not that you read a book, pass an examination, and finish with education. The whole of life, from the moment you are born to the moment you die, is a process of learning.