TOP 20 CSS Interview Questions and Answer 2022

CSS Interview Questions and Answer 2021

CSS Interview Questions and Answer 2022

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on the screen,  paper, or in other media. CSS Interview Questions -? CSS saves a lot of work. It can control the layout of multiple web pages all at once.

How to write comments in HTML?

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

How to write comments in CSS?

The comment syntax in CSS works for both single and multi-line comments. You can add as many comments to your stylesheet as you like.

/*
       This is
       a multi-line
       comment
   */
   
   /* This is a single line comment*/
   .group:after {
       content: "";
       display: table;
       clear: both;
   }

CSS Interview Questions and Answer 2022

How to remove dotted lines around the links using CSS?

Make this CSS as!important for all CSS selectors as given in the example below.

/*
       This is
       a multi-line
       comment
   */
   
   /* This is a single line comment*/
   .group:after {
       content: "";
       display: table;
       clear: both;
   }

Top 120+ WordPress interview question 2020?

How to align text vertically center in a DIV element using CSS?

o horizontally center a block element (like <div>), use?margin: auto;

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

How to set the height of a DIV to 100% using CSS?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style>
    html, body {
        height: 100%;
        margin: 0px;
    }
    .container {
        height: 100%;
        background: #f0e68c;
    }
</style>
</head>
<body>
    <div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>
</body>
</html>

How to align a DIV horizontally center using CSS?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Horizontally Center a Div Using CSS</title>
<style>
    .container {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
        background: #f0e68c;
    }
</style>
</head>
<body>
    <div class="container">
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
    </div>
</body>
</html>

How to change the background transparency without affecting the child elements? CSS Interview Questions

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Opacity Using RGBA Colors</title>
<style>
    body {
        background-image: url("images/pattern.jpg");
    }
    p{
        padding: 20px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        font: 18px Arial, sans-serif;
    }
</style>
</head>
<body>
    <p>Setting background transparency without affecting the text content.</p>
</body>
</html>

How to define style sheet only for Internet Explorer?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IE Only Style Sheet</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
</head>
<body>
    <h1>Define Style Sheet for IE</h1>
    <p>If you open this page in IE the output will be different.</p>
</body>
</html>

How to show hide dropdown menu on mouse hover using CSS?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style>
    ul{
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown{
        min-width: 100%; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        display: block;	/* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }
</style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Products &#9662;</a>
            <ul class="dropdown">
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
</body>
</html>

How to remove white space underneath an image using CSS?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove White Space Below Images</title>
<style>
    .img-box{
        width: 125px;
        border: 4px solid #333;
    }
    .img-box img{
        display: block;
    }
</style>
</head>
<body>
    <div class="img-box">
        <img src="images/club.jpg" alt="Club Card">
    </div>
</body>

What is the maximum length of title and meta description tag in HTML?

Meta descriptions can be any length, but Google generally truncates snippets to ~155?160 characters. It’s best to keep meta descriptions long enough that they’re sufficiently descriptive, so we recommend descriptions between 50?160 characters. Keep in mind that the “optimal” length will vary depending on the situation, and your primary goal should be to provide value and drive clicks.

How to highlight alternate table row using CSS?

Use the CSS?":nth-child"?selector

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Coloring Alternate Table Row Using CSS</title>
<style>
    table{
        margin: 30px;
        border-collapse: collapse;
    }
    table tr{
        border-bottom: 1px solid #666;
    }
    table tr:nth-child(2n){
        background: #f2f2f2;
    }
    table th, table td{
        padding: 10px;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Harry</td>
            <td>Potter</td>
            <td>harrypotter@mail.com</td>
        </tr>
    </table>
</body>
</html>

How to fix CSS collapsing parent issue?

The CSS?:afterpseudo-element in conjunction with the content property is used to resolve the collapsing parent issues in the browsers like Firefox, Chrome, Safari, etc.

How to use CSS background properties?

background-color:

The background-color property specifies the background color of an element.

body {
  background-color: lightblue;
}

background-image:

The background-image property specifies an image to use as the background of an element.

body {
  background-image: url("paper.gif");
}

background-repeat:

background-image property repeats an image both horizontally and vertically.

body {
  background-image: url("gradient_bg.png");
}

background-attachment:

background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

background-position:

background-position?property sets the starting position of a background image.

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

What is CSS Border Style properties?

The following values are allowed:

  • dotted?- Defines a dotted border
  • dashed?- Defines a dashed border
  • solid?- Defines a solid border
  • double?- Defines a double border
  • groove – Defines a 3D grooved border.
  • ridge – Defines a 3D ridged border.
  • inset – Defines a 3D inset border.
  • outset – Defines a 3D outset border.
  • none?- Defines no border
  • hidden?- Defines a hidden border

What is position Property in CSS?

The?position?property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

There are five different position values:

  • static
  • relative
  • fixed
  • absolute
  • sticky

What are Pseudo-classes in css?

A pseudo-class is used to define a special state of an element.

Syntax of Pseudo-classes

selector:pseudo-class {
  property: value;
}

Example of Pseudo-classes

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

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

/* selected link */
a:active {
  color: #0000FF;
}

Name of CSS frameworks?

  • Bootstrap
  • Foundation
  • Semantic UI
  • UIkit

What is CSS flexbox?

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C’s candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.

What is CSS flexbox

box-shadow example?in CSS?

box-shadow: 10px 5px 5px red;

box-shadow: 60px -16px teal;

box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);

box-shadow: inset 5em 1em gold;
Join Telegram Join Whatsapp