|
Question: What is the difference between 'padding' and 'margin' in CSS?
|
Answer: The padding is the space between the content of an element and its border, while margin is the
space between the border of an element and its surrounding elements.
Padding affects the inside of the element, while margin affects the outside.
|
|
Question: How do you create a responsive layout in CSS?
|
Answer: To create a responsive layout in CSS, you can use media queries to apply different styles based on
the screen size or device characteristics. You can also use flexible layout techniques like flexbox and CSS Grid
to create fluid and adaptable layouts that adjust automatically to different screen sizes.
|
|
Question: What are vendor prefixes in CSS, and why are they used?
|
Answer: Vendor prefixes are prefixes added to CSS properties to ensure compatibility with different browsers
during the experimental implementation of new CSS features. Examples include -webkit-, -moz-, -ms-, and -o-.
They are used to target specific browser engines and ensure consistent rendering across different
browsers during the development phase.
|
|
Question: What is the ':hover' pseudo-class in CSS, and how is it used?
|
Answer: The ':hover' pseudo-class in CSS is used to apply styles to an element when it is being
hovered over by the mouse pointer. It is commonly used to create interactive effects, such as changing the color or
appearance of links or buttons when they are hovered over by the user.
|
|
Question: How do you create a CSS animation?
|
Answer: CSS animations are created using the @keyframes rule, which defines the animation's behavior
at various stages. You can then apply the animation to an element using the animation property,
specifying the name of the @keyframes rule, duration, timing function, delay, and other properties as needed.
|
|
Question: What is the CSS 'position: sticky;' property, and how does it work?
|
Answer: The 'position: sticky;' property in CSS is used to make elements stick to a specific position
on the page as the user scrolls.
It behaves like 'position: relative;' until the element reaches a specified threshold
(defined by top, right, bottom, or left values), at which point it becomes 'position: fixed;'.
This property is commonly used for sticky headers or sidebars.
|
|
Question: Can you explain the concept of CSS preprocessors, and name a few popular ones?
|
Answer: CSS preprocessors are tools that extend the functionality of CSS by adding features like
variables, nesting, mixins, and functions. They allow developers to write more maintainable and scalable CSS code.
Some popular CSS preprocessors include Sass, LESS, and Stylus.
|
|
Question: What is the CSS 'box-sizing' property?
|
Answer: The CSS 'box-sizing' property determines how the width and height of an element are calculated,
including any padding and border. It can take two values: content-box (default) and border-box.
|