CSS interview questions and answers for students who have completed web development training or css training. All the interview questions for css are prepared by experienced professionals. with adequate knowledge of CSS and web development technologies.

Find the latest interview questions and Answers on CSS

1. What is CSS ?

Answer: The full form of CSS is Cascading Style Sheets. It is a styling language which is simple enough for HTML elements. It is popular in web designing, and its application is common in XHTML also.

2. What is the origin of CSS ?

Answer: Standard Generalized Markup Language marked the beginning of style sheets in 1980s.

3. What are the different variations of CSS ?

Answer: The variations for CSS are:

CSS 1
CSS 2
CSS 2.1
CSS 3
CSS 4

4. What are the limitations of CSS ?

Answer:  Limitations are:

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

5. What are the advantages of CSS?

Answer: Advantages are:

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

6. What are CSS frameworks?

Answer: It is a pre-planned libraries, which allows easier and more standards-compliant webpage styling, using CSS language.

7. What is the purpose of cm measurement unit?

Answer: cm − Defines a measurement in centimeters.

div {margin-bottom: 2cm;}

8. Who maintains the CSS specifications?

Answer: World Wide Web Consortium maintains the CSS specifications.

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

Answer: 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.

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

Answer: 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.

11. Discuss the merits and demerits of Embedded Style Sheets?

Answer: Merits of Embedded Style Sheets:

Multiple tag types can be created in a single document.
Styles, in complex situations, can be applied by using Selector and Grouping methods.
Extra download is unnecessary.

Demerits of Embedded Style Sheets:

Multiple documents cannot be controlled.

12. What does CSS selector mean?

Answer: A string equivalent of HTML elements by which declarations or a set of it, is declared and is a link that can be referred for linking HTML and Style sheet is CSS selector.

13. Enlist the media types CSS allows?

Answer: 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.

14. Differentiate logical tags from physical tags?

Answer:

While physical tags are also referred to as presentational mark-up, logical tags are useless for appearances.
Physical tags are newer versions while logical tags are old and concentrate on content.

15. Differentiate Style Sheet concept from HTML?

Answer: While HTML provides easy structure method, it lacks styling, unlike Style sheets. Moreover, style sheets have better browser capabilities and formatting options.

16. Describe ‘ruleset’?

Answer: 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}

17. Comment on the Case-sensitivity of CSS ?

Answer: Although there are no case-sensitivity of CSS, nevertheless font families, URL’s of images, etc is. Only when XML declarations along with XHTML DOCTYPE are being used on the page, CSS is case -sensitive.

18. Define Declaration block?

Answer: A catalogue of directions within braces consisting of property, colon and value is called declaration block.

e.g.: [property 1: value 3]

19. Enlist the various fonts’ attributes?

Answer:

They are:

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

20. Why is it easy to insert a file by importing it?

Answer: Importing enables combining external sheets to be inserted in many sheets. Different files and sheets can be used to have different functions. Syntax:

@import notation, used with <Style> tag.

21. What is the usage of Class selector?

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

Classname

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

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

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

22. Differentiate Class selector from ID selector?

Answer: While an overall block is given to class selector, ID selector prefers only a single element differing from other elements. In other words, ID are uniques while classes are not. Its possible that an element has both class and ID.

23. Can more than one declaration be added in CSS?

Answer: Yes, it can be achieved by using a semicolon.

24. What is Pseudo-elements?

Answer: 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.

25. What is the purpose of % measurement unit?

Answer: % – Defines a measurement as a percentage relative to another value, typically an enclosing element.

p {font-size: 16pt; line-height: 125%;}

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

Answer: 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.

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

Answer: 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.

28. Enlist the various Media types used?

Answer: Different media has different properties as they are case insensitive.

They are:

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.

29. What is CSS Box Model and what are its elements?

Answer: 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.

30. What is a contextual selector?

Answer: Selector used to select special occurrences of an element is called contextual selector. A space separates the individual selectors. Only the last element of the pattern is addressed in this kind of selector. For e.g.: TD P TEXT {color: blue}

31. Compare RGB values with Hexadecimal color codes?

Answer: A color can be specified in two ways:

A color is represented by 6 characters i.e. hexadecimal color coding. It is a combination of numbers and letters and is preceded by #. e.g.: g {color: #00cjfi}

A color is represented by a mixture of red, green and blue. The value of a color can also be specified. e.g.: rgb(r,g,b): In this type the values can be in between the integers 0 and 255. rgb(r%,g%,b%): red, green and blue percentage is shown

32. How CSS style overriding works?

Answer:

Following is the rule to override any Style Sheet Rule −

Any inline style sheet takes highest priority. So, it will override any rule defined in <style>…</style> tags or rules defined in any external style sheet file.

Any rule defined in <style>…</style> tags will override rules defined in any external style sheet file.

Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.

33. What are the various ways of using CSS in an HTML page?

Answer: There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.

Embedded CSS − The <style> Element: You can put your CSS rules into an HTML document using the <style> element.

Inline CSS − The style Attribute: You can use style attribute of any HTML element to define style rules.

External CSS − The <link> Element: The <link> element can be used to include an external stylesheet file in your HTML document.

Imported CSS − @import Rule: @import is used to import an external stylesheet in a manner similar to the <link> element.

34. How can the dimension be defined of an element?

Answer: Dimension properties can be defined by:

Height
Max-height
Max-width
Min-height
Min-width
Width

35. Define float property of CSS?

Answer: By float property, the image can be moved to the right or the left along with the text to be wrapped around it. Elements before this property is applied do not change their properties.

36. How does Z index function?

Answer: 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.

37. What is graceful degradation?

Answer: In case the component 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. As it is not available to everyone, there is a basic functionality, which enables its use to a wider audience. In case the image is unavailable for viewing, text is shown with the alt tag.

38. What is progressive enhancement?

Answer: 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. It has been into prominent use recently with mobile internet connections expanding their base.

39. How can backward compatibility be designed in CSS?

Answer: HTML sheet methods is collaborated with CSS and used accordingly.

40. How to select all paragraph elements whose lang attribute contains values that are exactly “en”, or begin with “en-“?

Answer: p[lang|=”en”] – Selects all paragraph elements whose lang attribute contains values that are exactly “en”, or begin with “en-“.

41. Why is @import only at the top?

Answer: @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. In C, the # is a prominent example of a @import being at the top.

42. Which among the following is more precedent: CSS properties or HTML procedures?

Answer: CSS is more precedent over HTML procedures. Browsers, which do not have CSS support, display HTML attributes.

43. What is Inline style?

Answer: The Inline style in a CSS is used to add up styling to individual HTML elements.

44. How comments can be added in CSS?

Answer: The comments in CSS can be added with /* and */.

45. Define Attribute Selector?

Answer: It is defined by a set of elements, value and its parts.

46. Define property?

Answer: A style, that helps in influencing CSS. E.g. FONT. They have corresponding values or properties within them, like FONT has different style like bold, italic etc.

47. What is Alternate Style Sheet?

Answer: 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.

48. Are quotes mandatory in URL’s?

Answer: Quotes are optional in URL’s, and it can be single or double.

49. What is at-rule?

Answer: 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.

50. How do you handle browser differences in your user base?

Answer: In the past few years, browsers have come a long way. Modern browsers update automatically and provide pretty good feature coverage. There are still differences between browsers, and while some support certain features (like certain CSS styles), others don’t or display them differently.

Your biggest concern is legacy browsers. You may have seen jokes about Internet Explorer, and while the newer versions aren’t as bad, there are still a lot of people using older versions. These days it’s not uncommon to still support IE9, sometimes even IE8.

This can severely limit the kind of styles you can use, though most can be approximated using fallback styles. The @supports query in CSS can be very useful to scan if the user’s current browser has a certain feature. If they do, you can apply those styles without worry. If not, you can have some fallback styles as a backup.

For more information, have a look at the Mozilla documentation about @supports.

51. Do you use any tools for browser support?

Answer: One of my favourite online tools is caniuse.com. It’s a website that tells you exactly which browsers support which features, including CSS and JavaScript, which can be extremely helpful in finding out what you can and can’t use!

52. Have you used Flexbox & CSS Grid before? What are the differences between them?

Answer: Recently we’ve seen the rise of Flexbox and even more recently, CSS Grid. While these aren’t well supported in older browsers, support for them in newer browsers is continuously growing and now is the time to look into them and see if you can start using them. Make sure you check browser support!

Flexbox is a very useful layout tool, especially for smaller areas within the site. Its main features are to align items in horizontal or vertical axes, space them out automatically, invert the order in which they’re displayed, along with a few other layout options.

CSS Grid is more of a layout tool for the entire page. While Flexbox excels in laying out items along a single axis, Grid is better for layouts with both horizontal and vertical axes, i.e. grids!

CSS preprocessors

53. Do you use any CSS preprocessors, and which do you prefer?

Answer: If you’re working on a medium to large project, it’d be a good idea to use a CSS preprocessor. They allow you to write more concise CSS, split it up into multiple files and use a large number of very useful functions and mixins (you can even create your own!), along with variables.

The main players are Sass (also referred to as SCSS), LESS and Stylus, although arguably Sass is the biggest. I’ll be using Sass in the following examples.

54. What is file splitting and why should you use it?

Answer: File splitting helps organize your CSS into multiple files, decreasing page load time and making things easier to manage. If you’re working with any of the preprocessors above, you can start splitting up your files.

How you decide to split them up is up to you, but it can be useful to separate files by component. For example, you can have all your button styles in a file called _buttons.scss or all your header-specific styles in a file called _header.scss. Then, in your main file, say _app.scss, you can import those files by writing @import ‘buttons’;

This way you can also create separate stylesheets for separate areas of your website, where you might not need all styles. For example, if you have a web app, you probably don’t need to load all styles when people land on your homepage, when they haven’t even logged into your app yet. Simply create another file and import only those styles you need.

55. Which property is used to set the width of a box?

Answer: The width property is used to set the width of a box.

56. Which property is used to set the height of a box?

Answer: The height property is used to set the height of a box.

57. Which property is used to set all the outlining properties in a single statement?

Answer: The outline property is used to set all the outlining properties in a single statement.

58. Which property is used to set the color of the outline?

Answer: The outline-color property is used to set the color of the outline.

59. Which property is used to set the line style for the outline?

Answer: The outline-style property is used to set the line style for the outline.

60. Which property is used to set the width of the outline?

Answer: The outline-width property is used to set the width of the outline.

61. Can you set an image to be shown as cursor?

Answer: Yes! set the url as the source of a cursor image file.

62. Which value of cursor property changes the cursor to a question mark?

Answer: help − A question mark or balloon, ideal for use over help buttons.

63. Which value of cursor property changes the cursor to the an hour glass?

Answer: wait − An hour glass.

64. Which value of cursor property changes the cursor to the ‘I’ bar?

Answer: move or text − The ‘I’ bar.

65. Which value of cursor property changes the cursor to a pointer?

Answer: pointer − A pointing hand (in IE 4 this value is hand).

66. Which value of cursor property changes the cursor to an arrow?

Answer: default − An arrow.

67. Which value of cursor property changes the cursor to a crosshair or plus sign?

Answer: crosshair − A crosshair or plus sign.

68. Which value of cursor property changes the cursor based on context area it is over?

Answer: auto − Shape of the cursor depends on the context area it is over. For example, an ‘I’ over text, a ‘hand’ over a link, and so on.

69. Which property allows you to specify the type of cursor that should be displayed to the user?

Answer: The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.

70. Which property serves as shorthand for the all the padding properties of an element?

Answer: The padding serves as shorthand for the all the padding properties.

71. Which property specifies the right padding of an element?

Answer: The padding-right specifies the right padding of an element.

72. Which property specifies the left padding of an element?

Answer: The padding-left specifies the left padding of an element.

73. Which property specifies the top padding of an element?

Answer: The padding-top specifies the top padding of an element.

74. Which property specifies the bottom padding of an element?

Answer: The padding-bottom specifies the bottom padding of an element.

75. Which property specifies the distance between a marker and the text in the list?

Answer: The marker-offset specifies the distance between a marker and the text in the list.

76. Which property serves as shorthand for the styling properties of a list?

Answer: The list-style serves as shorthand for the styling properties.

77. Which property specifies an image rather than a bullet point or number for the marker of a list?

Answer: The list-style-image specifies an image for the marker rather than a bullet point or number.

78. Which property specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker of a list?

Answer: The list-style-position specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker.

79. Which property allows you to control the shape or appearance of the marker of a list?

Answer: The list-style-type allows you to control the shape or appearance of the marker.

80. Which property specifies the right margin of an element?

Answer: The margin-right specifies the right margin of an element.

81. Which property specifies the left margin of an element?

Answer: The margin-left specifies the left margin of an element.

82. Which property specifies the top margin of an element?

Answer: The margin-top specifies the top margin of an element.

83. Which property specifies the bottom margin of an element?

Answer: The margin-bottom specifies the bottom margin of an element.

84. Which property specifies a shorthand property for setting the margin properties in one declaration?

Answer: The margin specifies a shorthand property for setting the margin properties in one declaration.

85. Which property specifies the width of a border?

Answer: The border-width specifies the width of a border.

86. Which property specifies whether a border should be solid, dashed line, double line, or one of the other possible values?

Answer: The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values.

87. Which property specifies the color of a border?

Answer: The border-color specifies the color of a border.

88. Which property of a table allows browsers to speed up layout of a table by using the first width properties?

Answer: The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.

89. Which property of a table specifies whether the border should be shown if a cell is empty?

Answer: The empty-cells specifies whether the border should be shown if a cell is empty.

90. Which property of a table controls the placement of the table caption?

Answer: The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption.

91. Which property of a table specifies the width that should appear between table cells?

Answer: The border-spacing specifies the width that should appear between table cells.

92. Which property of a table specifies whether the browser should control the appearance of the adjacent borders?

Answer: The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.

93. Which property of a hyperlink signifies an element on which the user is currently clicking?

Answer: The :active signifies an element on which the user is currently clicking.

94. Which property of a hyperlink signifies an element that currently has the user’s mouse pointer hovering over it?

Answer: The :hover signifies an element that currently has the user’s mouse pointer hovering over it.

95. Which property of a hyperlink signifies visited hyperlinks?

Answer: The :visited signifies visited hyperlinks.

96. Which property of a hyperlink signifies unvisited hyperlinks?

Answer: The :link signifies unvisited hyperlinks.

97. Which property is used to set the opacity of an image?

Answer: The -moz-opacity property is used to set the opacity of an image.

98. Which property is used to set the width of an image?

Answer: The width property is used to set the width of an image.

99. Which property is used to set the height of an image?

Answer: The height property is used to set the height of an image.

100. Which property is used to set the width of an image border?

Answer: The border property is used to set the width of an image border.

101. Which property is used to set the text shadow around a text?

Answer: The text-shadow property is used to set the text shadow around a text.