Top 30 CSS Interview Questions

Coding Tag provides you most repetitive top 30 interviews question and answers of CSS (Cascading Style Sheet). This questions will definitely inspire you and increase your confidence level. Just go through these selective questions before facing any job interview and make a good impression. These questions are in very simple languages that within one read, you can remember all the basic concepts.

1. What is CSS?

CSS Stands for Cascading Style Sheets, Cascading means flow, style mean to design and customization like custom hide, custom position on HTML element, and sheet refers to digital document, which contains size of HTML. CSS is also a markup language similar to HTML, It illustrate how HTML elements are to be shown on screen.

2. Why we use CSS, if we have already HTML for customization?

With the use of CSS, we are able to create more attractive, affecting and customized web pages by doing less coding and reduce time also.

3. What are the requirements for CSS?

a) Web page with HTML structure
b) Browser
c) Text Editor

After these three elements, first we have to create code block of CSS and then establish a link between that CSS code and elements.

4. Explain some benefits of CSS?

a) Viewing options.
b) Browser compatibility.
c) Bandwidth reductions.
d) Creative look.
e) Size of page is less.
f) Simple to implement and learn.
g) Impressive and efficient performance.
h) Download time is faster.
i) It contains SEO (Search Engine Optimization) benefits.
j) It contains lightweight code, which is easy to maintain and update.
k) It contains more accessibility.

5. Type of CSS?

CSS comes in three types
• External
• Internal
• Inline

Internal CSS: In internal CSS, only one page is affected and coding is done between <style></style> of <head> section of particularized page. Classes and IDs are used to refer and reuse that code. Uploading multiple files is not required in internal CSS because both CSS and HTML are in same file. Page loading time is increased.

Inline CSS: Inline styles affect only the specific tag they are applied to. These styles are directly written in the tag in the HTML document.

External CSS: The most acceptable way to add CSS to our website is to link it with external .css file. If there is any modification in external CSS file, it will be globally reflected. The size of HTML page is small and clear. A reference to an external CSS file is put in the <head> section of the page. The styles of numerous documents can be organized from one single file.

6. List the different variations of CSS?

a) CSS 1
b) CSS 2
c) CSS 2.1
d) CSS 3
e) CSS 4
f) CSS 5

7. Who maintains the CSS specifications?

World Wide Web Consortium.

8. Is more than one declaration can be added in CSS?

Yes, it can be added with the use of semicolon.

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

This box specifies layout and design of CSS elements. The elements consist of border, content, padding and margin.
Margin: margin is the top most layer which visualizes overall structure. It clears an area exterior to the border.
Content: The actual content of the box is shown which includes text, images etc.
Border: border is an area around the content and padding. Affected by background color.
Padding: padding is transparent. It clears an area around the content.

10. What are Image sprites with context to CSS?

It acts as image container, containing collections of images, used to reduce the no of server requests network congestion, and to save bandwidth. Website containing large images takes a time to load, and generate no of server requests, image sprites is used to reduce that requests. An image sprite merges multiple images having same size into single image.

The main advantages of image sprites are:

a) User can experience faster load times.
b) Large throughput with low uses of resource.
c) Increase overall web performance.

11. What are shorthand properties?

With the use of one property, we can specify several properties. Shorthand properties in CSS are used to make our code more precise and simple. The most frequently used shorthand properties are list properties, background properties, fond properties, transition properties, and border and outline properties.

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


13. Explain nesting and grouping in CSS?

Nesting and grouping are the two ways to reduce page size and to make code simple.
GROUPING: With the use of same values of properties, selectors can be grouped.

Code can be reduced and rewriting can be avoided.
NESTING: To specify a selector within a selector.

14. What are float properties in CSS?

Float determines how float along the left object or right side. Float properties are mainly used for positioning and layout modification.

float: left;
float: right;
float: none;

15. How can backward compatibility be designed in CSS?

HTML sheet methods are joined together with CSS and accordingly used.

16. Explain the use of Z index function?

It is used to specify stack series of an element. Condition of z index is that it works only on positional elements like position:relative, position:fixed or position:absolute. When CSS is used for positioning, there may occur overlapping, Z index help to specify that overlapping.

17. Differentiate between physical tags and logical tags?

Logical tags are old version whereas physical tags are new versions. Logical tags are not good in appearance where as physical tags are known as presentational- mark up.

18. What is a CSS pre-processor?

It is specially designed program from which we can generate CSS from pre-processor’s own unique syntax. It is also known as scripting language that can extend CSS. It is used to make snippets and libraries sharable, We can able to use mathematical functions, define variables and nested syntax.The most common pre-processor used nowadays are SASS, LESS, Stylus, post CSS.

19. CSS is case sensitive?

CSS is not case sensitive but it acts as case sensitive, when we try to write a document XHML doctype along with XML declaration.

19. What are CSS vendor prefixes? Name some Vender prefixes?

CSS is used to make our website compatible with device. Vender prefix means the prefixes of browser. Normally prefixes are already defined in CSS. After the advancement of CSS, some additional features are added; sometime we are not able to update our old browser. Our old browser does not have any information about the working of some properties. To make our browser aware to these properties, vender prefixes are used. We have to use CJS; it contains all the meaning and working of all the properties.

Following are some familiar vender prefixes:
-moz- (Firefox)
-webkit- (Safari, Chrome)
-ms- (Internet Explorer)
-o- (Opera)
-webkit- (android)

20. How do you define a pseudo class in CSS? What are they used for?

pseudo classes are used to style content dynamically. pseudo_class is keyword added with selector specify special state of an element. For example, To style on focused element.
syntax selector:pseudo-class {

21. How can we add comments in CSS Code?

In CSS code, we can add comments by /* and */.

22. Explain some new properties introduced in CSS3?

Following are some new features introduced in CSS3:

multiple background image

23. What are child selectors in CSS?

Child selectors serve as a method of grouping a block of elements, that cascade from a parent element. It is easy and precise as compared to traditional selector. This selector is used for element matching. Greater than symbol(>) is used between two selectors.
body > p {color: red;}

24. What is the difference between display:none and visibility:hidden?

visibility: hidden It can be used with transition-delay.
It hides the element of the page and affects the layout by taking space.

display: hidden It ignores transition-delay.
It removes the element of the page and allows other elements to fill up space. which means that it does not take up space.

25. Name some new texts added in CSS3?

text-overflow used to signalize the user about non displayed overflowed content.
word-break used to break a words.
word-wrap is the property that allows to break lengthy words and turn out or wrap onto next line.

26. What are the “position” attribute values found in CSS?

Following are the possible attribute found in CSS:


27. What are the use of Gradients in CSS?

Gradients in CSS are used to splash the solution of two or more colors.

For example Ukraine. There are two types of Gradients.

1. Radial
2. Linear

Radial: Radial Gradients arises from center.
Linear: Linear Gradients are used to organize two or more than two colors in linear formats such as top to bottom, bottom to top, or diagonally.

28. Is CSS classes can be declared multiple times?


29. What are the benefits of Media queries in CSS?

Media query is a CSS approach which was introduced in CSS3, in which @media rule has been used. Media queries has been designed to serve specific styles to specific media or devices and to check height, width, orientation and resolution of view point and device.

30. How we can lighten the font weight in CSS?

The property named “font-weight” can be used.

Leave a Reply

Notify of