CSS Interview Questions & Answers

List of CSS Interview Questions & Answers

1. Define CSS?

The full form of CSS is Cascading Style Sheet. This is a styling language which is quite popularly used with HTML for designing websites. This language can also be used with different XML documents including XUL, plain XML, and SVG.

2. Where did CSS originate from?

CSS has originated from Standard Generalized Markup Language (SGML). This language is used to define markup languages.

3. How can CSS be integrated on a web page?

CSS can be integrated into three ways on web pages.

1. Inline Method: This method is used in HTML documents to insert style sheets.

2. Internal/Embedded Method: This method is used in a single document to add unique styles.

3. Imported/Linked/External Method: This method is used to make changes on different pages.

4. Why are the properties of color and background separate even if they are set together?

There are two reasons for the above:

• The background is not an inherited property while color is. This could create confusion.
• It is used to enhance style sheets’ legibility. In CSS the property of background is known to be complex, and when combined with color, the complexity increases further.

5. What are the benefits of Embedded Style Sheets?

• Classes can be created in a document to be used on multiple tag types.
• In a complex situation, styles can be applied by grouping methods and using the selector.
• A person does not have to download anything extra for information importing.

6. What are the benefits of External Style Sheets?

• Classes can be created in multiple documents for reusing it.
• The styles of many documents can be controlled in a single file through its use.
• Grouping methods and selectors can be used to apply styles in complex situations.

7. Define RWD.

The full form of RWD is Responsive Web Design. This method is used for the display of a designed page in a perfect manner on every device or screen size, such as a laptop, mobile, desktop and tablet. There is no need to create different pages for different devices.

8. Compare between physical tags and logical tags.

• Physical tags are known as markup for presentation, whereas, logical tags cannot be used for appearances.
• Physical tags are a new version whereas; logical tags are old versions which focus on content.

9. Define CSS Box model and its elements.

The layout and the design of CSS elements are defined with the help of the CSS Box model.

The elements of the CSS Box model are:

• Margin – The area around the border is removed with it and is transparent.
• Border – The area surrounding the padding.
• Padding – The area surrounding the content it removes with it and is transparent.
• Content – These are texts, images, etc.

10. How can the default property value be restored with the use of CSS?

There is no easy method that can be used by a browser to restore the default values.

However, the nearest option would be to use the ‘initial’ property value, which can help in restoring the default values of CSS, instead of the default styles of the browser.

 

11. Explain the purpose of z-index along with its purpose.

The purpose of z-index is to specify the order of stack of the positioned elements which may have overlapped one another. The value of z-index is zero and can have either a negative or positive number.

An element whose z-index number is high is at all time stacked above than a number with a low index.

The following values can be taken by z-index:

• Auto: The stack order is set equal to the parent
• Number: The stack order is ordered
• Initial: The default value of the property is set which is zero
• Inherit: The parent elements in inherited in the property

12. What does W3C mean?

The full form of W3C is World Wide Web Consortium. The World Wide Web’s information is delivered with this. The Web’s rules and guidelines are also developed with its help.

13. Define tweeing.

This is a process that is used to generate frames which are intermediate between two different images.

Through this the impression that the first image that smoothly mixed with the second image is derived.

In every kind of animation, this method is very important.

Tweeing is used to achieve the Transforms (matrix, rotate, translate, scale) module in CSS3.

14. Differentiate between CSS2 and CSS3.

The most important differentiation between the two is the CSS3 has a division of different sections which are termed as modules. The modules of CSS3 have the support of many browsers which is not present in CSS2.

15. What are the advantages of CSS sprites?

The advantages of CSS sprites usage is as follows:

• This technique is used when a large image is present in which there are different small images. CSS helps in breaking down those small images and then disintegrate them into multiple images.
• There is a faster loading of large images or pages which in turn saves a lot of time. The requests of HTTP are stopped. The layout and design of websites are also flexible due to this.
• The reduction of loading time for web pages is done with CSS sprites as the small images are combined together to form one image. The HTTP requests are reduced which also reduces the loading time.

16. What are the different types of CSS?

There are 3 types of CSS. They are:

1. External – In external CSS, a designer needs to write in separate files.
2. Internal – These are cited at the top of the web page code document.
3. Inline – These are written right next to the text.

17. How can we create rounded corner by CSS?

Designer can create by using “border-radius” property. Here is the code:

 18. What are the properties of flexbox?

There are several properties of flexbox and they are:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

19. What are the properties of dimension?

There are many dimension properties. They are:

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

20. How you remove gap from under the image?

Images are being used or treated same as text. So, we remove gaps from images by using: img { display: block ; }

21. Do you think, quotes are mandatory in URL’s?

No, quotes are optional in URL’s, and be used in single or double.