Top CSS Interview questions 2022

Q1. 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.

Q2. What benefits and demerits do External Style Sheets have ?

BENEFITS:

• 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.

DEMERITS :

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

Q3. 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}

Q4. 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.

Q5. 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.

Q6. What are Pseudo-elements ?

Pseudo-elements are used to add special effects to some selectors. CSS in 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.

Q7. Can default property value be restored through CSS?

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.

Q8. 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 colour affects the border.
• Content: Actual content is shown.

Q9. How does Z-index function?

Overlapping may occur while using CSS for positioning HTML elements. Z index helps in specifying the overlapping element. It is a number which can be positive or negative, the default value being zero.

Q10. Why is @import only at the top?

@import is preferred only at the top, to avoid any overriding rules. Generally, ranking order is followed in most programming languages such as Java, Modula, etc. If you compare it with C language, the # is a prominent example of a @import being at the top.

Did you find these question helpful? Please let us know through comments and sharing the post with your friends.