CSS Interview Questions
1 .
What do you know about graceful degradation?
Graceful degradation is about creating a website design that will be compatible with the latest browsers and, at the same time, will remain functional to an extent on smaller screens and older browsers. I use the principle of graceful degradation in my web development work, as many of our viewers still use older browsers and it is important that they should be able to access and view our website.
2 .
What is file splitting, and what is its benefit?
File splitting is about splitting the CSS code into many separate files and organizing them according to the component type or site section to facilitate better management of CSS. You can create and assign a separate style sheet for each of these files for further convenience. So, when someone visits a section of the website, only the style sheets for that section will load. The style sheets for the other website sections will not load until specifically needed. I've found that this reduces the time taken for the page to load on the browser. That then leads to quicker access to websites and enhances user experience.
3 .
What is the use of opacity in CSS?
The opacity is mainly used in defining the transparency of the element. In other words, it specifies the clarity of an image by allowing some fixed size of light to pass through it.
 
Example : 
<style>
    img{
         height:250px;
          width:250px;
          opacity:50px;
    }
</style>
4 .
Which property is used for controlling image repetition in the background?
The background-repeat property is responsible for controlling the image repetition. Using this property, we can repeat an image horizontally, vertically, or both. It has the following different values:
 
repeat: it repeats the image horizontally and vertically
repeat-x: it repeats the image horizontally
repeat-y: it repeats the image vertically
no-repeat: it does not repeat the image.
 
Example :
 
<style>
   div {
          background-image:url(freetimelearn_logo.jpeg);
          background-repeat:no-repeat;
         }
</style>
5 .
How we can override CSS?
With the help of !important we can override CSS properties.
 
Example : 
                                                    
.left_side{
    width:30%;
     }

.left_side{
    width:40% !important;
    } 
6 .
List some CSS frameworks?
* Bootstrap
* Semantic
* Materialize
* Bulma
* Foundation
* Pure CSS etc
7 .
What is float in CSS?
The float property in CSS places an element on the right or left side of its container, allowing text and inline elements to wrap around it.
 
Example :
                                                    
.right_side{
      float: right;
      width:30%;
  }
8 .
How to make scroll bars with the help of CSS?
The CSS overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area.
 
Property of overflow is given below :
 
* visible
* hidden
* auto
scroll
9 .
What is CSS unicode-bidi Property?
The unicode-bidi property is used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.
 
CSS unicode-bidi property example :
 
div {
  direction: rtl;
  unicode-bidi: bidi-override;
}
10 .
What is CSS text-indent Property?
The text-indent property specifies the indentation of the first line in a text-block.
 
Example :
 
p {
   text-indent: 50px;
}