1. What is CSS?
CSS stands for Cascading Style Sheets. It is used to define the layout, colors, fonts, and overall presentation of web pages.
2. What are the different ways to apply CSS to a web page?
CSS can be applied in three ways: inline, internal (within <style> tags in the <head> section), and external (linking to a separate .css file with the <link> tag).
3. What is the box model in CSS?
The box model in CSS describes how the elements on a webpage are structured. It consists of content, padding, border, and margin.
4. What is the difference between padding and margin in CSS?
Padding is the space between the content and the border, whereas margin is the space outside the border between the element and other elements.
5. What are CSS selectors?
CSS selectors are patterns used to select and style HTML elements. Common types include element selectors, class selectors, and ID selectors.
6. What is the difference between a class and an ID selector?
An ID selector is unique, meaning it can be used only once per page. A class selector can be used on multiple elements.
7. What is the importance of the <link> tag in CSS?
The <link> tag is used to link an external CSS file to an HTML document. This allows you to separate content (HTML) and presentation (CSS).
8. What is a pseudo-class in CSS?
A pseudo-class is used to define the special state of an element, such as &:hover, &:active, &:focus.
9. What is the difference between <span> and <div>?
<span> is an inline element, typically used for styling small portions of content, while <div> is a block-level element used for grouping content.
10. What are CSS properties?
CSS properties are the individual aspects of an element that you can style. For example, <color>, <font-size>, <margin> are CSS properties.
11. What is the CSS float property?
The float property allows elements to be taken out of the normal flow of the document and be aligned to the left or right side of their container.
12. What is the difference between position: absolute, relative, fixed, and sticky?
absolute: positioned relative to its nearest positioned ancestor. relative: positioned relative to its normal position. fixed: positioned relative to the viewport. sticky: behaves like relative until the viewport reaches a defined scroll position, then acts like fixed.
13. What is CSS flexbox?
Flexbox is a CSS layout model that provides an efficient way to align and distribute space among items in a container, even when their size is unknown or dynamic.
14. What is the difference between inline, block, and inline-block elements?
Inline elements do not start a new line and only take up as much width as necessary. Block elements take up the full width and start on a new line. Inline-block elements behave like inline elements but can have width and height.
15. What are media queries in CSS?
Media queries allow you to apply different styles based on the device's screen size, resolution, or other features. It's used for responsive design.
16. What is the difference between rem and em units?
Both rem and em are relative units. em is relative to the parent element's font size, while rem is relative to the root element's font size.
17. What is the z-index property?
The z-index property controls the stacking order of elements that overlap. Higher values are displayed on top of lower values.
18. What is a CSS grid?
CSS grid is a two-dimensional layout system for the web. It allows you to create complex layouts with rows and columns, making it easier to align and position items.
19. What is a CSS transition?
CSS transitions allow you to change property values smoothly over a given duration when an element's state changes.
20. What is a CSS animation?
CSS animations allow elements to gradually change from one style to another using keyframes, without the need for JavaScript.
21. What are pseudo-elements in CSS?
Pseudo-elements are used to style specific parts of an element, like ::before, ::after, ::first-letter, and ::first-line.
22. What is the difference between display: none and visibility: hidden?
display: none completely removes the element from the document flow, while visibility: hidden makes the element invisible but still takes up space in the layout.
23. What are the benefits of using external CSS?
External CSS helps in separating content from presentation, reusability across multiple pages, easier maintenance, and faster loading by caching stylesheets.
24. What is the purpose of the clear property?
The clear property is used to control the behavior of elements following floated elements. It prevents elements from flowing around them.
25. What are shorthand properties in CSS?
Shorthand properties allow you to specify multiple values for a property in a single declaration. For example, <margin> can be written as margin: 10px 20px 30px 40px.
26. What is the difference between border-box and content-box in the box-sizing property?
In content-box, padding and border are added to the element’s width and height, while in border-box, padding and border are included within the element’s width and height.
27. What are the different CSS positioning methods?
The CSS positioning methods include static, relative, absolute, fixed, and sticky. Each method defines how an element is positioned on the page.
28. What is the difference between transform and transition?
Transform is used to change the visual appearance of an element, like moving, rotating, scaling, or skewing it, while transition is used to create smooth animations between states.
29. What are the uses of the ::after pseudo-element?
The ::after pseudo-element is used to insert content after an element, typically used to add decorative elements like icons or text without adding extra HTML.
30. What is the purpose of the opacity property in CSS?
The opacity property defines the transparency level of an element. A value of 1 means fully opaque, and a value of 0 means fully transparent.
31. What is the purpose of the CSS display property?
The display property defines how an element is displayed on the page. Common values include block, inline, inline-block, and none.
32. How can you center a block element in CSS?
You can center a block element by setting the left and right margins to auto and giving the element a fixed width.
33. What is a CSS reset, and why is it used?
A CSS reset is used to normalize or remove the default styling applied by browsers, ensuring a consistent baseline across different browsers.
34. What is the difference between :nth-child and :nth-of-type?
:nth-child selects elements based on their position within a parent, regardless of type. :nth-of-type only selects elements of the specified type (e.g., div, p, etc.) based on their position.
35. What is the purpose of the CSS overflow property?
The overflow property controls what happens when content overflows its container. It can be set to values like visible, hidden, scroll, or auto.
36. What is the difference between a pseudo-class and a pseudo-element?
A pseudo-class is used to define the state of an element (e.g., :hover), while a pseudo-element is used to style a specific part of an element (e.g., ::before).
37. How do you use the CSS calc() function?
The calc() function allows you to perform mathematical calculations within CSS properties, such as widths or margins.
38. What is the use of the z-index property?
The z-index property specifies the stacking order of elements. Higher z-index values are placed in front of elements with lower z-index values.
39. What is the difference between an inline-block element and a block element?
An inline-block element behaves like an inline element, but it can have width and height, while a block element takes up the entire width of its container and starts on a new line.
40. What are vendor prefixes in CSS?
Vendor prefixes are used to add browser-specific prefixes to properties for compatibility with different browsers, like -webkit-, -moz-, or -ms-.
41. What is a CSS custom property (CSS variable)?
A CSS custom property (or CSS variable) allows you to define reusable values in CSS and can be dynamically changed using JavaScript.
42. What are the differences between CSS Grid and CSS Flexbox?
CSS Grid is used for two-dimensional layouts, with both rows and columns, while CSS Flexbox is used for one-dimensional layouts, aligning items either in rows or columns.
43. What is the difference between font-weight: bold and font-weight: bolder?
font-weight: bold applies a fixed bold weight, while font-weight: bolder increases the weight relative to the parent element's font weight.
44. What is the use of the CSS cursor property?
The cursor property is used to specify the type of cursor to be displayed when the mouse pointer is over an element (e.g., pointer, text, wait).
45. What is a CSS sprite?
A CSS sprite is a single image that contains multiple images, which are displayed using CSS by adjusting the background position.
46. What are the different types of background-image values in CSS?
You can use URLs, gradients, and other image types (such as repeating images) for background-image values.
47. How can you make a website responsive?
A website can be made responsive using media queries, flexible grid layouts, and flexible images to adjust the layout based on the device's screen size.
48. How do you use the CSS :focus pseudo-class?
The :focus pseudo-class is used to style elements when they receive focus, such as input fields or buttons when clicked or navigated to using the keyboard.
49. What is the difference between min-width and max-width?
min-width defines the minimum width of an element, while max-width defines the maximum width. These properties are often used for responsive design.
50. What are the benefits of using CSS pre-processors like Sass or Less?
CSS pre-processors offer features like variables, mixins, nesting, and more, allowing for more maintainable and efficient CSS code.