Top 20+ Popular CSS Interview Questions And Answers

  • By
  • December 20, 2019
  • HTML & CSSWeb Development
Top 20+ Popular CSS Interview Questions And Answers

Top 20+ Popular CSS Interview Questions And Answers

  1. Define selectors. Name them?

Ans- A selector is used to select an element to apply the CSS styles. It can also be used as a condition or a CSS rule to determine the elements that match with the selector.

The different types of selectors are:

Universal selectors, type selector, class selector, id selector, child selector, descendent selector, adjacent sibling selector, attribute selector, query selector.

  1. Name all the modules which are used in the current versions of CSS3?

Ans- There are several modules in CSS as stated below: Box Model, Backgrounds and Borders,Selectors, Text Effects, 2D/3D Transformation, animations, Multiple Column Layout, User Interface.

  1. Differentiate between CSS2 and CSS3?

Ans- CSS2 includes all the sections into a single document with all the information in it.

CCS3 has specifications divided into various sections or modules.

CSS2 not supported by all browsers.

CSS3 supported by all browsers.

  1. Name the different types of CSS?

Ans- There are  three main types of CSS as mentioned below.

Inline CSS- it is written in a single line separated by semicolons. These properties are placed inside the style attribute of the HTML element, on which to apply style.

Internal CSS –it is written within the HEAD element of the HTML document. This style is applied only to the documents in which it is defined and not referenced by any other web document.

External CSS– the CSS file id written outside the HTML document and the reference of the CSS file is placed in the HTML document. The external style sheet is written into a text file with .css extension


  1. Why is external CSS useful as compared to others?

Ans- External CSS is useful as compared to the others for the following reasons:

  1.  It allows to control the look and feel of several documents in one go and do not need to define a specific style for every element.
  2. Allows to easily group styles in a more efficient way.
  3. What are the  main uses  of an embedded style sheet?

Embedded style sheet helps us to define styles in one place in an HTML web document. To embed style sheet information into an HTML document using <style></style> tags in the head of the document.


  1. How to use CSS selectors?

Ans- Selectors are the most important concepts in web development. We can style anything in the web document using the selectors. There are various selectors: Universal selectors – most commonly used. The universal selectors selects all the elements that are present in an HTML document. The syntax is *{}.

Example –


margin: 10 px;

border: 2px, solid;


This will set to all the elements in the HTML or XHTML documents on which the CSS rule is applied.

Type selector – it matches all the elements specified in a list with the given value to determine the elements to which the CSS rules are applied. Example – h1, h2, p {font-size: 10px; color: red;}

Class selector – the class selectors allow to apply CSS rule to  the elements that carry a class attribute whose value matches with the class attribute specified in the class selector. Example – <h1 class = “demo”> header demo </h1>

.demo {

font-size: 10px; color: red;


ID selector – the value of id attribute is unique within a document, hence the selector is applied to the content of one element. The CSS rule is applied to the value of the id attribute.

Example – <h1 id = “demo”> header demo </h1>

#demo {

font-size: 10px; color: red;


Child selector – the child selector used to  match the element that is an immediate child of another element. In the child selector, greater than symbol (>) is used as a combinator. Example –TD>

b {font-size: 10px; color: red }

Descendant selector – it matches an element that is a descendant of another element. It is an element that is nested inside another element.

Adjacent sibling selector – it selects all the elements that are adjacent siblings of a specified element. Sibling elements must have the same parent element. To use an adjacent sibling selector, the plus selector (+) is used as its combinator.

Example – h1+p {font-size: 10px; color: red }

<h1> this is a heading </h1>

<p> this is a paragraph </p>

Query selector – the querySelector() and querySelectorAll() method accept CSS selectors as parameters and return the matching elements node in the document tree.

  1. Explain responsive web design?

Ans- Responsive web application design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The main goal of responsive web design is to build web pages that detect the visitors’ screen size and orientation and change the layout accordingly.

  1. What is CSS specificity?

Ans- If two or more conflicting CSS rules at the same time to the same element, then the browser follows some rules to determine which one is specific and therefore is applied to the element. The selectors in the hierarchy of highest to lowest: inline styles, ID selectors, Classes, Attributes, and Pseudo Classes, Elements and Pseudo Elements,

  1. How do you make rounded corner by using CSS?

The border-radius property is used to apply rounded corners on various HTML elements, such as images, table cells.

For example:

img {

border-radius: 50px;


<!—applying rounded corners in an image– >

  1. Define gradients in CSS?

Ans- CSS gradients helps in displaying smooth transitions between two or more specified colors. There are two types of gradients: Linear gradients and radial gradients. CSS gradients also supports transparency, which can be used to create fading effects.

  1. Define Flex box in CSS?

Ans- The Box Layout Module, helps in design flexible responsive layout structure without using float or positioning attribute.

  1. Define margin, padding?


Margin – it is a CSS property which creates space around elements, or create space to the exterior defined borders. Margin property is of the following types – margin-top, margin –right, margin-bottom, margin-left. The margin property is assigned values as – auto (automatic calculated by browser), length (given by user in px, pt, cm etc), % (given by user depending upon the width of the containing element) and inherit (inherited from the parent element).

Padding – it is a CSS property which creates space around elements, or create space inside any defined borders. Padding property is of the following types – padding-top, padding–right, padding-bottom, padding-left. The padding property is assigned values as –length (given by user in px, pt, cm etc), % (given by user depending upon the width of the containing element) and inherit (inherited from the parent element).

  1. Define Icons?

Ans- Icons on a website are handy. They provide easy visual information, providing links to email forms, telephone numbers, maps and more.The first step is to link to the font from the web document. The name of the given icon class is written in an inline HTML element.

  1. Define Pseudo classes?

Ans- Pseudo classes are predefined classes that enable us to apply certain styling rules on specific states of an element. These classes allow to style visited or unvisited links, or to specify how the links are rendered in response to user actions, or to add specific effects to selectors (selectors are the names given to different styles). A pseudo-class always starts with a colon (:). The syntax to define a pseudo class is:


pseudo-class {property: value ;}

  1. Define Pseudo elements?

Ans- The focused elements in CSS, which are used to apply styles to a portion of a Web page, are called pseudo-elements. Pseudo elements allow you to apply styling rules to a sub parts of elements content. These are called pseudo-elements because they are not a part of the standard markup of HTML. It always starts with a double colon (::). The syntax to define a pseudo-elements is:

Selector:: pseudo-element {property: value ;}

  1. Define opacity?

Ans- Opacity effects helps to modify HTML elements. It allows to change the transparency of HTML elements using the opacity property.

Example –

demo {

Opacity: 0.6


Note:This property takes values from 0.0 to -1.0. Lower the value the more transparent.

  1. Explain position status in CSS.

Ans- The position property is used to map the element slots with the elements. It specifies the row and column template in which an element will be placed. The position syntax is as – position: static|absolute|fixed|relative|sticky|initial|inherit;

Static – Default value. Elements come into view in the order or in the document flow.

Absolute –element is located relative to its first placed predecessor element.

Fixed – the element is located relative to the browser window.

Relative –the element is located relative to its normal position.

Sticky – the element is positioned based on the user’s scroll position.

Initial – sets the property to its default value.

Inherit – it inherits the property from the parent element.

  1. Explain navigation bar in CSS?

A navigation bar requires a HTML web document as base. A navigation bar is basically a list of links.

  1. Differentiate between relative and absolute in CSS?

Ans- The main difference between relative and absolute is that “relative” is used for the same tag in CSS and it means that if we write the left:10px then the padding will move to 10px in the left while absolute is totally relative to the non-static parent. It means if we write left:10px then the result will be 10px far from the left edge of the parent element.

  1. Define important declaration used in CSS?

Important is a property in CSS. An !important declaration provides a way for a style sheet author to give a CSS value more weight than it naturally has.

  1. Define different cascading methods used in cascading order?

When selling with cascading order and inheritance, here are three main rules to keep in mind:

If two rules come into clash, then the last one used will take priority. When used in the same element, selector precedence occurs in this order (3 being the highest precedence):

  • Element
  • Class
  • ID
  • If two styles come into clash in the same element, and one has the !important rule assigned to it, so the highest priority to !important.
  1. Differentiate between inline and block elements


Inline elements Block elements
It does not start on a newline and only takes up as much width as necessary. It always starts on a new line and take up the complete available width.
Example -<br>,  <a>, <i>, <button>, <img> etc. Example-<form>,<nav>,<div>,  <header>, <table>etc


  1. How is the concept of inheritance applied in CSS?

Ans- In CSS inheritance can be applied to the child element of an element by simply applying the property to the element. For example – if the font family property is declared for the BODY element, it is automatically applied to all the elements present inside the BODY element.

  1. Differentiate between id and class?


Id Class
It is a unique identifier which is used to specify the document. The class attribute is used to specify one or more class names for HTML element.
The id attribute is written using # symbol followed by id. The class name in CSS style sheet using “.” Symbol.
Id is unique in a page and can be applied to at most one element. Class selector can be applied to multiple elements.



Manisha Jadhav

Call the Trainer and Book your free demo Class for JAVA now!!!

call icon

© Copyright 2019 | Sevenmentor Pvt Ltd.

Submit Comment

Your email address will not be published. Required fields are marked *