1. What is CSS?
CSS stands for Cascading Style Sheets. It is a style sheet language that is used for describing the presentation of a document written in HTML or XML. Mainly CSS is used to design the layout of the webpage and it describes where and which element will be placed on the web page.
2. What are the advantages of CSS?
- Separation of content from presentation.
- Consistency across multiple pages.
- Easy maintenance and updating.
- Bandwidth efficiency by reducing file size.
- Better control over layout and styling.
3. Explain the box model in CSS?
The CSS box model describes the rectangular boxes that are generated for elements in the document tree. It consists of content, padding, border, and margin. And in web browser when we see box model it also displays the space taken by the element.
4. What are the different CSS selectors?
In CSS there are multiple type of selector and there selectors are: Type selectors, class selectors, ID selectors, descendant selectors, adjacent sibling selectors, attribute selectors, pseudo-classes, and pseudo-elements.
5. What is the difference between display: none; and visibility: hidden;?
- display: none:- The display:none property removes the element from the document flow, and it does not take up any space means it also remove the space of the element from the document.
- visibility: hidden:- This property is used to hide the element from the document, but it still occupies the space it would take up if it were visible.
6. What is a pseudo-class in CSS?
A pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
For example: i) :hover- It works when a user hover on the HTML element., ii) :active- It works when element is on it’s active state, iii) :focus- It work when user focus on HTML and it’s mainly used in input tags.
7. What is the difference between em and rem units in CSS?
emunits are relative to the font size of the element itself.remunits are relative to the font size of the root element (<html>).
8. What is the purpose of the box-shadow property in CSS?
The box-shadow property is used to add shadow effects around an element’s frame. We can set shadow on HTML element in x-axis and y-axis. And we can also set the blur and opacity of shadow.
9. What is the CSS :nth-child() pseudo-class used for?
In CSS the :nth-child() is used to select elements based on their position among a group of siblings.
10. What is the difference between padding and margin in CSS?
paddingis the space between the content of an element and its border.marginis the space outside the border of an element.
11. Explain the CSS @media rule.
The @media rule is used to apply different styles for different media types/devices. It allows you to specify a set of CSS rules to be applied only if a certain condition is true, such as screen size.
12. What is the CSS transition property used for?
The transition property is used to create smooth transitions between two states of an element. And we can also set the transition time.
13. What is the purpose of the CSS flexbox layout model?
The flexbox layout model is used to create flexible layouts where items within a container can be dynamically arranged in any direction and order. The flexbox property is mainly used to create responsive web design.
14. What is the difference between inline, inline-block, and block display properties?
inlineelements do not start on a new line and only take up as much width as necessary.inline-blockelements are laid out as inline boxes but behave as block-level elements.blockelements start on a new line and take up the full width of the device.
15. What is the purpose of the CSS position property?
The position property specifies the positioning method of an element (static, relative, absolute, fixed, or sticky).
16. What is the CSS opacity property used for?
The opacity property is used to set the transparency level of an element and its child elements. In CSS opacity value 1 means the element will be completely visible and 0 means the element will not be visible.
17. How can you make an image responsive in CSS?
We can make the image responsive by setting the max-width property of the image to 100% and ensuring that its parent container’s width is flexible (e.g., using percentage or viewport units).
18. What is the difference between absolute and relative positioning in CSS?
absolutepositioning positions an element relative to its nearest positioned ancestor. If there is no positioned ancestor, it is placed relative to the initial containing block.relativepositioning positions an element relative to its normal position in the document flow.
19. What is the purpose of the CSS transform property?
The transform property allows you to apply transformations (e.g., translate, rotate, scale) to elements in 2D or 3D space.
20. What is the purpose of the clip-path property in CSS?
The clip-path property is used to clip elements to a specific shape, defined by a path.
21. What is the purpose of the box-sizing property in CSS?
The box-sizing property is used to specify how the total width and height of an element are calculated, including its padding and border.
22. Explain the CSS grid layout model?
The grid layout model is a two-dimensional layout system that allows you to create complex grid-based layouts with rows and columns.
23. How do you define a grid container in CSS?
You define a grid container by setting the display property of an element to grid or inline-grid.
24. What is the purpose of the auto-fill and auto-fit keywords in CSS Grid?
auto-fill creates as many tracks as possible without overflowing the container, while auto-fit creates tracks to fill the available space, potentially collapsing empty tracks.
25. What is the purpose of the grid-template-areas property?
The grid-template-areas property allows you to define named grid areas in the grid layout, making it easier to visually understand and manage the layout.
26. What is Flexbox?
Flexbox is a one-dimensional layout model in CSS designed to provide a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic.
27. How do you create a responsive layout using Flexbox?
By combining Flexbox properties with media queries, you can create layouts that adapt to different screen sizes and devices.
28. How do you align flex items within a flex container?
You can align flex items using properties like justify-content (for horizontal alignment) and align-items (for vertical alignment) on the flex container.
29. What are the main properties used to create a flex container in CSS?
The main properties are flex-direction, justify-content, align-items, and flex-wrap.
30. What is the purpose of the align-self property in Flexbox?
The align-self property allows you to override the align-items property for individual flex items, aligning them along the cross axis of the flex container.