CSS Interview Questions And Answers

SOOPRO Pathshala provides CSS Interview Questions and Answers

1. What is CSS?

CSS stands for Cascading Style Sheet. It is used with HTML to design websites.

2. What is the origin of CSS?

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

3. What are the different versions of CSS?

Following are the different versions of CSS

• CSS 1
• CSS 2
• CSS 3
• CSS 4

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

There are three ways to integrate CSS on a web pages

• Inline CSS - It is used to insert style sheets in HTML document.
• Internal CSS - It is used to add a unique style to a single page.
• External CSS- It is used when you want to make changes on multiple pages.

5. What are the advantages of CSS?

Following are the advantages of using CSS:

• The style of several documents can be controlled from a single site by using them.
• Multiple HTML elements can have many documents, where classes can be created.
• To group styles in complex situations, selector and grouping methods are used.

6. What are the disadvantages of using CSS?

Following are the disadvantages of using CSS

• Ascending by selectors is not possible
• Limitations of vertical control
• No expressions
• No column declaration
• Rules, styles, targeting specific text not possible

7. Name few CSS framework?

• Bootstrap
• Foundation
• Semantic UI
• UIkit

8. What is the difference between the usage of an ID and a class?

ID is unique. A particular ID can be only assigned to a single element.
Class are not unique and multiple elements can have the same class.

9. What is a CSS selector?

A CSS selector permits you to choose and operate HTML elements.
CSS selectors are used to selecting or find HTML elements created on their id, class, type, etc.

10. What is the difference among inline, inline-block, and block elements?

Block Element:Block elements always start on a new line and occupy an entire row or width.
Examples of block elements are 'div' and 'p' tag.

Inline Elements:Inline elements do not start on a new line; they appear on the same line as the content and tags beside them
Examples of inline elements are 'a', 'strong' and 'img' tags.

Inline-block Elements:Inline-block elements are similar to inline elements, but they can have padding, margins, and set height and width values.

11. What is a responsive web design?

A responsive web design is about design and development that responds to the user activities and the components involved such as screen size, platform, and orientation.
It comprises a mix of flexible grids, layouts, images, and intellectual use of CSS mdeia queries.

12. Tell me all three elements of CSS 3?

CSS 3 has following elements

• Selector
• Property
• It's Value

13. Tell me all three elements of CSS 3?

To change the font size of an element in CSS, you can use the font-size property. The font-size property can accept various units like px(pixels), em, rem , % (percentage) and more.

14. What is the float property used for in CSS?

The float property in CSS is used to position an element to the left or right of its containing element, allowing other elements to wrap around it. It is commonly used for creating layouts with multiple columns or for aligning images within text.

15. What is the CSS display property used for?

The CSS display property is used to control how an element is rendered on the page. It defines the display behavior of an element - whether it should be treated as a block-level element, an inline element, or other display types like flex or grid.

16. How do you add a background image to an element in CSS?

To add a background image to an element in CSS, you use the background-image property. You 'll need to provide the URL of the image file within the url() function as the property' value.

17. What is the purpose of the CSS opaciy property?

The CSS opacity property is used to control the transparency of an element. It accepts a value between 0(completely transparent) and 1 (fully opaque).

18. How do you implement CSS animations and transitions?

CSS animations and transitions allow you to add dynamic effects to elements.

19. What do you understand by the universal selector?

A universal selector is a selector that matches any element type's name instead of selecting elements of a particular type.

20. What are the elements of the CSS Box Model?

The CSS box model defines the layout and design of CSS elements. The elements are content (like text and images, padding (the area around content), border (the area around padding), and margin (the area around the border).