Top 20 CSS interview questions

  1. What is CSS?

    CSS Stands for Cascading Style Sheets. It is a platform independent web page designing language and it will saves time because we can write this once and use the same in other pages.

  2. What are the ways to integrate css in a web page

    There are three ways to integrate css in a web page

    • Inline : It is used to Apply some styles to an element including its child elements using style attribute
    • Embedded : We can write group of styles with in the html <style></style> tag
    • Linked/ Imported : We can specify an external stylesheet url using the following code <link rel="stylesheet" type="text/css" href="custom.css" />

  3. Listout some widely using CSS Measurement Units

    • px - Defines a measurement in screen pixels.
    • % - Defines a measurement as a percentage relative to another value, mainly an enclosing element.
    • em - It is a relative measurement for the height of a font used in em spaces in a web page. Because 1em unit is equivalent to the size of a given font, if you assign a font to 10pt, each "em" unit would be 10pt; thus, 2em would be 20pt.
    • vh - 1% of viewport height, Viewport measurements are very useful when developing a responsive web page or Hybrid App.
    • vw - 1% of viewport height.
    • vw - 1% of viewport height.

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

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

  5. 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?

    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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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.

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

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

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

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

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

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

  19. Why is @import only at the top?

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

  20. What is contextual selector?

    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}