CSS interview questions along with their answers.
1. What is CSS?
CSS stands for Cascading Style Sheets and is used to style and format the layout of web pages.
2. What are the different types of CSS?
Inline CSS: Applies style directly within an HTML element.
Internal CSS: Defined within a <style> tag inside the <head> section of an HTML document.
External CSS: Defined in an external .css file and linked to the HTML document using the <link> tag.
3. What is the box model in CSS?
The CSS box model consists of four areas: Content, Padding, Border, and Margin.
4. What is the difference between margin and padding?
Margin: Space outside the element’s border.
Padding: Space between the element's content and its border.
5. What are pseudo-classes in CSS?
Pseudo-classes define a special state of an element, such as :hover, :focus, and :active.
6. What are pseudo-elements in CSS?
Pseudo-elements style specific parts of an element, such as ::before and ::after.
7. What is the difference between id and class selectors?
id: Unique, applies to a single element. Denoted with #.
class: Can apply to multiple elements. Denoted with ..
8. How can you import a CSS file?
Using the <link> tag in HTML or @import inside a CSS file.
9. What is specificity in CSS?
Specificity determines which styles will be applied by assigning weights to selectors. The more specific a selector, the higher its weight.
10. What is the difference between display: block and display: inline?
block: Takes up the full width and starts on a new line.
inline: Takes up only as much width as necessary and doesn't start a new line.
11. What does display: flex do?
It enables flexible box layout, allowing for more control over the alignment and distribution of space among items.
12. How does CSS Flexbox work?
Flexbox is a layout model that allows items within a container to be aligned and distributed along the main axis and cross axis.
13. What is the difference between absolute, relative, fixed, and sticky positioning?
absolute: Positioned relative to the nearest positioned ancestor.
relative: Positioned relative to its normal position.
fixed: Positioned relative to the viewport.
sticky: Toggles between relative and fixed depending on scroll position.
14. What is a CSS grid?
CSS Grid is a two-dimensional layout system that allows for the creation of grid-based designs by defining rows and columns.
15. How do you center a div horizontally and vertically?
Using Flexbox:
display: flex;
justify-content: center;
align-items: center;
Using Grid:
display: grid;
place-items: center;
16. What is the z-index property?
The z-index property controls the stacking order of elements. Elements with a higher z-index are displayed in front of elements with a lower z-index.
17. What is the float property in CSS?
The float property is used to float elements to the left or right, allowing text and inline elements to wrap around them.
18. What is the clear property?
The clear property specifies which sides of an element do not allow floating elements.
19. How can you apply CSS to only specific elements within another element?
You can use descendant or child selectors. For example, div p selects all <p> elements inside a <div>.
20. What is the calc() function in CSS?
The calc() function allows you to perform calculations to determine CSS property values dynamically.
21. What is media query in CSS?
Media queries are used to apply different styles depending on the device's screen size, resolution, or other media features.
22. What is the purpose of the !important rule?
The !important rule forces a particular property value to override any other declarations, regardless of specificity.
23. What are vendor prefixes?
Vendor prefixes are browser-specific prefixes added to CSS properties for experimental or non-standard features. Examples: -webkit-, -moz-, -ms-.
24. What is the @keyframes rule?
The @keyframes rule is used to define animations in CSS by specifying keyframes (or stages) and the styles at each stage.
25. What is the difference between em and rem units?
em: Relative to the font size of the element.
rem: Relative to the font size of the root element (html).
26. What does vw and vh represent in CSS?
vw: Viewport width. 1vw equals 1% of the viewport width.
vh: Viewport height. 1vh equals 1% of the viewport height.
27. How do you hide an element in CSS?
Use display: none or visibility: hidden.
28. What’s the difference between display: none and visibility: hidden?
display: none: Removes the element from the document flow.
visibility: hidden: Hides the element but still takes up space.
29. What is CSS specificity hierarchy?
Inline styles > IDs > Classes/Attributes/Pseudo-classes > Elements/Pseudo-elements.
30. What is min-width and max-width in CSS?
min-width: The minimum width of an element.
max-width: The maximum width of an element.
31. How does the :nth-child() selector work?
The :nth-child() selector allows you to select elements based on their position in a group of siblings.
32. What is the transform property in CSS?
The transform property applies 2D or 3D transformations like scaling, rotating, translating, and skewing elements.
33. What is the purpose of the transition property in CSS?
The transition property allows you to specify how changes to a property should be animated over time.
34. How does @font-face work?
The @font-face rule lets you use custom fonts by specifying their source and applying them to elements on your web page.
35. What is the clip-path property?
The clip-path property allows you to create a clipping region to display only part of an element.
36. What does the object-fit property do?
The object-fit property defines how a replaced element (like an image or video) should be resized to fit its container.
37. What are web safe fonts?
Web safe fonts are fonts that are commonly supported across different platforms and browsers, such as Arial, Times New Roman, and Verdana.
38. How can you create a responsive web design?
Use fluid grids, flexible images, and media queries to create layouts that adapt to various screen sizes.
39. What is a CSS preprocessor?
A CSS preprocessor is a scripting language that extends CSS by allowing variables, nesting, and functions. Examples include SASS, LESS, and Stylus.
40. What is a CSS reset?
A CSS reset removes browser default styling to create a consistent base for custom styles.
41. Explain the difference between inline, block, and inline-block elements.
Inline: Does not start on a new line and only takes up as much space as necessary.
Block: Starts on a new line and takes up the full width.
Inline-block: Behaves like an inline element but allows setting width and height.
42. What is :root in CSS?
:root represents the highest-level parent in the DOM, typically the <html> element, and is often used for defining CSS variables.
43. What is a viewport?
The viewport is the visible area of a web page on the screen.
44. What is the difference between visibility and opacity?
visibility: hidden: Hides the element but retains space.
opacity: 0: Makes the element fully transparent but it still occupies space.
45. What is the CSS float property used for?
It is used to float elements to the left or right, allowing other content to wrap around them.
46. What does position: sticky do?
position: sticky allows an element to act like a relatively positioned element until it reaches a certain scroll position, after which it becomes fixed.
47. What is the line-height property?
The line-height property sets the amount of space between lines of text.
48. What does the white-space property do?
The white-space property controls how whitespace is handled within an element.
49. What are pseudo-elements?
Pseudo-elements allow you to style specific parts of an element, like the first line or first letter.
50. Explain the concept of CSS inheritance.
Certain CSS properties are inherited from parent elements, such as color and font-family.
No comments:
Post a Comment