CSS Interview Questions & Answers – Beginner Level

1. What is CSS?

CSS (Cascading Style Sheets) is a language used to style and format the appearance of HTML elements on a webpage, controlling layout, colors, fonts, and more.

2. How do you link a CSS file to an HTML document?

Use the <link> tag in the <head> section.

<link rel="stylesheet" href="styles.css">

3. What is the difference between inline, internal, and external CSS?

Inline CSS: applied via the style attribute in HTML tags.
Internal CSS: defined in a <style> tag in the <head>.
External CSS: stored in a separate .css file.

4. What is a CSS selector?

A selector targets HTML elements to apply styles, e.g., element (p), class (.class), or ID (#id).

5. What is the difference between a class and an ID selector?

A class (.class) can be applied to multiple elements, while an ID (#id) is unique to one element.

6. What does the color property do?

It sets the text color of an element.

 p { color: blue; }

7. What is the background-color property?

It sets the background color of an element.

div { background-color: #f0f0f0; }

8. What is the box model in CSS?

The box model represents an element’s structure, consisting of content, padding, border, and margin.

9. How do you center text horizontally?

Use text-align: center;.

p { text-align: center; }

10. What is the margin property?

It defines the space outside an element’s border.

div { margin: 10px; }

11. What is the padding property?

It defines the space inside an element, between the content and border.

div { padding: 15px; }

12. How do you set the font size of an element?

Use the font-size property.

h1 { font-size: 24px; }

13. What is the display property?

It controls how an element is rendered, e.g., block, inline, or inline-block.

14. What is the difference between block and inline elements?

Block elements (e.g., <div>) take the full width and start on a new line, while inline elements (e.g., <span>) take only the content’s width and stay in the flow.

15. How do you hide an element in CSS?

Use display: none; or visibility: hidden;.

div { display: none; }

16. What is the float property?

It positions an element to the left or right, allowing content to wrap around it.

Example: img { float: left; }

17. How do you clear a float?

Use the clear property or a clearfix.

Example:

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

18. What is the font-family property?

It specifies the font for text.

 p { font-family: Arial, sans-serif; }

19. What does the text-decoration property do?

It controls text decoration, like underlines or strikethroughs.

a { text-decoration: none; }

20. How do you set the width and height of an element?

Use the width and height properties.

div { width: 200px; height: 100px; }

21. What is the border property?

It defines an element’s border style, width, and color.

div { border: 1px solid black; }

22. What is the line-height property?

It sets the height of a line of text.

p { line-height: 1.5; }

23. What is the opacity property?

It sets the transparency of an element (0 to 1).

img { opacity: 0.5; }

24. How do you apply styles to a specific element state, like hover?

Use pseudo-classes like :hover.

a:hover { color: red; }

25. What is the position property?

It defines the positioning method of an element, e.g., static, relative, absolute, or fixed.

26. What is the difference between relative and absolute positioning?

relative positions an element relative to its normal position, while absolute positions it relative to its nearest positioned ancestor.

27. What is the z-index property?

It controls the stacking order of elements. Higher values appear in front.

div { position: absolute; z-index: 10; }

28. How do you apply multiple classes to an element?

Add multiple class names in the class attribute, separated by spaces.

<div class="class1 class2"></div>

29. What is the text-transform property?

It controls text capitalization, e.g., uppercase, lowercase, or capitalize.

p { text-transform: uppercase; }

30. What is the purpose of the universal selector (*)?

It selects all elements in the document.

* { margin: 0; padding: 0; }