CSS interview questions

1. What is CSS?

CSS stands for Cascading Style Sheets. It defines how HTML elements look on a page. It keeps content and presentation separate.

Full lesson: Css intro

2. What are the two main parts of a CSS rule?

A CSS rule has a selector and one or more declarations. The selector names the HTML element. Each declaration has a property and a value.

p { color: red; text-align: center; }

Full lesson: Css syntax

3. How do you write a CSS comment?

Start the comment with a slash and an asterisk. End it with an asterisk and a slash. The browser ignores the text between them.

/* This is a comment */

Full lesson: Css syntax

4. What is the difference between the id selector and the class selector?

The id selector styles one element with a specific id. The class selector styles a group of elements. Write the id selector with a hash sign and the class selector with a dot.

#para1 { color: red; }
.center { text-align: center; }

Full lesson: Css id class

5. How do you change the marker of a list item?

Use the list-style-type property. It sets the marker for ordered and unordered lists. You can also use an image as the marker.

ul { list-style-type: square; }

Full lesson: Css list

6. How do you add a border to a table?

Use the border property on the table cells. Set the border on the th and td elements. The browser draws a line around each cell.

th, td { border: 1px solid black; }

Full lesson: Css table

7. How do you change the font of text?

Use the font-family property. List one or more font names. The browser uses the first font it finds.

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

Full lesson: Css font

8. How do you change the color and alignment of text?

Use the color property to set the text color. Use the text-align property to set the alignment. Both properties accept simple values.

p { color: blue; text-align: center; }

Full lesson: Css text

9. How do you style the four states of a link?

Use the link, visited, hover, and active pseudo-classes. Write hover after link and visited. Write active after hover.

a:link { color: red; }
a:hover { color: blue; }
a:active { color: green; }

Full lesson: Css pseudo classes

10. How do you make an image responsive?

Set the max-width property to 100 percent. Set the height property to auto. The image then never grows past its original size.

img { max-width: 100%; height: auto; }

Full lesson: Css rwd images

11. How do you select an element by its attribute?

Put the attribute name in square brackets. The selector then matches every element with that attribute. You can also match an exact value.

[type] { border: 1px solid red; }

Full lesson: Css attribute selectors

12. How do you make an image transparent?

Use the opacity property. A value of 0.4 makes the image 40 percent visible. The value range is 0 to 1.

img { opacity: 0.4; }

Full lesson: Css image transparency

13. How do you write a media query for a small screen?

Use the @media rule with a max-width condition. Put the styles for small screens inside the braces. The browser applies them only when the condition is true.

@media screen and (max-width: 600px) {
  body { background: lightblue; }
}

Full lesson: Css mediatypes

14. Why does a hover style sometimes not work?

The order of the link rules is wrong. The hover rule must come after the link and visited rules. Move the hover rule down to fix it.

a:link { color: red; }
a:visited { color: green; }
a:hover { color: blue; }

Full lesson: Css pseudo classes

15. Why does an id style sometimes fail in Firefox?

The id starts with a number. Firefox does not accept an id that starts with a number. Rename the id so it starts with a letter.

#1box { color: red; } /* fails */
#box1 { color: red; } /* works */

Full lesson: Css id class

16. What does a CSS selector do?

A CSS selector selects the HTML elements that you want to style. It matches elements by name, class, id, or other patterns.

p { color: blue; }

Full lesson: Css selectors

17. How do you apply the same style to many elements?

Use a class selector. A class name can be used on many elements in one document.

.highlight { background-color: yellow; }

Full lesson: Sel class

18. What is a pseudo-class?

A pseudo-class adds a special effect to a selector. It selects an element in a certain state, such as when the mouse is over it.

a:hover { color: #FF00FF; }

Full lesson: Css pseudo classes

19. How do you center a block element horizontally?

Set a width on the element. Then set the left and right margins to auto.

.center { margin: auto; width: 50%; }

Full lesson: Css align

20. What does the float property do?

The float property moves an element to the left or right. Other elements wrap around it.

img { float: right; }

Full lesson: Css float

21. How do you make a form input fill the width of its container?

Set the width property to 100%. Also set box-sizing to border-box to include padding and border in the width.

input[type=text] { width: 100%; box-sizing: border-box; }

Full lesson: Css form

22. What is an image sprite?

An image sprite is a collection of images in one file. It reduces the number of server requests and saves bandwidth.

.home { width:46px; height:44px; background:url(img_navsprites.gif) 0 0; }

Full lesson: Css image sprites

23. How do you use the inherit keyword?

The inherit keyword makes a property take the value of its parent element. You can use it on any CSS property.

span { color: blue; } .extra span { color: inherit; }

Full lesson: Css inherit

24. What does the calc() function do?

The calc() function calculates a property value. You can mix units, such as percentages and pixels, in one expression.

div { width: calc(100% - 50px); }

Full lesson: Css functions

25. Why must a:hover come after a:link and a:visited?

The order controls which rule wins when two rules have the same specificity. If a:hover comes first, the link and visited rules override it.

a:link { color: #FF0000; } a:visited { color: #0080FF; } a:hover { color: #FF00FF; }

Full lesson: Css link

26. Why does margin: auto not center an element?

The element needs a set width. If the width is 100% or not set, the margins have no space to share.

.center { margin: auto; width: 50%; }

Full lesson: Css align

27. Why does an opacity value of 40 not make an image transparent?

The opacity property takes a value from 0 to 1. A value of 40 is invalid and the browser ignores it.

img { opacity: 0.4; }

Full lesson: Css image transparency

28. Why does a class selector not match an element?

The class name in the HTML must match the class name in the CSS exactly. The selector must start with a dot.

.intro { background-color: yellow; }

Full lesson: Sel class

29. Why does an attribute selector not work in old browsers?

Attribute selectors are supported from Internet Explorer 7 onward. Internet Explorer 6 and earlier do not support them.

[type] { border: 1px solid red; }

Full lesson: Css attribute selectors

30. Why does a floated element cause the parent to collapse?

A floated element is removed from the normal flow. The parent does not see its height, so the parent can collapse.

.parent::after { content: ""; display: table; clear: both; }

Full lesson: Css float

31. How do you select all elements that use a specific class?

Write a dot before the class name. The selector .intro matches every element with class="intro".

.intro {
  background-color: yellow;
}

Full lesson: Sel class

32. How do you apply one class to many elements on a page?

Add the same class name to each element. One CSS rule then styles all of them.

<p class="highlight">First</p>
<p class="highlight">Second</p>

Full lesson: Sel class

33. What are the common types of CSS selectors?

CSS has element, class, id, and attribute selectors. Each type selects elements in a different way.

p { color: blue; }
.intro { color: green; }

Full lesson: Css selectors

34. How do you select all paragraph elements on a page?

Use the element name as the selector. The rule p selects every <p> element.

p {
  color: blue;
}

Full lesson: Css selectors

35. What does the inherit keyword do?

The inherit keyword takes the value of a property from the parent element. You can use it on any CSS property.

.extra span {
  color: inherit;
}

Full lesson: Css inherit

36. How do you make one element take the text color of its parent?

Set the color property to inherit. The element then uses the parent color.

span {
  color: blue;
}
.extra span {
  color: inherit;
}

Full lesson: Css inherit

37. What is a CSS function?

A CSS function returns a value for a property. Examples are calc(), attr(), and linear-gradient().

div {
  width: calc(100% - 40px);
}

Full lesson: Css functions

38. How do you calculate a length value in CSS?

Use the calc() function. It lets you mix units in one expression.

div {
  width: calc(100% - 40px);
}

Full lesson: Css functions

39. How do you pick the smaller or larger of two values in CSS?

Use the min() function to pick the smaller value. Use the max() function to pick the larger value.

div {
  width: min(50%, 300px);
}

Full lesson: Css functions

40. How do you get the value of an HTML attribute in CSS?

Use the attr() function. It returns the attribute value of the selected element.

a::after {
  content: attr(href);
}

Full lesson: Css functions

41. Why does a class selector with a capital letter not match?

Class names are case-sensitive in some modes. Write the class name exactly as it appears in the HTML.

<p class="Intro">Text</p>
/* .intro does not match */

Full lesson: Sel class

42. Why does a rule with the wrong selector not apply?

A selector must match the element exactly. Check the element name, the dot, and the spelling.

/* wrong */
p.intro { color: red; }
/* right */
.intro { color: red; }

Full lesson: Css selectors

43. Why does inherit not change a property on the parent?

The inherit keyword only reads the parent value. It does not set the parent value.

span {
  color: blue;
}
.extra span {
  color: inherit;
}

Full lesson: Css inherit

44. Why does calc() fail when the operators have no spaces?

The plus and minus signs need spaces around them. Without spaces, the browser can read a negative value.

/* wrong */
width: calc(100%-40px);
/* right */
width: calc(100% - 40px);

Full lesson: Css functions

45. Why does an unknown CSS function stop a property from working?

The browser drops a value it cannot parse. Use only functions that the target browsers support.

/* may fail in old browsers */
width: min(50%, 300px);

Full lesson: Css functions