Top 100 CSS Interview Questions and Answers

CSS Interview Questions
Contents show

1. What is CSS?

Answer: CSS, or Cascading Style Sheets, is a powerful language used for describing the visual presentation of web pages. It enables developers to control layout, colors, typography, and more, ensuring a consistent and visually appealing experience across different devices and browsers.


2. How do you include CSS in an HTML document?

Answer: To incorporate CSS into an HTML document, you can use the <link> element within the <head> section. This is achieved by specifying the rel attribute as “stylesheet” and providing the path to the CSS file in the href attribute. This method efficiently separates content from design, promoting better maintainability and reusability of styles.


3. Explain the difference between class and ID selectors.

Answer: Class and ID selectors are fundamental concepts in CSS. Class selectors (.class) are used to target multiple elements that share the same class attribute, allowing consistent styling across different parts of a webpage. Conversely, ID selectors (#id) are employed to uniquely identify and style a specific element. While classes encourage reusability, IDs are intended for singular instances.


4. What is the CSS box model?

Answer: The CSS box model is a critical concept that defines the structure and layout of elements on a web page. It encompasses four components: content, padding, border, and margin. The total width or height of an element is calculated by combining these components. Proper understanding of the box model is essential for accurate layout and spacing control.


5. How can you center an element horizontally?

Answer: To horizontally center an element, the margin: 0 auto; property is often employed. This technique evenly distributes margins on the left and right sides of the element, pushing it to the center of its containing element. This approach is particularly useful for creating balanced and aesthetically pleasing layouts.

.center-element {
  margin: 0 auto;
}

6. What’s the difference between inline and block elements?

Answer: The distinction between inline and block elements lies in their behavior and display characteristics. Inline elements, such as spans and links, do not create line breaks and only occupy the necessary width to accommodate their content. On the other hand, block elements, like divs and headings, generate line breaks before and after themselves and expand to fill the available width of their parent container.

.inline-element {
  display: inline;
}

.block-element {
  display: block;
}

7. How can you hide an element in CSS?

Answer: Hiding elements is often achieved using the display: none; property. This style declaration effectively removes the element from the page’s rendering flow, resulting in its absence on the visible page. It’s crucial to note that this technique can impact layout and interactions, and alternative methods like opacity and visibility may be more appropriate in some scenarios.

.hidden-element {
  display: none;
}

8. What is a pseudo-class?

Answer: Pseudo-classes are selectors that target specific states of elements that cannot be targeted using ordinary class or ID selectors. For instance, :hover applies styles when a user’s mouse hovers over an element, enhancing interactivity and user experience. Pseudo-classes extend the range of styling possibilities beyond static elements.

a:hover {
  color: blue;
}

9. Explain the float property.

Answer: The float property is utilized to manipulate the positioning of elements within their containing element. When an element is floated, it is moved to the left or right, allowing text and other elements to wrap around it. While initially used for creating multi-column layouts, modern layout techniques like Flexbox and CSS Grid have largely superseded the need for excessive use of the float property.

.float-left {
  float: left;
}

.float-right {
  float: right;
}

10. How can you style only the first-child element?

Answer: To style only the first child element of a parent, the :first-child pseudo-class can be applied. This selector effectively targets the initial child element, allowing developers to apply unique styles or modifications to establish visual hierarchies or distinctions within a set of sibling elements.

.parent :first-child {
  font-weight: bold;
}

11. What’s the difference between margin and padding?

Answer: Margin and padding are both fundamental properties that influence spacing and layout, yet they operate at different points within an element’s layout. Margin defines the space outside an element, creating a gap between neighboring elements. In contrast, padding defines the space between an element’s content and its border, effectively determining the internal space of an element.

.element-with-margin {
  margin: 10px;
}

.element-with-padding {
  padding: 10px;
}

12. How do you create a gradient background?

Answer: Creating a gradient background involves utilizing the background-image property and the linear-gradient() function. This function generates a gradual transition between two or more colors along a linear gradient. By specifying the direction and color stops, developers can achieve visually appealing gradient effects that enhance the aesthetics of elements or entire sections of a webpage.

.gradient-background {
  background-image: linear-gradient(to bottom, #ff0000, #00ff00);
}

13. What is the z-index property used for?

Answer: The z-index property plays a pivotal role in the stacking order of elements within a webpage’s layout. Elements with higher z-index values are positioned in front of elements with lower values. This property is essential when managing overlapping elements, such as dropdown menus or modals, to ensure proper visibility and avoid unintended occlusion of content.

.higher-z-index {
  z-index: 2;
}

.lower-z-index {
  z-index: 1;
}

14. How can you style links that have been visited?

Answer: To style visited links differently from regular links, the :visited pseudo-class can be employed. By defining distinct styles for visited links, designers and developers can enhance the user experience by providing visual feedback on previously visited pages, ensuring clear navigation and reducing user confusion.

a:visited {
  color: purple;
}

15. What is a CSS selector specificity?

Answer: Selector specificity is a concept that determines the priority


16. How can you vertically align content?

Answer: Vertical alignment can be achieved using the vertical-align property. However, it’s important to note that this property primarily applies to inline or inline-block elements within a line of text. For aligning block-level elements, other techniques like Flexbox or CSS Grid are recommended.

.inline-element {
  vertical-align: middle;
}

17. What is the box-sizing property used for?

Answer: The box-sizing property controls how the total width and height of an element are calculated. The default value, content-box, considers only the content and padding in the calculation. By setting it to border-box, padding and border are included in the width and height calculation, preventing layout issues when adding borders or padding.

.box-sizing-element {
  box-sizing: border-box;
}

18. How can you create a responsive design?

Answer: Responsive design involves crafting web pages that adapt gracefully to different screen sizes and devices. Media queries, achieved with the @media rule, play a crucial role in creating responsive layouts. By specifying breakpoints and adjusting styles accordingly, developers can ensure a seamless user experience across a variety of devices.

@media (max-width: 768px) {
  .responsive-element {
    font-size: 14px;
  }
}

19. Explain the position property.

Answer: The position property determines the positioning method used for an element. The values include static (default), relative, absolute, fixed, and sticky. Elements with relative positioning are shifted from their normal position while maintaining the flow. Absolute positions elements relative to the nearest positioned ancestor or the viewport. Fixed elements are positioned relative to the viewport, and sticky elements are based on the user’s scroll position.

.relative-position {
  position: relative;
}

20. How can you create CSS animations?

Answer: CSS animations can be created using the @keyframes rule along with the animation property. By defining keyframes at specific percentages and applying them to an element, developers can achieve various animations, such as fading, sliding, or rotating elements. This reduces the need for JavaScript animations and enhances performance.

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animated-element {
  animation: fade 2s ease-in-out;
}

21. What is the purpose of the transform property?

Answer: The transform property enables developers to apply various transformations to elements, such as rotations, translations, scaling, and skewing. This property enhances visual effects and layout capabilities without affecting the element’s position in the layout flow. It’s particularly useful for creating engaging animations and visually appealing user interactions.

.transform-element {
  transform: rotate(45deg);
}

22. How can you target an element’s child elements?

Answer: To target an element’s child elements, the descendant combinator () or child combinator (>) can be used in CSS selectors. The descendant combinator selects all descendants, regardless of their depth within the structure. The child combinator, however, selects only direct children of the parent element.

.parent .child {
  color: blue;
}

.parent > .direct-child {
  color: red;
}

23. What is the purpose of the box-shadow property?

Answer: The box-shadow property allows developers to add shadow effects to elements, enhancing their visual depth and prominence. This property accepts values for horizontal and vertical offsets, blur radius, spread distance, and color. By applying subtle shadows, designers can create a sense of elevation and separation between elements.

.shadow-element {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

24. How can you style elements on odd or even positions?

Answer: The :nth-child(odd) and :nth-child(even) pseudo-classes can be used to target elements based on their position within a parent container. These selectors are particularly useful for creating alternating styles, such as zebra-striping a table or list.

.parent :nth-child(odd) {
  background-color: lightgray;
}

.parent :nth-child(even) {
  background-color: white;
}

25. What is the @font-face rule used for?

Answer: The @font-face rule enables developers to use custom fonts that aren’t traditionally available on users’ devices. By defining font sources and properties, developers can ensure consistent typography across different platforms. This is particularly useful for achieving specific design aesthetics and maintaining branding consistency.

@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
}

.custom-font {
  font-family: 'CustomFont', sans-serif;
}

26. How can you create a CSS tooltip?

Answer: CSS tooltips can be created using the ::before or ::after pseudo-elements in conjunction with the content property. By positioning the pseudo-element absolutely and providing appropriate styles, developers can design custom tooltips that display additional information when users hover over specific elements.

.tooltip-container {
  position: relative;
}

.tooltip-container:hover::after {
  content: "Tooltip text";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px;
  border-radius: 3px;
}

27. What is the purpose of the will-change property?

Answer: The will-change property is used to indicate to the browser that an element is expected to change in a particular way, allowing the browser to optimize performance. By preemptively informing the browser about upcoming changes, developers can enhance rendering and animation performance for specific elements.

.will-change-element {
  will-change: transform;
}

28. How can you create a responsive grid layout?

Answer: A responsive grid layout can be created using CSS Grid, a powerful layout system that enables developers to create two-dimensional grid layouts with ease. By defining columns, rows, and gaps, developers can design flexible layouts that automatically adjust based on screen size, creating a seamless user experience on various devices.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

29. What is the object-fit property?

Answer: The object-fit property

determines how an <img> or <video> element’s content should be resized to fit within its container. Values like contain and cover control scaling and cropping behaviors, ensuring media elements maintain their aspect ratio while adapting to different container dimensions.

.media-element {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

30. How can you create a custom checkbox style?

Answer: Custom checkbox styles can be achieved by utilizing the ::before or ::after pseudo-elements to create a visually appealing replacement for the default checkbox. By hiding the original checkbox input and styling the pseudo-element, developers can create unique and engaging checkbox designs while maintaining accessibility.

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-container::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: white;
  border: 1px solid gray;
  margin-right: 10px;
  vertical-align: middle;
}

.checkbox-container input[type="checkbox"]:checked + ::before {
  background-color: blue;
  border-color: blue;
}

31. How can you create a responsive navigation menu?

Answer: To create a responsive navigation menu, you can use CSS Flexbox or CSS Grid to organize menu items. Using media queries, you can adjust the layout for different screen sizes. Consider using the “hamburger” icon for mobile screens and toggling the menu visibility with CSS classes and JavaScript.

<nav class="nav-menu">
  <div class="hamburger-icon"></div>
  <ul class="menu-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-list {
  display: none; /* Hide initially for mobile */
}

.hamburger-icon {
  display: block; /* Show for mobile */
  /* Add hamburger icon styling */
}

/* Media query for mobile screens */
@media (max-width: 768px) {
  .menu-list {
    display: block; /* Show menu for mobile */
  }
  .hamburger-icon {
    display: none; /* Hide hamburger icon for mobile */
  }
}

32. How can you create a CSS-only modal?

Answer: A CSS-only modal can be created by utilizing hidden checkboxes and the :checked pseudo-class to control modal visibility. This approach avoids JavaScript for basic modals. By styling the modal’s appearance and animations with CSS, you can create simple modals without relying on external libraries.

<label for="modal-toggle" class="open-modal-button">Open Modal</label>
<input type="checkbox" id="modal-toggle" class="modal-toggle">
<div class="modal">
  <label for="modal-toggle" class="close-modal-button">Close</label>
  <div class="modal-content">
    <!-- Modal content goes here -->
  </div>
</div>
.modal-toggle {
  display: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

/* Show modal when checkbox is checked */
.modal-toggle:checked + .modal {
  display: flex;
}

33. How can you create a CSS-only slider?

Answer: A CSS-only slider can be achieved using radio buttons and their :checked state to control the slider’s appearance. By styling the slider and its slides based on the radio button’s state, you can create a basic slider without JavaScript.

<div class="slider">
  <input type="radio" name="slider" id="slide1" checked>
  <input type="radio" name="slider" id="slide2">
  <input type="radio" name="slider" id="slide3">
  <div class="slide">
    <!-- Slide content goes here -->
  </div>
  <div class="slide">
    <!-- Slide content goes here -->
  </div>
  <div class="slide">
    <!-- Slide content goes here -->
  </div>
</div>
.slider {
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out;
}

/* Show the selected slide */
#slide1:checked ~ .slide:nth-of-type(1),
#slide2:checked ~ .slide:nth-of-type(2),
#slide3:checked ~ .slide:nth-of-type(3) {
  opacity: 1;
  visibility: visible;
}

34. What is the difference between display: none and visibility: hidden?

Answer: Both display: none and visibility: hidden hide elements, but they have different effects on the layout. display: none removes the element from the layout flow, causing nearby elements to reflow. visibility: hidden hides the element while keeping its space, maintaining the layout. Use display: none for completely hiding an element and visibility: hidden for hiding while preserving space.


35. How can you make a CSS animation run indefinitely?

Answer: To make a CSS animation run indefinitely, use the infinite value for the animation-iteration-count property. This causes the animation to repeat continuously without the need to specify a fixed number of iterations.

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 2s infinite linear;
}

36. How can you center an element both horizontally and vertically?

Answer: To center an element both horizontally and vertically, use the following CSS rules:

.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

This technique shifts the element to the center of its containing parent element.


37. What is the currentColor keyword used for?

Answer: The currentColor keyword is used to inherit the color value from the element’s computed color property. This allows you to use the same color for other properties within the element, maintaining consistency in design.

.colorful-element {
  color: blue;
  border: 2px solid currentColor;
}

38. How can you create a CSS-only sticky footer?

Answer: A CSS-only sticky footer can be achieved using Flexbox. Apply a flex container to the parent element, use flex-grow to push content, and set a margin-top: auto on the footer element to push it to the bottom.

<div class="container">
  <div class="content">
    <!-- Content goes here -->
  </div>
  <footer class="footer">
    <!-- Footer content goes here -->
  </footer>
</div>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

.footer {
  margin-top: auto;
}

39. What is the purpose of the currentColor keyword?

Answer: The currentColor keyword is used to inherit the color value of the element’s computed color property. It’s particularly useful when you want to use the same color for various properties within an element, ensuring consistency in design and reducing the need to manually update colors in multiple places.

.icon {
  color: red;
  border: 2px solid currentColor

; /* Border color will be red */
}

40. How can you apply CSS styles only to browsers that support a specific feature?

Answer: You can use feature queries with the @supports rule to apply CSS styles only to browsers that support a specific feature. This allows you to provide alternative styles or workarounds for browsers that lack support.

@supports (display: grid) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

41. How can you create a responsive text that adjusts its font size based on the screen width?

Answer: To create a responsive text with font size adjusting to screen width, use the vw (viewport width) unit. By setting the font size using a percentage of vw, the text will scale proportionally as the viewport width changes.

.responsive-text {
  font-size: 5vw; /* Adjust as needed */
}

42. How can you create a gradient background using CSS?

Answer: You can create gradient backgrounds using the linear-gradient() function. This function takes one or more color stops as arguments and generates a gradient transition between them.

.gradient-background {
  background: linear-gradient(to bottom, #ffcc00, #ff3300);
}

43. What is the box-sizing property used for?

Answer: The box-sizing property determines how an element’s total width and height are calculated, including padding and border. The default value, content-box, calculates dimensions excluding padding and border. The border-box value includes padding and border in the dimensions, simplifying layout calculations.

.element {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 2px solid black;
}

44. How can you make a CSS animation play when an element comes into view?

Answer: To trigger a CSS animation when an element comes into view, use the Intersection Observer API. Define an observer targeting the element and specify the desired animation CSS class to be added when the element intersects the viewport.

<div class="animated-element"></div>
.animate {
  animation: slide-up 1s ease-in-out;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("animate");
      observer.unobserve(entry.target);
    }
  });
});

const animatedElement = document.querySelector(".animated-element");
observer.observe(animatedElement);

45. How can you create a CSS-only tooltip?

Answer: You can create a CSS-only tooltip by utilizing the ::before or ::after pseudo-element to display tooltip content when the user hovers over an element. Use position: relative on the parent element and absolute positioning for the tooltip.

<div class="tooltip-container">
  Hover me
  <div class="tooltip">Tooltip content</div>
</div>
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  background-color: #333;
  color: white;
  border-radius: 4px;
}

.tooltip-container:hover .tooltip {
  display: block;
}

46. How can you create a CSS-only collapsible element?

Answer: To create a CSS-only collapsible element, use hidden checkboxes and labels to control the element’s visibility. Apply styles based on the :checked state to show or hide content.

<input type="checkbox" id="collapsible-toggle">
<div class="collapsible">
  <label for="collapsible-toggle" class="toggle-label">Toggle</label>
  <div class="content">
    <!-- Collapsible content goes here -->
  </div>
</div>
.collapsible {
  border: 1px solid #ddd;
  margin: 10px;
}

.toggle-label {
  display: block;
  padding: 10px;
  cursor: pointer;
}

.content {
  display: none;
  padding: 10px;
}

#collapsible-toggle:checked + .collapsible .content {
  display: block;
}

47. How can you create a CSS-only animated button?

Answer: Create an animated button using CSS animations and transitions. Apply styles for the default and hover states, using transition for smooth animations.

<button class="animated-button">Click Me</button>
.animated-button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.animated-button:hover {
  background-color: #2980b9;
}

48. How can you vertically align text within an element?

Answer: You can vertically align text within an element using the line-height property. Set line-height equal to the element’s height to vertically center single-line text.

.centered-text {
  height: 200px;
  line-height: 200px;
}

For multi-line text, consider using Flexbox or CSS Grid for more flexible alignment options.


49. How can you prevent text from wrapping onto multiple lines?

Answer: To prevent text from wrapping onto multiple lines, use the white-space property with the value nowrap. This ensures that the text remains on a single line and overflows the container if necessary.

.single-line-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Optional */
}

50. How can you create a responsive grid layout using CSS?

Answer: To create a responsive grid layout, use the CSS Grid layout system. Define a grid container and set the number of columns using the grid-template-columns property. Use media queries to adjust the layout for different screen sizes.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

51. How can you create a CSS-only multilevel dropdown menu?

Answer: Create a CSS-only multilevel dropdown menu by using nested lists and CSS selectors to control the visibility of submenus.

<nav class="dropdown-menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
      <ul>
        <li><a href="#">Category 1</a></li>
        <li><a href="#">Category 2</a></li>
      </ul>
    </

li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
.dropdown-menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.dropdown-menu ul li:hover > ul {
  display: block;
}

52. How can you create a CSS-only flip card effect?

Answer: Create a flip card effect using CSS animations and transitions. Apply styles for the front and back faces, and use the rotateY transform to achieve the flipping animation.

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <!-- Front content -->
    </div>
    <div class="flip-card-back">
      <!-- Back content -->
    </div>
  </div>
</div>
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #3498db;
}

.flip-card-back {
  background-color: #e74c3c;
  transform: rotateY(180deg);
}

53. How can you create a CSS-only pagination system?

Answer: Create a CSS-only pagination system using radio buttons and labels to represent each page. Apply styles to indicate the active page and use the :checked pseudo-class to control the appearance.

<div class="pagination">
  <input type="radio" name="page" id="page1" checked>
  <input type="radio" name="page" id="page2">
  <input type="radio" name="page" id="page3">
  <!-- Add more pages as needed -->
  <label for="page1">1</label>
  <label for="page2">2</label>
  <label for="page3">3</label>
  <!-- Add more labels as needed -->
</div>
.pagination {
  display: flex;
}

.pagination label {
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  margin-right: -1px;
}

.pagination input[type="radio"] {
  display: none;
}

.pagination label:hover {
  background-color: #f2f2f2;
}

.pagination input[type="radio"]:checked + label {
  background-color: #3498db;
  color: white;
  border: 1px solid #3498db;
}

54. How can you create a CSS-only countdown timer?

Answer: Create a CSS-only countdown timer by utilizing keyframe animations. Define a timer container and animate its height to mimic the countdown.

<div class="countdown-container">
  <div class="countdown"></div>
</div>
.countdown-container {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.countdown {
  width: 100%;
  height: 100%;
  background-color: #3498db;
  animation: countdown-animation 10s linear infinite;
}

@keyframes countdown-animation {
  0% {
    height: 100%;
  }
  100% {
    height: 0;
  }
}

55. How can you create a CSS-only animated progress bar?

Answer: Create a CSS-only animated progress bar by using keyframe animations. Define a progress bar container and animate its width to represent the progress.

<div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>
.progress-bar-container {
  width: 100%;
  height: 20px;
  background-color: #f2f2f2;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 100%;
  background-color: #3498db;
  animation: progress-animation 5s linear infinite;
}

@keyframes progress-animation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

56. How can you create a CSS-only animated loading spinner?

Answer: Create a CSS-only animated loading spinner using keyframe animations. Define a spinner container and apply the animation to create the spinning effect.

<div class="spinner-container">


  <div class="spinner"></div>
</div>
.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

57. How can you create a CSS-only toggle switch?

Answer: Create a CSS-only toggle switch using hidden checkboxes and labels to control its state. Apply styles for the :checked state to change the appearance.

<input type="checkbox" id="toggle-switch" class="toggle-switch">
<label for="toggle-switch" class="switch-label"></label>
.toggle-switch {
  display: none;
}

.switch-label {
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: #f2f2f2;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}

.toggle-switch:checked + .switch-label {
  background-color: #3498db;
}

.switch-label::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  top: 1px;
  left: 1px;
  transition: transform 0.3s ease;
}

.toggle-switch:checked + .switch-label::before {
  transform: translateX(20px);
}

58. How can you create a CSS-only floating label input?

Answer: Create a CSS-only floating label input by styling the input and label elements. Apply styles to move the label above the input when it receives focus or contains a value.

<div class="floating-label">
  <input type="text" id="floating-input">
  <label for="floating-input">Username</label>
</div>
.floating-label {
  position: relative;
}

.floating-label input {
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #ccc;
}

.floating-label label {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.floating-label input:focus + label,
.floating-label input:valid + label {
  top: -20px;
  font-size: 12px;
  color: #3498db;
}

59. How can you create a CSS-only animated underline on hover?

Answer: Create a CSS-only animated underline on hover using the ::before pseudo-element. Apply styles to animate the pseudo-element’s width.

<a href="#" class="animated-underline">Hover me</a>
.animated-underline {
  position: relative;
  color: #3498db;
  text-decoration: none;
}

.animated-underline::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3498db;
  transition: width 0.3s ease;
}

.animated-underline:hover::before {
  width: 100%;
}

60. How can you create a CSS-only animated gradient background?

Answer: Create a CSS-only animated gradient background by using keyframe animations to transition between different gradient colors.

<div class="animated-gradient"></div>
.animated-gradient {
  width: 100%;
  height: 300px;
  background: linear-gradient(45deg, #3498db, #e74c3c);
  animation: gradient-animation 5s linear infinite alternate;
}

@keyframes gradient-animation {
  0% {
    background: linear-gradient(45deg, #3498db, #e74c3c);
  }
  100% {
    background: linear-gradient(45deg, #e74c3c, #3498db);
  }
}

61. How can you create a CSS-only tabbed content area?

Answer: Create a CSS-only tabbed content area using hidden radio buttons and labels to control the tab switching.

<div class="tab-container">
  <input type="radio" name="tab" id="tab1" checked>
  <input type="radio" name="tab" id="tab2">
  <input type="radio" name="tab" id="tab3">


 <div class="tabs">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2</label>
    <label for="tab3">Tab 3</label>
  </div>
  <div class="tab-content">
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
  </div>
</div>
.tab-container {
  display: flex;
  flex-direction: column;
}

.tabs {
  display: flex;
}

.tabs label {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-bottom: none;
}

.tab-content > div {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}

#tab1:checked ~ .tab-content > div:nth-child(1),
#tab2:checked ~ .tab-content > div:nth-child(2),
#tab3:checked ~ .tab-content > div:nth-child(3) {
  display: block;
}

62. How can you create a CSS-only accordion?

Answer: Create a CSS-only accordion using hidden radio buttons and labels to control the accordion sections.

<div class="accordion">
  <input type="radio" name="accordion" id="section1" checked>
  <input type="radio" name="accordion" id="section2">
  <input type="radio" name="accordion" id="section3">
  <div class="sections">
    <label for="section1">Section 1</label>
    <label for="section2">Section 2</label>
    <label for="section3">Section 3</label>
  </div>
  <div class="section-content">
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
  </div>
</div>
.accordion {
  display: flex;
  flex-direction: column;
}

.sections {
  display: flex;
}

.sections label {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-bottom: none;
}

.section-content > div {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}

#section1:checked ~ .section-content > div:nth-child(1),
#section2:checked ~ .section-content > div:nth-child(2),
#section3:checked ~ .section-content > div:nth-child(3) {
  display: block;
}

63. How can you create a CSS-only image gallery with lightbox?

Answer: Create a CSS-only image gallery with lightbox using hidden radio buttons and labels to control the gallery items and the lightbox display.

<div class="image-gallery">
  <input type="radio" name="gallery" id="image1" checked>
  <input type="radio" name="gallery" id="image2">
  <input type="radio" name="gallery" id="image3">
  <div class="images">
    <label for="image1"><img src="image1.jpg" alt="Image 1"></label>
    <label for="image2"><img src="image2.jpg" alt="Image 2"></label>
    <label for="image3"><img src="image3.jpg" alt="Image 3"></label>
  </div>
  <div class="lightbox">
    <div class="lightbox-content">
      <img src="image1.jpg" alt="Image 1">
      <label for="image1" class="close-lightbox"></label>
    </div>
  </div>
</div>
.image-gallery {
  display: flex;
  flex-wrap: wrap;
}

.images label {
  flex: 0 0 calc(33.33% - 10px);
  margin: 5px;
}

.images img {
  width: 100%;
  height: auto;
  cursor: pointer;
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox img {
  width: 100%;
  height: auto;
}

.close-lightbox {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background: url("close-icon.png") no-repeat center center;
  cursor: pointer;
}

64. How can you create a CSS-only sticky footer?

Answer: Create a CSS-only sticky footer by setting a min-height on the wrapper element and using flex for layout. Apply styles to ensure the footer stays at the bottom of the viewport.

<div class="wrapper">
  <main>Content goes here</main>
  <footer>Sticky footer</footer>
</div>
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

footer {
  background-color: #333;
  color: white;
  padding: 10px;
}

65. How can you create a CSS-only responsive navigation menu?

Answer: Create a CSS-only responsive navigation menu using the “checkbox hack” to toggle menu visibility.

<nav class="navigation">
  <input type="checkbox" id="menu-toggle" class="menu-toggle">
  <label for="menu-toggle" class="toggle-label">Menu</label>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
.navigation {
  text-align: right;
}

.menu-toggle {
  display: none;
}

.toggle-label {
  display: block;
  cursor: pointer;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
}

.menu li {
  margin: 0 10px;
}

.menu-toggle:checked + .menu {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #333;
  padding: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.menu-toggle:checked + .menu li {
  display: block;
  margin: 5px 0;
}

.menu-toggle:checked + .menu li a {
  color: white;
  text-decoration: none;
}

66. How can you create a CSS-only infinite scrolling effect?

Answer: Create a CSS-only infinite scrolling effect using keyframe animations to continuously move content.

<div class="infinite-scroll">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <!-- ... -->
  </ul>
</div>
.infinite-scroll ul {
  list-style: none;
  padding: 0;
  margin: 0;
  animation: scroll-animation 10s linear infinite;
}

@keyframes scroll-animation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.infinite-scroll li {
  padding: 20px;
  border: 1px solid #ccc;
}

67. How can you create a CSS-only parallax scrolling effect?

Answer: Create a CSS-only parallax scrolling effect by using background-attachment: fixed and adjusting background positions.

<section class="parallax">
  <div class="parallax-content">
    <h1>Welcome to our website</h1>
    <p>Discover amazing features</p>
  </div>
</section>
.parallax {
  height: 100vh;
  background-image: url("background-image.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}

.parallax-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

68. How can you create a CSS-only tooltip?

Answer: Create a CSS-only tooltip by applying styles to the ::before pseudo-element.

<span class="tooltip">Hover me<span class="tooltip-text">Tooltip content</span></span>
.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip-text {
  display: none;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  background-color: #333;
  color: white;
  border-radius: 3px;
}

.tooltip:hover .tooltip-text {
  display: block;
}

69. How can you create a CSS-only responsive modal?

Answer: Create a CSS-only responsive modal using hidden checkboxes and labels to control the modal display.

<div class="modal">
  <input type="checkbox" id="modal-toggle" class="modal-toggle">
  <label for="modal-toggle" class="modal-overlay"></label>
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>Modal content goes here</p>
    <button class="close-button">Close</button>
  </div>
</div>
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-toggle {
  display: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.close-button {
  display: block;
  margin-top: 10px;
  background-color: #333;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

70. How can you create a CSS-only zoom effect on images?

Answer: Create a CSS-only zoom effect on images using the :hover pseudo-class and applying a transform property.

<img src="image.jpg" alt="Zoomable Image" class="zoomable-image">
.zoomable-image {
  transition: transform 0.3s ease;
}

.zoomable-image:hover {
  transform: scale(1.1);
}

71. How can you create a CSS-only timeline?

Answer: Create a CSS-only timeline by styling `::

beforeand::after` pseudo-elements of timeline items.

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-date">2022-01-01</div>
    <div class="timeline-content">Event 1</div>
  </div>
  <div class="timeline-item">
    <div class="timeline-date">2022-03-15</div>
    <div class="timeline-content">Event 2</div>
  </div>
  <!-- ... -->
</div>
.timeline {
  position: relative;
}

.timeline-item {
  position: relative;
  padding-left: 40px;
  margin-bottom: 20px;
}

.timeline-date {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}

.timeline-content {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  height: 100%;
  border-left: 2px solid #ccc;
}

72. How can you create a CSS-only animated progress bar?

Answer: Create a CSS-only animated progress bar using @keyframes animations.

<div class="progress">
  <div class="progress-bar"></div>
</div>
.progress {
  width: 100%;
  background-color: #ccc;
}

.progress-bar {
  width: 0;
  height: 20px;
  background-color: #007bff;
  animation: progress-animation 5s linear forwards;
}

@keyframes progress-animation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

73. How can you create a CSS-only slideshow?

Answer: Create a CSS-only slideshow using keyframe animations and @keyframes.

<div class="slideshow">
  <div class="slide" style="background-image: url('slide1.jpg');"></div>
  <div class="slide" style="background-image: url('slide2.jpg');"></div>
  <!-- ... -->
</div>
.slideshow {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: slideshow-animation 10s infinite;
}

@keyframes slideshow-animation {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

74. How can you create a CSS-only masonry layout?

Answer: Create a CSS-only masonry layout using column-count property.

<div class="masonry">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- ... -->
</div>
.masonry {
  column-count: 3;
  column-gap: 20px;
}

.item {
  break-inside: avoid;
  margin-bottom: 20px;
}

75. How can you create a CSS-only image grid with hover effects?

Answer: Create a CSS-only image grid with hover effects using CSS Grid and transform property.

<div class="image-grid">
  <div class="image">
    <img src="image1.jpg" alt="Image 1">
    <div class="overlay">
      <p>Image 1</p>
    </div>
  </div>
  <div class="image">
    <img src="image2.jpg" alt="Image 2">
    <div class="overlay">
      <p>Image 2</p>
    </div>
  </div>
  <!-- ... -->
</div>
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.image {
  position: relative;
  overflow: hidden;
}

.image img {
  width: 100%;
  vertical-align: middle;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image:hover .overlay {
  opacity: 1;
}

.overlay p {
  color: white;
}

76. How can you create a CSS-only accordions?

Answer: Create a CSS-only accordion using hidden checkboxes and labels.

<div class="accordion">
  <input type="checkbox" id="section1" class="accordion-toggle">
  <label for="section1" class="section-title">Section 1</label>
  <div class="section-content">
    <p>Content of section 1</p>
  </div>
  <!-- ... -->
</div>
.accordion {
  width: 100%;
}

.accordion-toggle {
  display: none;
}

.section-title {
  display: block;
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
}

.section-content {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
  border-top: none;
}

.accordion-toggle:checked + .section-title + .section-content {
  display: block;
}

77. How can you create a CSS-only flip card effect?

Answer: Create a CSS-only flip card effect using CSS transforms.

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <p>Front content</p>
    </div>
    <div class="flip-card-back">
      <p>Back content</p>
    </div>
  </div>
</div>
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-card-back {
  background-color: #007bff;
  color: white;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

78. How can you create a CSS-only animated loading spinner?

Answer: Create a CSS-only animated loading spinner using @keyframes animations.

<div class="spinner"></div>
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

79. How can you create a CSS-only responsive pricing table?

Answer: Create a CSS-only responsive pricing table using CSS Grid.

<div class="pricing-table">
  <div class="pricing-plan">


    <h2>Basic</h2>
    <p class="price">$9.99/month</p>
    <ul class="features">
      <li>Feature 1</li>
      <li>Feature 2</li>
      <!-- ... -->
    </ul>
    <a href="#" class="btn">Get Started</a>
  </div>
  <!-- ... -->
</div>
.pricing-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.pricing-plan {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

.price {
  font-size: 24px;
}

.features {
  list-style: none;
  padding: 0;
}

.features li {
  margin-bottom: 10px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
}

80. How can you create a CSS-only navigation menu with submenus?

Answer: Create a CSS-only navigation menu with submenus using nested lists and CSS selectors.

<nav class="menu">
  <ul class="menu-list">
    <li class="menu-item">
      <a href="#">Home</a>
    </li>
    <li class="menu-item">
      <a href="#">About</a>
    </li>
    <li class="menu-item has-submenu">
      <a href="#">Services</a>
      <ul class="submenu">
        <li class="submenu-item"><a href="#">Service 1</a></li>
        <li class="submenu-item"><a href="#">Service 2</a></li>
        <!-- ... -->
      </ul>
    </li>
    <!-- ... -->
  </ul>
</nav>
.menu {
  background-color: #333;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu-item {
  padding: 10px 20px;
  position: relative;
}

.menu-item a {
  color: white;
  text-decoration: none;
}

.submenu {
  display: none;
  position: absolute;
  background-color: #444;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1;
}

.has-submenu:hover .submenu {
  display: block;
}

.submenu-item {
  padding: 10px;
}

.submenu-item a {
  color: white;
  text-decoration: none;
}

81. How can you create a CSS-only tooltip?

Answer: Create a CSS-only tooltip using the ::before or ::after pseudo-elements.

<div class="tooltip">
  Hover over me
  <span class="tooltip-text">Tooltip text</span>
</div>
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

82. How can you create a CSS-only image zoom effect?

Answer: Create a CSS-only image zoom effect using :hover and transform property.

<div class="image-zoom">
  <img src="image.jpg" alt="Image">
</div>
.image-zoom {
  overflow: hidden;
}

.image-zoom img {
  transition: transform 0.3s;
}

.image-zoom:hover img {
  transform: scale(1.2);
}

83. How can you create a CSS-only dropdown menu?

Answer: Create a CSS-only dropdown menu using hidden checkboxes and labels.

<div class="dropdown">
  <input type="checkbox" id="toggle-dropdown">
  <label for="toggle-dropdown">Dropdown</label>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <!-- ... -->
  </ul>
</div>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu li {
  padding: 10px;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

84. How can you create a CSS-only modal popup?

Answer: Create a CSS-only modal popup using hidden checkboxes and labels.

<div class="modal">
  <input type="checkbox" id="toggle-modal">
  <label for="toggle-modal" class="modal-overlay"></label>
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>Modal content goes here.</p>
    <button class="close-btn">Close</button>
  </div>
</div>
.modal {
  display: none;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  cursor: pointer;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.close-btn {
  display: block;
  margin-top: 10px;
}

85. How can you create a CSS-only toggle switch?

Answer: Create a CSS-only toggle switch using hidden checkboxes and labels.

<div class="toggle-switch">
  <input type="checkbox" id="toggle">
  <label for="toggle"></label>
</div>
.toggle-switch {
  display: inline-block;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-switch label {
  display: block;
  width: 50px;
  height: 30px;
  background-color: #ccc;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
}

.toggle-switch label::after {
  content: "";
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  transition: left 0.3s;
}

.toggle-switch input:checked + label::after {
  left: calc(100% - 2.5px);
}

86. How can you create a CSS-only progress bar?

Answer: Create a CSS-only progress bar using the ::before pseudo-element and the width property.

<div class="progress-bar">
  <div class="progress"></div>
</div>
.progress-bar {
  width: 100%;
  background-color: #ccc;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
}

.progress {
  width: 50%;
  background-color: #007bff;
  height: 100%;
}

87. How can you create a CSS-only slide-in animation?

Answer: Create a CSS-only slide-in animation using the @keyframes rule and the animation property.

<div class="slide-in-box"></div>
.slide-in-box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  animation: slide-in 1s ease-in-out forwards;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

88. How can you create a CSS-only rotating loader?

Answer: Create a CSS-only rotating loader using the @keyframes rule and the animation property.

<div class="loader"></div>
.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

89. How can you create a CSS-only sticky footer?

Answer: Create a CSS-only sticky footer using a flex container and margin-top: auto.

<div class="container">
  <div class="content">
    <!-- Content goes here -->
  </div>
  <div class="footer">
    Footer content
  </div>
</div>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

90. How can you create a CSS-only parallax effect?

Answer: Create a CSS-only parallax effect using the background-attachment: fixed property and CSS animations.

<div class="parallax">
  <div class="parallax-content">
    <!-- Content goes here -->
  </div>
</div>
.parallax {
  height: 400px;
  background-image: url('background.jpg');
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}

.parallax-content {
  transform: translateZ(0);
  animation: parallax 10s linear infinite;
}

@keyframes parallax {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
}

91. How can you create a CSS-only responsive navigation menu?

Answer: Create a CSS-only responsive navigation menu using hidden checkboxes and labels.

<nav class="nav-menu">
  <input type="checkbox" id="toggle-menu">
  <label for="toggle-menu" class="menu-icon">&#9776;</label>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <!-- ... -->
  </ul>
</nav>
.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-icon {
  display: none;
  cursor: pointer;
}

.menu {
  display: flex;
  list-style: none;
}

.menu li {
  margin: 0 10px;
}

@media (max-width: 768px) {
  .menu-icon {
    display: block;
  }

  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  }

  .menu.active {
    display: flex;
  }
}

92. How can you create a CSS-only flip card animation?

Answer: Create a CSS-only flip card animation using @keyframes and transform property.

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="front.jpg" alt="Front">
    </div>
    <div class="flip-card-back">
      <img src="back.jpg" alt="Back">
    </div>
  </div>
</div>
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.flip-card-front {
  transform: rotateY(0deg);
}

.flip-card-back {
  transform: rotateY(180deg);
}

93. How can you create a CSS-only scroll animation?

Answer: Create a CSS-only scroll animation using @keyframes and animation property.

<div class="scroll-animation"></div>
.scroll-animation {
  width: 50px;
  height: 50px;
  background-color: #007bff;
  animation: scroll 2s infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}

94. How can you create a CSS-only sticky header?

Answer: Create a CSS-only sticky header using the position: sticky property.

<header class="sticky-header">
  <!-- Header content -->
</header>
.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
  z-index: 100;
}

95. How can you create a CSS-only masonry layout?

Answer: Create a CSS-only masonry layout using column-count and column-gap properties.

<div class="masonry-layout">
  <div class="masonry-item">Item 1</div>
  <div class="masonry-item">Item 2</div>
  <!-- ... -->
</div>
.masonry-layout {
  column-count: 3;
  column-gap: 10px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 10px;
}

96. How can you create a CSS-only accordion?

Answer: Create a CSS-only accordion using hidden checkboxes and labels.

<div class="accordion">
  <input type="checkbox" id="section1">
  <label for="section1" class="section-title">Section 1</label>
  <div class="section-content">
    Content of section 1.
  </div>
  <input type="checkbox" id="section2">
  <label for="section2" class="section-title">Section 2</label>
  <div class="section-content">
    Content of section 2.
  </div>
  <!-- ... -->
</div>
.accordion {
  display: block;
  width: 100%;
}

.section-title {
  display: block;
  background-color: #007bff;
  color: white;
  padding: 10px;
  cursor: pointer;
}

.section-content {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
}

input[type="checkbox"]:checked + .section-title + .section-content {
  display: block;
}

97. How can you create a CSS-only breadcrumb navigation?

Answer: Create a CSS-only breadcrumb navigation using the ::before pseudo-element.

<nav class="breadcrumb">
  <a href="#">Home</a>
  <a href="#">Category</a>
  <span>Current Page</span>
</nav>
.breadcrumb a::before {
  content: "\00bb";
  margin: 0 5px;
  color: #007bff;
}

.breadcrumb span {
  color: #333;
}

98. How can you create a CSS-only video player interface?

Answer: Create a CSS-only video player interface using HTML5 <video> element and CSS styling.

<div class="video-player">
  <video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>
.video-player {
  max-width: 800px;
  margin: 0 auto;
}

video {
  width: 100%;
  display: block;
}

/* Style the video player controls as needed */

99. How can you create a CSS-only image gallery with lightbox?

Answer: Create a CSS-only image gallery with lightbox using hidden checkboxes and labels.

<div class="image-gallery">
  <input type="checkbox" id="lightbox-toggle">
  <div class="gallery">
    <label class="gallery-item" for="lightbox-toggle">
      <img src="image1.jpg" alt="Image 1">
    </label>
    <label class="gallery-item" for="lightbox-toggle">
      <img src="image2.jpg" alt

="Image 2">
    </label>
    <!-- ... -->
  </div>
  <div class="lightbox">
    <label for="lightbox-toggle" class="lightbox-overlay"></label>
    <label for="lightbox-toggle" class="lightbox-content">
      <img src="image1.jpg" alt="Image 1">
    </label>
  </div>
</div>
.image-gallery {
  position: relative;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery-item {
  flex: 1 0 calc(33.33% - 10px);
  margin: 5px;
  cursor: pointer;
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90%;
}

#lightbox-toggle:checked ~ .lightbox {
  display: flex;
}

100. How can you create a CSS-only tooltip?

Answer: Create a CSS-only tooltip using the ::before pseudo-element and the content property.

<span class="tooltip" data-tooltip="This is a tooltip">Hover me</span>
.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  background-color: #333;
  color: white;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}