Top 50 CSS interview questions in 2022

In how many ways can a CSS be integrated as a web page?

CSS can be integrated in three ways:

  • Inline: Style attribute can be used to have CSS applied HTML elements.
  • Embedded: The Head element can have a Style element within which the code can be placed.
  • Linked/ Imported: CSS can be placed in an external file and linked via link element.

What benefits and demerits do External Style Sheets have ?


  • One file can be used to control multiple documents having different styles.
  • Multiple HTML elements can have many documents, which can have classes.
  • To group styles in composite situations, methods as selector and grouping are used.


  • Extra download is needed to import documents having style 
  • To render the document, the external style sheet should be loaded.
  • Not practical for small style definitions.

Describe ‘Ruleset’?

Ruleset: Selectors can be attached to other selectors to be identified by ruleset.

It has two parts:

  • Selector, e.g. R and
  • declaration {text-indent: 11pt}

What happens if 100% width is used along with floats all across the page?

While making the float declaration, 1 pixel is added every time it is used in the form of the

border, and even more float is allowed thereafter.

What is the usage of Class selector ?

Selectors that are unique to a specific style, are called CLASS selectors. Declaration of style and association with HTML can be made through this.



it can be A-z, a-z or digits.

.top (font: 14em ;}, class selector

<Body class= “top”> this class is associated with element /body

What are Pseudo-elements ?

Pseudo-elements are used to add special effects to some selectors. CSS is used to apply styles in HTML mark-up. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements.

It will allow extra mark-up to the document without disturbing the actual document.

Can default property value be restored through CSS? If yes, how?

In CSS, you cannot revert back to old values due to lack of default values. The property

can be re-declared to get the default property.

What is  CSS Box Model and What are its elements ?

This box defines  design and layout of elements of CSS.

The elements are:

  • Margin: The top most layer, the overall structure is shown
  • Border: The padding and content option with a border around it is shown. Background color affects the border.
  • Padding: Space is shown. Background color affects the border.
  • Content: Actual content is shown.

Leave a Reply

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