Top 30+ CSS Interview Questions And Answers

Top 30+ CSS Interview Questions And Answers
In SCSS (Sass), mixins are a feature that allows you to define reusable blocks of CSS code. A mixin is similar to a function in programming, as it can accept parameters and generate CSS styles based on those parameters. Mixins provide a way to encapsulate and reuse common styles, making your code more modular and maintainable. To define a mixin in SCSS, you use the `@mixin` directive, followed by a name and a block of CSS code. Here's an example: 

@mixin center-element {
  display: flex;
  align-items: center;
  justify-content: center;
}
In this example, we define a mixin called `center-element` that applies common styles to center an element both vertically and horizontally using flexbox. To use a mixin, you can include it in a selector using the `@include` directive, followed by the name of the mixin. Here's an example: 

.container {
  @include center-element;
}
The `@include` directive includes the `center-element` mixin in the `.container` selector, which applies the styles defined in the mixin to that selector. After compilation, the generated CSS will include the styles from the mixin: 

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
Mixins can also accept parameters, allowing you to customize the generated styles. Here's an example of a mixin with parameters: 
@mixin link-color($color) {
  color: $color;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
}
In this example, the `link-color` mixin accepts a `$color` parameter. When using the mixin, you can pass a specific color value to customize the link's color. Here's an example: 

a {
  @include link-color(blue);
}
After compilation, the generated CSS for the `a` selector will include the customized color: 

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
Mixins in SCSS provide a powerful way to reuse and share CSS code, making your stylesheets more maintainable and reducing code duplication. They are particularly useful for common styles or styles that require customization in different parts of your project.
To align an element both vertically and horizontally at the center of its parent element, you can use CSS flexbox,CSS Grid or Custom css with position absolute. Here are examples of both approaches: 1. Using CSS Flexbox: 

   .parent {
     display: flex;
     justify-content: center; /* Horizontal centering */
     align-items: center; /* Vertical centering */
   }
In this example, the `.parent` class represents the parent element containing the element you want to center. By setting `display: flex` on the parent, its child elements become flex items. The `justify-content: center` property centers the child element horizontally, while `align-items: center` centers it vertically. 2. Using CSS Grid: 

   .parent {
     display: grid;
     place-items: center; /* Centers both horizontally and vertically */
   }
Here, the `.parent` class uses CSS Grid by setting `display: grid`. The `place-items: center` property centers the child element both horizontally and vertically within the grid cell. Remember to apply these styles to the parent element that contains the element you want to center. You can adjust the CSS selectors (`parent`) according to your HTML structure and class names. 3. Custom css with position absolute 

 .parent {
   position: relative 
  }
 .container {
    position:absolute;
    top: 50%;
    left: 50%;
    width:100px;
    height:100px;
    margin-left:-50px;
    margin-top:-50px;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
  }
   
or
 
 .parent {
   position: relative 
  }
  .container {
    position:absolute;
    top: 50%;
    left: 50%;
    width:100px;
    height:100px;
    transform:translate(-50%,-50%);
    border: 1px solid #ccc;
    background-color: #f3f3f3;
  }
In this approach, the parent element should have a non-static position, such as position: relative, to serve as the reference for absolute positioning. The child element is positioned absolutely using position: absolute. By setting top: 50% and left: 50%, the element is moved to the center of its parent. Finally, transform: translate(-50%, -50%) shifts the element back by 50% of its own width and height, effectively centering it. You can also use margin-left and margin-top to shift the element by 50 percent, in this case it will be margin-left:-50px; and margin-top:-50px; as height and width of element is 100px HTML:- 

<body class="parent">
 <div class="container"> 
  <div class="item item-1">
  1.Lorem Ipsum has been the industry's standard dummy text ev 
  </div>
 </div>
</body>
In CSS, you can create animations using the `@keyframes` rule and apply them to elements using the `animation` property. Here's a basic example of how to animate an element in CSS: 
/* Define the animation keyframes */
@keyframes myAnimation {
  0% {
    /* Initial state */
    transform: scale(1);
  }
  50% {
    /* Intermediate state */
    transform: scale(1.5);
  }
  100% {
    /* Final state */
    transform: scale(1);
  }
}

/* Apply the animation to an element */
.my-element {
  animation: myAnimation 2s infinite;
}
In this example, we define an animation called `myAnimation` using the `@keyframes` rule. The `@keyframes` rule allows you to specify different stages of the animation by setting CSS properties at different percentage points. In this case, we define three stages: 0%, 50%, and 100%. Next, we apply the animation to an element with the class `.my-element` using the `animation` property. The `animation` property takes several values separated by spaces. The first value is the name of the animation (`myAnimation`), followed by the duration of the animation (`2s` in this case), and finally, any additional animation properties such as timing function or delay. In the example above, the animation will scale the element from its initial size to 1.5 times its size and then back to the initial size, creating a simple pulsating effect. The animation will repeat indefinitely (`infinite`) until stopped or removed. You can customize the animation by changing the CSS properties within the `@keyframes` rule and adjusting the animation properties applied to the element. You can animate various CSS properties such as `transform`, `opacity`, `color`, `width`, and more. CSS animations provide a wide range of possibilities for creating engaging and dynamic effects on web pages. You can explore different animation properties, timing functions, and keyframe percentages to achieve the desired animation effects.
In CSS, there are several position properties that control the positioning of elements on a web page. Let's explore each of these position properties with examples: 1. position: This property specifies the positioning method for an element. It can take several values: - `static`: This is the default value, and elements are positioned according to the normal document flow. - `relative`: Elements are positioned relative to their normal position. You can use the `top`, `bottom`, `left`, and `right` properties to offset the element from its original position. - `absolute`: Elements are positioned relative to the nearest positioned ancestor or the containing block. If there is no positioned ancestor, it will be positioned relative to the initial containing block (usually the `` element). - `fixed`: Elements are positioned relative to the viewport and do not move even if the page is scrolled. - `sticky`: Elements are positioned based on the user's scroll position. It toggles between 'relative' and 'fixed'. It behaves like `relative` within its container until a specific offset threshold is reached, after which it behaves like `fixed`. Here are some examples illustrating the usage of CSS position properties: 

/* Example 1: Relative positioning */
.relative-box {
  position: relative;
  top: 20px;
  left: 50px;
}

/* Example 2: Absolute positioning */
.absolute-box {
  position: absolute;
  top: 50px;
  left: 100px;
}

/* Example 3: Fixed positioning */
.fixed-box {
  position: fixed;
  top: 20px;
  right: 20px;
}

/* Example 4: Sticky positioning */
.sticky-box {
  position: sticky;
  top: 50px;
}

.container {
  height: 2000px; /* To create a scrollable container for sticky positioning */
}
In Example 1, the `.relative-box` element is positioned relative to its normal position. It is shifted 20 pixels down from its original position and 50 pixels to the right. In Example 2, the `.absolute-box` element is positioned relative to its closest positioned ancestor or the containing block. It is shifted 50 pixels down from the top edge and 100 pixels to the right from the left edge of its container. In Example 3, the `.fixed-box` element is positioned relative to the viewport. It remains fixed in its position, regardless of scrolling. It is placed 20 pixels down from the top and 20 pixels from the right edge of the viewport. In Example 4, the `.sticky-box` element is initially positioned according to the normal flow of the document. Once the user scrolls past the offset of 50 pixels from the top edge of its containing block (in this case, the `.container`), it becomes "sticky" and behaves like `fixed`, remaining fixed at that position while scrolling. These examples demonstrate how CSS position properties can be used to control the positioning of elements on a web page.
Pseudo elements: A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: ->Style the first letter, or line of an element ->Insert content before, or after, the content of an element 

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
Pseudo classes A pseudo-class is used to define a special state of an element. For example, it can be used to: ->Style an element when a user mouses over it ->Style visited and unvisited links differently ->Style an element when it gets focus 

* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
In CSS, the display property controls how an element is rendered in the document flow. There are three commonly used values for the `display` property: `inline`, `inline-block`, and `block`. Here's a breakdown of the differences between them: 1. `display: inline`: Elements with `display: inline` are rendered as inline elements, meaning they flow within the text content of a line. Inline elements do not start on a new line and only take up as much width as necessary to contain their content. They cannot have a specified width or height, and margins and padding only affect their left and right sides, not top and bottom. Example: 
span {
  display: inline;
}



<span>This is an inline element.</span>
2. `display: inline-block`: Elements with `display: inline-block` are rendered as inline-level elements but with the ability to have a specific width, height, margins, and padding. They flow within the text content like inline elements, but they can have block-level properties applied to them. Inline-block elements start on the same line as the previous content, but they can have line breaks if necessary. Example: 

div {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 5px;
}



<div>This is an inline-block element.</div>
3. `display: block`: Elements with `display: block` are rendered as block-level elements. They start on a new line and take up the full available width by default. Block-level elements can have a specific width, height, margins, and padding. They create a "block" that other elements cannot appear within on the same line. Example: 

div {
  display: block;
  width: 300px;
  height: 200px;
  margin: 10px;
  padding: 5px;
}



<div>This is a block element.</div>
In summary, the key differences between `display: inline`, `display: inline-block`, and `display: block` are: - `display: inline` elements flow within the text content, cannot have a specified width or height, and have limited control over margins and padding. - `display: inline-block` elements flow within the text content but can have a specified width, height, margins, and padding. - `display: block` elements start on a new line, take up the full available width, and can have a specified width, height, margins, and padding. It's worth noting that there are additional values for the `display` property, such as `none` (hides the element), `table` (renders as a table), and `flex` (enables flexible box layout), among others. Each value serves a specific purpose and has its own set of behaviors and characteristics.
Following is the code to implement multi level dropdown : 

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="container">
    <div class="row">
        <h2>Multi level dropdown menu in Bootstrap 3</h2>
        <hr>
        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
                Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
              <li><a href="#">Some action</a></li>
              <li><a href="#">Some other action</a></li>
              <li class="divider"></li>
              <li class="dropdown-submenu">
                <a tabindex="-1" href="#">Hover me for more options</a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#">Second level</a></li>
                  <li class="dropdown-submenu">
                    <a href="#">Even More..</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level</a></li>
                        <li><a href="#">3rd level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Second level</a></li>
                  <li><a href="#">Second level</a></li>
                </ul>
              </li>
            </ul>
        </div>
    </div>
</div>
Media query is a CSS technique introduced in CSS3.It is a technique to apply different styles or layouts to a web page based on the characteristics of the user's device or screen size. Media queries allow web developers to create designs that adapt and look well-organized on various devices, such as desktop computers, laptops, tablets, and smartphones. With media queries, you can set specific CSS rules to trigger only when certain conditions are met, such as the width of the viewport. This enables you to create flexible and responsive designs that provide an optimal viewing experience regardless of the device being used to access the website. Here's an example of a media query in CSS: 

/* This CSS rule will apply to screens with a maximum width of 600 pixels */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
In this example, the `@media` rule specifies a condition for when the screen width is at most 600 pixels. If the screen width matches this condition (i.e., the screen is 600 pixels wide or narrower), the styles inside the curly braces will be applied. In this case, the background color of the `body` element will be changed to light blue. You can also have multiple conditions within a single media query, allowing you to target different screen sizes with different styles: 

/* Styles for screens up to 600 pixels wide */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* Styles for screens between 601 and 1200 pixels wide */
@media (min-width: 601px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }
}
In this second example, the first media query targets screens up to 600 pixels wide with a light blue background color, and the second media query targets screens between 601 and 1200 pixels wide with a light green background color. These examples showcase how media queries allow you to apply different styles based on the characteristics of the screen, creating a responsive design that adapts to various devices.
CSS3 introduced many new features and enhancements to the CSS specification. Below are some of the notable CSS3 features with examples: 1. Border Radius: Allows you to create rounded corners for elements. 

   /* CSS3 */
   .box {
     border-radius: 10px;
   }
2. Box Shadow: Creates a shadow effect around elements. 

   /* CSS3 */
   .box {
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
   }
3. Text Shadow: Adds a shadow effect to the text. 

   /* CSS3 */
   .text {
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   }
4. Gradients: Allows you to create gradient backgrounds. 
   /* CSS3 - Linear Gradient */
   .box {
     background: linear-gradient(to right, #ff0000, #00ff00);
   }

   /* CSS3 - Radial Gradient */
   .circle {
     background: radial-gradient(circle, #ff0000, #00ff00);
   }
5. Transitions: Enables smooth transitions between property values. 

   /* CSS3 */
   .box {
     transition: background-color 0.3s ease;
   }

   .box:hover {
     background-color: #ffcc00;
   }
6. Animations: Allows you to define complex animations. 

   /* CSS3 */
   @keyframes bounce {
     0%, 20%, 50%, 80%, 100% {
       transform: translateY(0);
     }
     40% {
       transform: translateY(-30px);
     }
     60% {
       transform: translateY(-15px);
     }
   }

   .box {
     animation: bounce 2s infinite;
   }
7. Flexbox: A powerful layout system for arranging items within a container. 

   /* CSS3 */
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
   }
8. Grid Layout: A two-dimensional layout system for designing complex web page layouts. 

   /* CSS3 */
   .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 10px;
   }
9. Media Queries: Allows you to apply different styles based on the user's device or screen size. 

   /* CSS3 */
   @media screen and (max-width: 768px) {
     .box {
       font-size: 14px;
     }
   }
10. Transforms: Allows you to perform transformations on elements, such as scaling, rotating, and translating. 

    /* CSS3 */
    .box {
      transform: rotate(45deg);
    }
Conclusion: These are just a few examples of the new features introduced in CSS3. CSS3 brought a wide range of capabilities that enable web developers to create more dynamic and visually appealing web pages without relying on complex JavaScript or images for certain effects.
Using order property as shown in below code :- HTML:- 

<div id="main">
  <div style="background-color:coral;" id="myRedDIV"></div>
  <div style="background-color:lightblue;" id="myBlueDIV"></div>
  <div style="background-color:lightgreen;" id="myGreenDIV"></div>
  <div style="background-color:pink;" id="myPinkDIV"></div>
</div>
CSS:- 

#main {
  width: 400px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
}



#main div {
  width: 70px;
  height: 70px;
}



/* Safari 6.1+ */
div#myRedDIV   {-webkit-order: 2;}
div#myBlueDIV  {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 1;}
div#myPinkDIV  {-webkit-order: 3;}



/* Standard syntax */
div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 1;}
div#myPinkDIV  {order: 3;}