Javatpoint Logo

91-9990449935

 0120-4256464

JavaTpoint

CSS Interview Questions

A list of top frequently asked CSS interview questions and answers are given below.

1) What is CSS?

CSS stands for Cascading Style Sheet. It is a popular styling language which is used with HTML to design websites. More details...

2) What is the origin of CSS?

SGML (Standard Generalized Markup Language) is the origin of CSS.

3) What are the different variations of CSS?

Following are the different variations of CSS:

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

4) How can you integrate CSS on a web page?

There are three methods to integrate CSS on web pages.

  1. Inline method
  2. Embedded/Internal method
  3. Linked/Imported/External method
More details...

5) What are the advantages of CSS?

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

6) What are the limitations of CSS?

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

7) What are the CSS frameworks?

CSS frameworks are the preplanned libraries which makes easy and more standard compliant web page styling.

8) Why background and color are the separate properties if they should always be set together?

There are two reasons behind this:

  • It enhances the legibility of style sheets. The background property is a complex property in CSS and if it is combined with color, the complexity will further increases.
  • Color is an inherited property while background is not. So this can make confusion further.

9) What is Embedded Style Sheet?

An Embedded style sheet is a CSS style specification method used with HTML. You can embed the entire style sheet in an HTML document by using the STYLE element. More details...

10) What are the advantages of Embedded Style Sheets?

  • You can create classes for use on multiple tag types in the document.
  • You can use selector and grouping methods to apply styles in complex situations.
  • No extra download is required to import the information.

11) What is CSS selector?

It is a string that identifies the elements to which a particular declaration will apply. It is also referred as a link between the HTML document and the style sheet. It is equivalent of HTML elements. More details...

12) What is ruleset?

Ruleset is used to identify that selectors can be attached with other selectors. It has two parts:

  • Selector
  • Declaration

13) What is the difference between class selectors and id selectors?

An overall block is given to class selector while id selectors take only a single element differing from other elements. More details...

14) What are the advantages of External Style Sheets?

  • You can create classes for reusing it in many documents.
  • By using it, you can control the styles of multiple documents from one file.
  • In complex situations, you can use selectors and grouping methods to apply styles.
More details...

15) What is the difference between inline, embedded and external style sheets?

Inline: Inline Style Sheet is used to style only a small piece of code.

Embedded: Embedded style sheets are put between the <head>...</head> tags.

External: This is used to apply the style to all the pages within your website by changing just one style sheet.

16) What is RWD?

RWD stands for Responsive Web Design. This technique is used to display the designed page perfectly on every screen size and device. For example: Mobile, Tablet, desktop, laptop etc. You don't need to create a different page for each device.

17) What are the benefits of CSS sprites?

: If a web page has large no. of images that takes a longer time to load because each image separately sends out an http request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of http requests and hence the loading time.

18) What is the difference between logical tags and physical tags?

  • Physical tags are referred to as presentational mark-up while logical tags are useless for appearances.
  • Physical tags are newer versions on the other hand logical tags are old and concentrate on content.

19) What is the CSS Box model and what are its elements?

The CSS box model is used to define the design and layout of elements of CSS.

The elements are:

  • Margin
  • Border
  • Padding
  • Content

20) What is the float property of CSS?

The CSS float property is used to move the image to the right or left along with the texts to be wrapped around it. It doesn't change the property of the elements used before it. More details...

21) How to restore the default property value using CSS?

In short, there is no easy way to restore to default values to whatever a browser uses.

The closest option is to use the 'initial' property value, which will restore the default CSS values, rather than the browser's default styles.

22) What is the purpose of the z-index and how is it used?

The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero, and can take on either a positive or negative number.

An element with a higher z-index is always stacked above than a lower index.

Z-Index can take the following values:

  • Auto: Sets the stack order equal to its parents.
  • Number: Orders the stack order.
  • Initial: Sets this property to its default value (0).
  • Inherit: Inherits this property from its parent element.

23) Explain the difference between visibility: hidden and display: none?

visibility: hidden simply hides the element but it will occupy space and affect the layout of the document.

display: none also hides the element but will not occupy space. It will not affect the layout of the document.

24) What do you understand by W3C?

W3C stands for World Wide Web Consortium.

25) What is tweening?

It is the process of generating intermediate frames between two images.

It gives the impression that the first image has smoothly evolved into the second one.

It is an important method used in all types of animations.

In CSS3, Transforms (matrix, translate, rotate, scale etc.) module can be used to achieve tweening.

26) What is the difference between CSS2 and CSS3?

The main difference between CSS2 and CSS3 is that CSS3 is divided into different sections which is also known as modules.

Unlike CSS2, CSS3 modules are supported by many browsers.