CSS interview question
Css interview question
1.What is CSS?CSS stands for Cascading Style Sheets. It's a style sheet language used for describing the presentation of a document written in HTML.
CSS can be included in a web page using three methods:
Inline CSS : Using the style attribute within HTML elements.
Internal CSS : Including CSS within <style> tags in the <head> section of an HTML document.
External CSS: Linking an external CSS file using the <link> tag in the <head> section of an HTML document.
3.What is the difference between padding and margin in CSS?
Padding is the space between the content of an element and its border, while margin is the space between an element's border and adjacent elements.
4.Explain the difference between display: block, display: inline, and display: inline-block.
display: block makes an element a block-level element, taking up the full width available and starting on a new line.
display: inline makes an element an inline-level element, allowing other elements to sit to its left and right, but not above or below it.
display: inline-block makes an element an inline-level block container, allowing it to behave like a block-level element while still flowing inline with surrounding content.
5.What is the CSS box model?
The CSS box model is a design principle that describes the space taken up by an element on a web page. It consists of the content area, padding, border, and margin.
6.What is the difference between position: relative, position: absolute, and position: fixed?
position: relative positions an element relative to its normal position in the document flow.
position: absolute positions an element relative to its closest positioned ancestor.
position: fixed positions an element relative to the viewport, so it stays in the same place even when the page is scrolled.
7.What is the purpose of the z-index property in CSS?
The z-index property specifies the stack order of an element. Elements with a higher z-index value will appear above elements with a lower z-index value.
8.What are pseudo-classes in CSS?
Pseudo-classes are keywords added to selectors that specify a special state of the selected element. Common pseudo-classes include :hover, :active, and :focus.
9.What is the purpose of the float property in CSS?
The float property specifies whether an element should float to the left, right, or not at all. Floated elements are removed from the normal document flow and positioned to the left or right of their containing element.
10 .How do you clear floats in CSS?
You can clear floats using the clear property. For example: clear: both; will clear floats from both the left and right sides of an element.
11 .What is the purpose of the @media rule in CSS?
The @media rule allows you to apply different styles for different media types, such as screen, print, or handheld devices. It's commonly used for creating responsive designs.
12.What is the purpose of the flexbox layout model in CSS?
The flexbox layout model provides a more efficient way to layout, align, and distribute space among items in a container, even when their size is unknown or dynamic.
13.What is the purpose of the grid layout model in CSS?
The grid layout model provides a two-dimensional grid-based layout system, allowing you to create complex layouts with rows and columns.
14.What is the purpose of the transition property in CSS?
The transition property allows you to add smooth transitions between different states of an element, such as changes in size, color, or position.
15.What is the purpose of the box-shadow property in CSS?
The box-shadow property adds a shadow effect to an element's box. It takes values for the horizontal and vertical offsets, blur radius, spread radius, and color of the shadow.
Comments
Post a Comment