Top 30 CSS Interview Questions for 2020

Facebooktwitterredditpinterestlinkedinmailby feather

1) Define the process where block elements can be centered with css.

It can be centered by using margin-left and margin-right properties we can centered the block level elements.

2) Name the authority which maintain the CSS Specification.

World Wide Web Consortium maintains CSS Specification.

3) Is CSS case-sensitive or not ?

CSS only there is no case-sensitive but when XML declaration along with XHTML DOCTYPE then it is case sensitive.

4) How can we select the paragraph whose language is “french” only?

In paragraph if we type p[lang~=”fr”] then it select all paragraph with lang attribute=fr.

5) Describe Overriding in CSS Style.

  1. Since, inline style sheet have Highest property therefore it will override all rules defined in <style>…</style> tags.
  2. Rule which are defined in <style> tags will override the rules specify in any external style sheet file.
  3. External Style Sheet has the lowest priority thus, it is executed only when above rules not applicable.

6) Define Browser Safe Color?

Color ranges from- Hexacode 000000 to FFFFFF i.e. all 216 color as assumed all computer run on 256 color palette.

7) Difference between Class selector and ID selector.

Difference is based upon the application of style i.e. Class selector apply style using “Class” whereas ID Selector using “ID”.

8) Does Multiple Declaration exist in CSS?

Yes, with the help of semi-colon(;).

9) Define Pseudo-elements.

In some cases extra styling/markup is not possible then we uses Pseudo Elements to add special effect to some selector.

10) Give the list of all Media type used.

  1. Print: gives a preview of the content when printed
  2. Aural: for sound synthesizers and speech
  3. Handheld: uses handheld devices.
  4. Screen: computers and laptop screens
  5. Projection: projects the CSS on projectors.

11) Define CSS Box Model & its Elements ?

CSS Box Model is used for Design and Layout of element of CSS which are Margin,Border,Content,Padding.

12) What is the use of Z index function?

It is used to specify the overlapping element which occur when CSS is used for positioning HTML elements.

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

CSS can be integrated in three ways:

  1. Inline: gives a preview of the content when printed
  2. Embedded:Style attribute can be used to have CSS applied HTML elements.
  3. Linked:The Head element can have a Style element within which the code can be placed.
  4. Screen:CSS can be placed in an external file and linked via link element.

14) What are the benifits do external CSS have??

Benifits are as follows:

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

15) What are the demerit do external CSS have??

Demerits are as follows:

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

16) Explain media types in CSS?

The design and customization of documents are rendered by media. By applying media control over the external style sheets, they can be retrieved and used by loading it from the network.

17) Describe ruleset in CSS?

Ruleset is an identifier which identifies selectors which are attached to other selectors

18) Define Declaration block?

A catalog of directions within braces consisting of property, colon and value is called declaration block. e.g.: [property 1: value 3]

19) What is the use of Class selector?

Selectors that are unique to a specific style, are called C selectors. Declaration of style and association with HTML is done with class selector.

20) What is 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.

21) What is the use of Class selector?

Selectors that are unique to a specific style, are called C selectors. Declaration of style and association with HTML is done with class selector.

22) What is contextual selector?

Selector used to select special occurrences of an element is called contextual selector. A space separates the individual selectors.

23) What is graceful degradation?

It is described as when the content fails it will continue to work properly in the presence of a graceful degradation. The latest browser application is used when a webpage is designed.

24) What is progressive enhancement?

It’s an alternative to graceful degradation, which concentrates on the matter of the web. The functionality is same, but it provides an extra edge to users having the latest bandwidth.

25) Define Attribute Selector ?

It is defined by a set of elements, value and its parts known as attribute selector.

26) What is Alternate Style Sheet?

Alternate Style Sheets allows the user to select the style in which the page is displayed using the view:page style menu. Through Alternate Style Sheet, user can see a multiple version of the page on their needs and preferences.

27) Enlist the various Media types used?

  • Aural- for sound synthesizers and speech
  • Print- gives a preview of the content when printed.
  • Projection- projects the CSS on projectors.
  • Handheld- uses handheld devices.
  • Screen- computers and laptop screens.

28) Enlist the various fonts attributes?

  • Font-style
  • Font-variant
  • Font-weight
  • Font-size/line-height
  • Font-family
  • Caption
  • Icon

29)What is at-rule?

Rule, which is applicable in the entire sheet and not partly, is known as at-rule. It is preceded by @ followed by A-Z, a-z or 0-9.

30) Enist out the properties of transition in CSS3?

  • Transition-delay
  • Transition-property
  • Transition-duration
  • Transition-timing-function
Facebooktwitterredditpinterestlinkedinmailby feather

Leave a Comment