Top 100 CSS Interview Questions and Expert Answers for Content Authors (2024)

Basic CSS Questions (1-30)

1. What is CSS?

   CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML or XML, including layout, colors, and fonts.

2. What are the different ways to apply CSS to a web page?

   Inline CSS (within an HTML tag), Internal CSS (inside a <style> tag in the section), and External CSS (using an external .css file).

3. What is the difference between Inline, Internal, and External CSS?

   Inline CSS is applied directly to the HTML element, Internal CSS is applied within a <style> block inside the , and External CSS is written in a separate .css file linked to the HTML document.

4. How do you apply a background color to an HTML element using CSS?

   Use the background-color property. For example, background-color: yellow;.

5. What is the syntax of a CSS rule?

   A CSS rule consists of a selector and a declaration block:

   selector {
   property: value;
   }

6. What is the box model in CSS?

   The CSS box model describes how elements are structured and consists of margins, borders, padding, and the actual content.

7. How do padding and margin differ in CSS?

   Padding is the space between an element’s content and its border, while margin is the space outside the element’s border.

8. How do you change the text color in CSS?

   Use the color property. For example, color: blue;

9. What is the difference between relative and absolute positioning in CSS?

   position: relative positions the element relative to its normal position, while position: absolute positions the element relative to the nearest positioned ancestor.

10. How do you make a font bold using CSS?

    Use the font-weight property. For example, font-weight: bold;.

11. What is a CSS selector?

    A CSS selector is used to select the HTML elements you want to style.

12. What are CSS pseudo-classes? Give an example.

    Pseudo-classes are used to define a special state of an element. Example: :hover changes the style of an element when the user hovers over it.

13. How can you underline a text in CSS?

    Use the text-decoration property. For example, text-decoration: underline;.

14. What is the use of the z-index property?

    The z-index property controls the stacking order of elements. Elements with higher z-index values appear above those with lower values.

15. How can you apply styles to multiple elements at once in CSS?

    By separating selectors with commas. For example, h1, p { color: red; }.

16. How do you style links using CSS?

    Use the a selector and pseudo-classes like :hover, :visited, and :active.

17. What does display: inline-block do?

    display: inline-block allows an element to maintain its block-level characteristics (width, height) while being placed inline with other elements.

18. What is the float property in CSS?

    The float property is used to position an element to the left or right, allowing other elements to wrap around it.

19. How do you clear floats in CSS?

    Use the clear property, typically set to clear: both; after floated elements to stop the wrapping effect.

20. How do you apply a border to an element in CSS?

    Use the border property. For example, border: 1px solid black;.

21. How do you make a list horizontal in CSS?

    Set display: inline for the

    elements. Example:

    li {
    display: inline;
    }

    What is the use of opacity in CSS?

    The opacity property sets the transparency level of an element, with values ranging from 0 (fully transparent) to 1 (fully opaque).

    How do you hide an element in CSS without removing it from the document flow?

    Use visibility: hidden;. The element remains in the layout but becomes invisible.

    How can you center text within an element?

    Use text-align: center; on the parent container.

    What is a shorthand property in CSS? Give an example.

    A shorthand property lets you set several related properties in one declaration. Example:

    margin: 10px 20px 10px 20px;

    /* sets margin for top, right, bottom, and left */

    How do you set the width and height of an element in CSS?

    Use the width and height properties. Example:

    width: 100px;
    height: 200px;

    What is the use of the overflow property in CSS?

    The overflow property controls what happens when content overflows an element’s box. Common values are visible, hidden, scroll, and auto.

    What is the box-shadow property used for?

    box-shadow applies a shadow effect to an element’s box. Example:

    box-shadow: 10px 10px 5px grey;

    How do you change the cursor when hovering over an element?

    Use the cursor property. Example:

    cursor: pointer;