Top 30 Most Important CSS Interview Questions and Answers

46

What is CSS?

Answer: The full form of CSS is Cascading Style Sheet. It is used to design a
webpage with HTML.

CSS gives an interactive look to the webpage. CSS used with HTML and JavaScript for creating a
user interface for a web application as well as a mobile application.

What CSS do?

Answer: With the help of CSS you can give new look to your old HTML page. Only
doing some few changes in CSS, you can completely change your webpage.

What is the origin of CSS?

Answer: The origin of CSS is SGML (Standard Generalized Markup Language). SGML
is a language which defines markup languages.

What are the different variations of CSS?

Answer: The following are the different variations of CSS:

  1. CSS1
  1. CSS2
  1. CSS2.1
  1. CSS3
  1. CSS4

How many types in HTML to include the CSS?

Answer: There are three ways to include the CSS in the HTML page.

External CSS: The external CSS defines that the CSS code is written outside the
HTML file and calls that CSS file in the HTML page in head tag <head>.

It has the lowest priority than internal and in-line CSS. Priority means if the class blue is
defined in external CSS and also defined in internal CSS then the external CSS class will not be
considered, it overrides by internal CSS.

Example:

<head>

<link href=”style.css” rel=”stylesheet” type=”text/css”
/>

</head>

Internal CSS: The internal CSS means the CSS code is written inside the HTML
page mainly within the style tag.

It has higher priority than external CSS and lower priority than inline CSS

Example:

<head>

<style type=”text/css”>

.blue {

background-color: blue;

color: gray;

}

</style>

</head>

In-line CSS: The internal CSS has the highest priority than both the external
and internal CSS, the in-line CSS is defined in the style attribute in the HTML tag.

Example:

<p style=”font-weight: bold; color: green”> This is an inline CSS example
</p>

What are the advantages of CSS?

Answer: The advantages of CSS are as follows:

  • Accessibility
  • Bandwidth
  • Page reformatting
  • Site-wide consistency
  • Content separated from presentation

What are the limitations of CSS?

Answer: The limitation of CSS is as follows:

  • Limitations of vertical control.
  • Ascending by selectors is not possible.
  • No expressions.
  • No column declaration.
  • Rules, targeting specific text, styles are not possible.
  • Pseudo class not controlled by dynamic behaviour.

What are the CSS frameworks?

Answer: Frameworks are nothing but the pre-defined libraries which made easy and
more convenient to use CSS, the following are some pre-defined CSS frameworks:

  • Bootstrap
  • Foundation
  • UI-kit
  • Semantic UI
  • Gumby

What are the advantages of Embedded Style Sheets?

Answer: The advantages of Embedded Style Sheets are as follows:

  • You can create multiple tag types in the document in the same file.
  • For a complex situation, you can use grouping methods and selector to apply styles.
  • No extra download is required for importing CSS information.

Which are CSS style components?

Answer: The CSS style components are as follows:

What are CSS selectors?

Answer: The HTML tags, classes and ids are selected by CSS and applied it styles
by using selectors.

  • CSS Id Selector (#)
  • CSS Class Selector (.)
  • CSS Universal Selector (*)
  • CSS Group Selector

Here is the example of CSS selectors with all above types.

<html>

<head>

<style>

        /* This is access by using ID attribute */

        #menu {

            background-color: red;

            color: white;

        }

        /* This is access by using Class attribute */

        .menu {

            background-color: green;

            color: white;

        }

        /* This is Universal Selector */

        * {

            font-size: large;

            font-weight: bold;

        }

        </style>

</head>

<body>

        <div id=”menu”>

            This DIV is called CSS property by using ID selector.

        </div>

        <div class=”menu”>

            This DIV is called CSS property by using CLASS selector.

        </div>

</body>

</html>

Show Output

CSS Interview Questions | Margin

What is the use of CSS Opacity?

Answer: The opacity of CSS is nothing but the transparency of an element.
Opacity is the light allowed to travel to the object.

For Example:

<html>

<head>

<style>

.demo{

            background-color: green;

            color: white;

        }

        .demo:hover{

            opacity: 0.5;

        }

        </style>

</head>

<body>

<p>It will change the opacity of this div:</p>

<div class=”demo”>

Hover Me

</div>

</body>

</html>

Show Output

It will change the opacity of this div:

What is the use of a percentage % unit?

Answer: The percentage % unit is used for defining percentage values.

How to set the background color to paragraph?

Answer: To set the background color to a paragraph or any other element, CSS has
background-color property.

Example:

<style>   

p {

    background-color: yellow;

}

</style> 

Answer: The overflow property is used to enable the scrollbar.

Consider the following example:

<html>

<head>

<style>

.sample{

            width: 100%;

            height: 150px;

            overflow: auto;

            background-color: whitesmoke;

 }

</style>

</head>

<body>

<div class=”sample”>

            Scroll Down

            <br><br><br><br><br><br><br><br>

            Here is content of scrollable DIV.

</div>

</body>

</html>

Show Output Scroll Down

Here is content of scrollable DIV.

Explain the difference between class selectors and id selectors.

Answer: The main difference between the class selector and id
sector is the class selector is defined by using a dot (.) symbol and id
selector is defined by using hash (#) symbol.

The one class can be called many times in HTML tag, but the id only called
once.

Example:

<html>

<head>

    <style>

        /* This is access by using ID attribute */

        #att {

            background-color: red;

            color: white;

        }

        /* This is access by using Class attribute */

        .att {

            background-color: green;

            color: white;

        }

      </style>

</head>

<body>

 <div id=”att”>

            This DIV is called CSS property by using ID selector.

        </div>

        <div class=”att”>

            This DIV is called CSS property by using CLASS selector.

        </div>

</body>

</html>

Show Output

CSS Interview Questions | Output

What are the advantages of External Style Sheets?

Answer: The advantages of Eternal Style Sheets are as follows:

  • If you create a class in an external style sheet, then it can be reused in many documents.
  • So with its help, it is easy to control the styles for multiple documents from the single
    file.
  • For complex situations, we can simply use grouping methods or selectors to apply styles.

What is RWD?

Answer: RWD stands for Responsive Web Design. The RWD is a technique to display
webpage design perfectly in desktop, mobile, tablet, and other screens. We do not need to create
a different webpage for each device.

Explain the CSS Box model and its elements.

Answer: The box model of CSS is shown in the figure:

CSS Interview Questions | Box Model
  • Margin: It is an external space of the box. Margin is always transparent.
  • Border: It is an area around the padding.
  • Padding: It is the inner side of the box, it removes an area around the
    content.
  • Content: This is the content section, it contains image, text or any other
    media.

Explain flex property.

Answer: With the help of the flex property, we can arrange the DIV in particular
directions, it is a display type property.

Flex has the following properties:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

If you want to learn more about flex then click the below.

Flex Box Examples | W3School

Example for the flex property:

<html>

<head>

    <style>

        .flex-container {

            display: flex;

            background-color: lightcoral;

        }

        .inner-container {

            flex: 1;

            background-color: #ddd;

            margin: 10px;

            text-align: center;

            font-size: 30px;

            line-height: 75px;

        }

    </style>

</head>

<body>

    <h1>Flexible Boxes</h1>

    <p>Try to resize the browser window.</p>

    <div class=”flex-container”>

        <div class=”inner-container”>1</div>

        <div class=”inner-container”>2</div>

        <div class=”inner-container”>3</div>

        <div class=”inner-container”>4</div>

        <div class=”inner-container”>5</div>

        <div class=”inner-container”>6</div>

        <div class=”inner-container”>7</div>

        <div class=”inner-container”>8</div>

    </div>

</body>

</html>

Show Output

CSS Interview Output | Margin

Explain float property in CSS.

Answer: The float property in CSS specifies how an element should float.

There are five float property values:

  1. none: This is default property, which element does not float, the element will be
    displayed just where it occurs in the text.
  1. left: This property specifies that the element floats to the left of its container.
  1. right: This property specifies that the element floats to the right of its
    container.
  1. initial: This property sets element to its default value.
  1. inherit: This property sets a value from its parent element.

Consider following example:

<html>

<head>

<style>

img {

  float: right;

}

</style>

</head>

<body>

<h1>The float Property</h1>

<p>

<img src=”bike.jpg”
style=”width:170px; margin-left:15px; height:170px; “>

In this following example, the text in the paragraph will wrap around the image and
the image will float to the right in the text. </p>

</body>

</html>

Show Output

CSS Interview Questions | Float Property

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

Answer: The visibility: hidden hides the element and occupies the space for that
element, while display: none property is not shown the element and not occupies the space for
that element.

Consider the following example on visibility: hidden and display: none property.

Example 1 (visibility: hidden):

<!DOCTYPE html>

<html>

<head>

<style>

.hidden {

  visibility: hidden;

}

</style>

</head>

<body>

<h1>Visible heading example</h1>

<h2 class=”hidden”>This is from hidden heading</h2>

<p>Note that the visibility: hidden; heading takes the space.</p>

</body>

</html>

Show Output

CSS Interview Questions

Example 2 (display: none):

<!DOCTYPE html>

<html>

<head>

<style>

.hidden {

  display: none;

}

</style>

</head>

<body>

<h1>Display None example</h1>

<h2 class=”hidden”>This is from display none property.</h2>

<p>Note that the display: none; heading not takes the space.</p>

</body>

</html>

Show Output

CSS Interview Questions

What are the values for the z-index property?

Answer: Z-Index has taken the following values:

  • auto: This property sets the stack order equal to its parents.
  • number: This property orders the stack order.
  • initial: This property sets the value to its default value i.e. 0.
  • inherit: This property sets a value from its parent element.

How could you use your website on mobile or tablet?

Answer: To use the same website in mobile or tablet, CSS provides media
query
for that. With the help of the media query, you can set minimum numbers of
pixels which vary according to mobile or tablet, you can write different code in that media
query.

Consider the following example of a responsive website which change its background color
according to resizing it.

<html>

<head>

    <style>

        body {

            background-color: blue;

        }

        @media screen and (max-width: 1000px) {

            body {

                background-color: red;

            }

        }

    </style>

</head>

<body>Resize the browser to see effect live! (I will change the color from blue to red)</body>

</html>

Show Output


Resize the browser to see effect live! (I will change the color from blue to red)

How to make the rounded corner container by using CSS?

Answer: The border-radius property is used to make a rounded corner
container. This property can apply to any element.

Consider the following example of a rounded corner container:

<html>

<head>

    <style>

        #rcorners1 {

            border-radius: 30px;

            background: #008000;

            color: white;

            padding: 25px;

            width: 200px;

            height: 150px;

        }

    </style>

</head>

<body>

    <h1>The border-radius Property Example</h1>

    <p>Here we give green color for the rounded corner container:</p>

    <p id=”rcorners1″>Rounded corners Container!</p>

</body>

</html>

Show Output

CSS Interview Questions

What is the main difference between padding and margin?

Answer: The padding is the inner space of the container where
the margin is the outer space of the container, just consider the following
example for better understanding.

Here the padding area of the container is red and the margin is in
blue

<html>

<head>

    <style>

        .outer-cntr{

            background-color: blue;

            padding: 10px;

        }

        .sample{

            margin: 20px;

            padding: 20px;

            background-color: red;

        }

    </style>

</head>

<body>

    <h1>Padding Margin Example</h1>

    <div class=”outer-cntr”> <div class=”sample”> </div> </div>

</body>

</html>

Show Output

List all the modules which currently used in CSS (current-version).

Answer: There are several modules which currently used in CSS as stated
below:

  1. Box Model
  1. Selectors
  1. Borders and Backgrounds
  1. Text Effects
  1. Animations
  1. User Interface
  1. 2D/3D Transformations
  1. Multiple Column Layout

In how many formats you can specify the CSS color?

Answer: You can specify the CSS color in different formats is as follows:

  Format    Syntax    Example  
  keyword    red, green, etc.    span { color: blue; }  
  Hex Code    #RRGGBB    span { color: #FF0000; }  
  Short Hex Code    #RGB    span { color: #6A7; }  
  RGB %    rgb(rrr%,ggg%,bbb%)    span { color: rgb(50%,50%,50%); }  
  RGB Absolute    rgb(rrr,ggg,bbb)    span { color: rgb(0,0,255); }  

Which value of the cursor property changes the cursor to a wait?

Answer: To change the cursor style, CSS has a cursor property with its different
values.

To change the cursor into the wait, we have to assign the cursor value to the
wait. Consider the following example.

<html>

<head>

    <style>

        .sample{

            cursor: wait;   

        }

    </style>

</head>

<body>

    <h1>Cursor Wait Example</h1>

    <div class=”sample”> 

        Hover Me to see wait pointer

    </div>

</body>

</html>

Show Output

Cursor Pointer Example

Hover Me to see wait pointer

Differentiate between inline and block element.

Answer: Inline elements has not supported to set width and height and does not
have a line break.

Inline Element Example:

<b>, <i>, <em>, <strong>, <u>, etc.

Block element has able to set the width and height of the container and does have the line break.
It also contains the elements which occur in the inline element.

Block Element Example:

  • width and height
  • min-width and min-height
  • max-width and max-height
  • hi (i=1-6)- heading element
  • p- Paragraph element

LEAVE A REPLY

Please enter your comment!
Please enter your name here