Top 100 CSS Interview Questions

1. What is the CSS Box Model?

The CSS Box Model is a fundamental concept that describes the rectangular boxes generated for elements in the document tree. Each box has a content area and optional surrounding padding, border, and margin areas. You can learn more about it from the MDN Web Docs.

The model consists of:

• Content: The content of the box, where text and images appear.
• Padding: Clears an area around the content. The padding is transparent.
• Border: A border that goes around the padding and content.
• Margin: Clears an area outside the border. The margin is transparent.

The way these areas are calculated is controlled by the box-sizing property.

2. What is the difference between `display: none;`, `visibility: hidden;`, and `opacity: 0;`?

• display: none;: The element is completely removed from the document flow. It doesn't take up any space.
• visibility: hidden;: The element is hidden, but it still takes up space in the layout.
• opacity: 0;: The element is fully transparent but still takes up space and can be interacted with (e.g., clickable).

3. What are pseudo-elements and pseudo-classes?

• A pseudo-class is used to define a special state of an element (e.g., :hover, :focus, :first-child).
• A pseudo-element is used to style specified parts of an element (e.g., ::before, ::after, ::first-line).

4. What is the difference between inline, inline-block, and block elements?

• Block elements take up the full width available and start on a new line (e.g., div, p, section).
• Inline elements only take up as much width as necessary and do not start on a new line (e.g., span, a, strong).
• Inline-block elements are like inline elements but can have width and height set (e.g., button, input).

5. What is the CSS cascade?

The CSS cascade is the algorithm that determines which styles get applied when there are conflicting rules. It considers:

• Importance (e.g., !important)
• Specificity of selectors
• Source order (later rules override earlier ones)

6. What is the difference between CSS2 and CSS3?

CSS3 is the latest version of CSS and introduces many new features including:

• Media queries for responsive design
• Flexbox and Grid layouts
• Transitions and animations
• Border-radius, box-shadow, and text-shadow
• Custom fonts with @font-face
• Gradients and multiple backgrounds

7. What are CSS variables and how do you use them?

CSS variables (custom properties) allow you to store specific values to reuse throughout a document. They are defined with -- prefix and accessed with the var() function.

:root {
  --main-color: #4a6bff;
  --padding: 15px;
}

.element {
  color: var(--main-color);
  padding: var(--padding);
}

8. What is the difference between reset.css and normalize.css?

• Reset.css removes all default browser styling, providing a completely blank slate.
• Normalize.css makes browsers render all elements more consistently by preserving useful defaults rather than "unstyling" everything.

9. What is the z-index and how does it work?

The z-index property controls the stacking order of positioned elements. Elements with a higher z-index value appear in front of elements with lower values. It only works on elements with a position value other than static.

10. What is the difference between em, rem, px, and % units?

• px: Absolute pixels
• %: Relative to the parent element
• em: Relative to the font-size of the element
• rem: Relative to the font-size of the root element
• vw/vh: Relative to 1% of the viewport width/height

11. What is CSS specificity and how is it calculated?

Specificity determines which CSS rule is applied by browsers when multiple rules could apply to the same element. It's calculated based on the types of selectors used:

• Inline styles: 1000
• IDs: 100
• Classes, attributes, pseudo-classes: 10
• Elements and pseudo-elements: 1

The selector with the highest specificity value wins.

12. What are the different types of CSS selectors?

• Element selector: p { }
• Class selector: .class { }
• ID selector: #id { }
• Attribute selector: [type="text"] { }
• Descendant selector: div p { }
• Child selector: div > p { }
• Adjacent sibling selector: div + p { }
• General sibling selector: div ~ p { }
• Universal selector: * { }

13. What is the difference between :nth-child() and :nth-of-type()?

• :nth-child(n) selects the nth child element regardless of type.
• :nth-of-type(n) selects the nth element of its type among its siblings.

14. How does the universal selector (*) work?

The universal selector matches any element. It has the lowest specificity (0,0,0,0) but can be overridden by any other selector.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

15. What is the difference between :first-child and :first-of-type?

• :first-child selects the first child element of its parent.
• :first-of-type selects the first element of its type among its siblings.

16. What are attribute selectors in CSS?

Attribute selectors target elements based on their attributes and values:

• [attr] - Elements with the attribute
• [attr=value] - Elements where attribute equals value
• [attr~=value] - Elements where attribute contains the word
• [attr|=value] - Elements where attribute starts with value
• [attr^=value] - Elements where attribute begins with value
• [attr$=value] - Elements where attribute ends with value
• [attr*=value] - Elements where attribute contains value

17. How can you increase the specificity of a CSS selector?

You can increase specificity by:

• Adding more specific selectors (e.g., IDs)
• Using the !important declaration (not recommended)
• Adding inline styles (highest specificity)
• Chaining classes or selectors

18. What is the :not() pseudo-class?

The :not() pseudo-class selects elements that do not match a given selector. For example, p:not(.special) selects all paragraphs without the class "special".

19. What is the difference between :empty and :blank?

• :empty matches elements with no children (including text nodes).
• :blank is a proposed selector that would match empty form controls.

20. How do you select all links that open in a new tab?

You can use the attribute selector to target links with target="_blank":

a[target="_blank"] {
  /* styles */
}

21. What is the box-sizing property and how does it work?

The box-sizing property defines how the width and height of an element are calculated.

• content-box (default): Width/height only include content, not padding or border.
• border-box: Width/height include content, padding, and border.

22. What is the difference between margin and padding?

• Margin is the space outside an element's border (between elements).
• Padding is the space inside an element's border (between content and border).

23. What is margin collapse and when does it occur?

Margin collapse happens when the vertical margins of two adjacent elements combine into a single margin. It occurs when:

• Two adjacent elements have margins
• An empty element has margins
• A parent and first/last child have margins

The larger of the two margins becomes the resulting margin.

24. How can you prevent margin collapse?

You can prevent margin collapse by:

• Using padding instead of margin
• Adding a border
• Adding padding
• Using flexbox or grid layout
• Using overflow: auto (or any value other than visible)

25. What is the difference between min-width and max-width?

• min-width sets the minimum width an element can have.
• max-width sets the maximum width an element can have.

These are useful for responsive design to ensure elements scale appropriately.

26. How do you center an element horizontally?

Several methods:

• For block elements: margin: 0 auto;
• With flexbox: display: flex; justify-content: center;
• With grid: display: grid; place-items: center;
• With absolute positioning: left: 50%; transform: translateX(-50%);

27. How do you center an element vertically?

Several methods:

• With flexbox: display: flex; align-items: center;
• With grid: display: grid; place-items: center;
• With absolute positioning: top: 50%; transform: translateY(-50%);
• With table display: display: table-cell; vertical-align: middle;

28. What is the initial value of the display property?

The initial value of display depends on the element:

• Most elements default to block or inline
• Form elements have various defaults (inline-block for inputs, etc.)
• The universal initial value is inline

29. How does the overflow property work?

The overflow property controls what happens when content overflows its container:

• visible: Content is not clipped (default)
• hidden: Content is clipped, no scrollbars
• scroll: Content is clipped, scrollbars always visible
• auto: Browser decides whether to show scrollbars

30. What is the difference between inline and inline-block?

• inline: Elements flow inline with text, cannot set width/height, margins/paddings only push horizontally
• inline-block: Elements flow inline but can have width/height set, margins/paddings work in all directions

31. What is the difference between Flexbox and CSS Grid?

• Flexbox is one-dimensional (works either in rows or columns)
• CSS Grid is two-dimensional (works with both rows and columns simultaneously)
• Flexbox is better for component-level layout
• Grid is better for page-level layout

32. What are the main properties of Flexbox?

Container properties:

• display: flex
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content

Item properties:

• order
• flex-grow
• flex-shrink
• flex-basis
• align-self

33. What is the difference between justify-content and align-items?

• justify-content aligns flex items along the main axis
• align-items aligns flex items along the cross axis

34. How do you make a flex item take the remaining space?

Use flex-grow: 1 on the item you want to expand:

.item {
  flex-grow: 1;
}

35. What are the main properties of CSS Grid?

Container properties:

• display: grid
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-gap
• justify-items
• align-items

Item properties:

• grid-column
• grid-row
• grid-area
• justify-self
• align-self

36. What is the difference between fr units and percentage in Grid?

• fr units represent a fraction of the available space in the grid container
• Percentages represent a percentage of the container size
• fr units are more flexible as they distribute leftover space

37. How do you create a responsive grid without media queries?

Use repeat() with auto-fit or auto-fill and minmax():

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

38. What is the difference between auto-fit and auto-fill?

• auto-fit collapses empty tracks and stretches items to fill available space
• auto-fill keeps empty tracks in place, preserving their space

39. How do you center content in a grid cell?

Several methods:

• On the container: justify-items: center; align-items: center;
• On the item: justify-self: center; align-self: center;
• Using place-items: center; on the container
• Using place-self: center; on the item

40. What is the grid-area property used for?

The grid-area property is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end. It can also be used to assign a name to a grid item for use with grid-template-areas.

41. What are media queries and how do you use them?

Media queries allow you to apply CSS styles based on device characteristics such as screen width, height, orientation, etc.

@media screen and (max-width: 768px) {
  /* Styles for screens up to 768px wide */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* Styles for screens between 769px and 1024px */
}

42. What is the difference between mobile-first and desktop-first approaches?

• Mobile-first: Start with styles for mobile devices, then use min-width media queries to add styles for larger screens
• Desktop-first: Start with styles for desktop, then use max-width media queries to adjust for smaller screens

43. What are CSS breakpoints and what are common values?

Breakpoints are the screen widths at which your layout changes. Common breakpoints:

• Mobile: 0 - 768px
• Tablet: 769px - 1024px
• Desktop: 1025px - 1200px
• Large desktop: 1201px+

44. What is the viewport meta tag and why is it important?

The viewport meta tag controls how a webpage is displayed on mobile devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without it, mobile devices will render the page at a typical desktop screen width and then scale it down.

45. What are relative units and why are they important for responsive design?

Relative units (%, em, rem, vw, vh) scale relative to other values, making them essential for responsive design:

• %: Relative to parent element
• em: Relative to font-size of the element
• rem: Relative to font-size of the root element
• vw/vh: Relative to 1% of viewport width/height

46. How do you make images responsive?

Use max-width: 100% and height: auto:

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

For background images, use background-size: cover or contain.

47. What is the difference between responsive and adaptive design?

• Responsive design: Fluid layout that responds to any screen size
• Adaptive design: Uses fixed layouts for specific screen sizes

48. How do you hide elements on different screen sizes?

Use media queries with display: none:

/* Hide on mobile */
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .mobile-only {
    display: none;
  }
}

49. What are CSS container queries?

Container queries allow elements to adapt their styles based on the size of their container rather than the viewport. This is more component-based than media queries.

.container {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card {
    /* Styles when container is at least 500px wide */
  }
}

50. How do you handle high-resolution (Retina) displays?

Use higher resolution images and media queries with min-resolution or min-device-pixel-ratio:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

51. What are the different values of the position property?

• static: Default position (not positioned)
• relative: Positioned relative to its normal position
• absolute: Positioned relative to its nearest positioned ancestor
• fixed: Positioned relative to the viewport
• sticky: Toggles between relative and fixed based on scroll position

52. What is the difference between position: absolute and position: fixed?

• absolute: Positioned relative to its closest positioned ancestor
• fixed: Positioned relative to the viewport (stays in place during scrolling)

53. How does position: sticky work?

position: sticky is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, then it is treated as fixed positioned.

.sticky-element {
  position: sticky;
  top: 0;
}

54. What is the containing block for an absolutely positioned element?

An absolutely positioned element is positioned relative to its nearest positioned ancestor (any ancestor with a position value other than static). If no such ancestor exists, it's positioned relative to the initial containing block (usually the viewport).

55. How do you create a fixed footer?

Use position: fixed with bottom: 0:

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

56. What is the difference between top/left and bottom/right positioning?

Using top/left positions the element from the top/left edges, while bottom/right positions it from the bottom/right edges of the containing block.

57. How do you create a modal overlay?

Use fixed positioning and a semi-transparent background:

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}

58. What is the stacking context and how is it formed?

A stacking context is a three-dimensional conceptualization of HTML elements along the z-axis. It's formed by:

• Root element (html)
• Positioned elements with z-index value other than auto
• Elements with opacity less than 1
• Elements with transform, filter, or perspective properties
• Flex items with z-index value other than auto
• Grid items with z-index value other than auto

59. How do you make an element stay on top of other elements?

Use a higher z-index value and ensure the element has a position value other than static:

.top-element {
  position: relative; /* or absolute, fixed, sticky */
  z-index: 100;
}

60. What is the initial value of the position property?

The initial value of position is static.

61. What is the difference between CSS transitions and animations?

• Transitions: Simple animations between two states (e.g., hover effects)
• Animations: More complex, multi-stage animations with keyframes

62. What properties can be animated with CSS?

Most properties that have numerical values can be animated, including:

• Opacity, color, background-color
• Width, height, margins, padding
• Transform properties (translate, rotate, scale)
• Position properties (top, left, etc.)

Properties that cannot be animated include display and font-family.

63. What is the syntax for CSS transitions?

.element {
  transition: property duration timing-function delay;
}

/* Example */
.button {
  transition: background-color 0.3s ease-in-out, transform 0.2s ease;
}

64. How do you create a CSS animation?

Define keyframes and apply them to an element:

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slide-in 0.5s ease forwards;
}

65. What is the difference between animation-fill-mode: forwards and backwards?

• forwards: The element retains the style values from the last keyframe
• backwards: The element retains the style values from the first keyframe during the delay period
• both: Applies both forwards and backwards

66. How do you pause a CSS animation?

Use animation-play-state: paused:

.element:hover {
  animation-play-state: paused;
}

67. What are CSS transforms and what functions are available?

CSS transforms allow you to modify the coordinate space of elements. Available functions:

• translate(), translateX(), translateY()
• rotate()
• scale(), scaleX(), scaleY()
• skew(), skewX(), skewY()
• matrix()

68. What is the difference between transform and transition?

• Transform: Changes the appearance or position of an element
• Transition: Animates the change between states

They are often used together to create smooth animations.

69. How do you create a smooth scrolling effect?

Use scroll-behavior: smooth on the html element:

html {
  scroll-behavior: smooth;
}

70. What is the will-change property and when should you use it?

The will-change property hints to browsers which properties are likely to change, allowing for optimization. Use it sparingly for elements that will be animated:

.element {
  will-change: transform, opacity;
}

Overuse can cause performance issues, so only apply it to elements that need it.

71. What are CSS preprocessors and what are their advantages?

CSS preprocessors (Sass, Less, Stylus) extend CSS with features like variables, nesting, mixins, and functions. Advantages:

• More maintainable code
• Variables for consistent theming
• Nesting for better organization
• Mixins for reusable code patterns
• Functions and operations for dynamic values

72. What is the difference between Sass and SCSS?

• Sass: Older syntax with significant whitespace (no braces or semicolons)
• SCSS: Sassy CSS, uses CSS-like syntax with braces and semicolons

SCSS is more popular as it's closer to regular CSS syntax.

73. How do you include a CSS file in HTML?

Use the link element in the head section:

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

74. What are the different ways to include CSS in a webpage?

• External CSS: Using <link> to reference an external .css file
• Internal CSS: Using <style> tags in the HTML head
• Inline CSS: Using the style attribute directly on HTML elements

75. What is the order of precedence for CSS styles?

From highest to lowest precedence:

1. Inline styles
2. Internal styles (in <style> tags)
3. External styles
4. Browser defaults

Specificity and !important can override this order.

76. What is the !important rule and when should it be used?

The !important rule gives a style最高优先级, overriding any other declarations. It should be used sparingly, typically only for:

• Overriding third-party CSS that you can't modify
• Utility classes that must always apply
• Accessibility requirements that must take precedence

Overuse makes CSS difficult to maintain.

77. How do you create a CSS triangle?

Use borders with zero width/height:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}

78. What is the currentColor keyword?

currentColor is a CSS variable that represents the computed value of the element's color property. It's useful for making other properties match the text color:

.element {
  color: blue;
  border: 1px solid currentColor; /* Border will be blue */
}

79. How do you create a custom scrollbar?

Use the pseudo-elements ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb (WebKit browsers only):

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

80. What is the clip-path property?

The clip-path property creates a clipping region that defines what part of an element is visible:

.element {
  clip-path: circle(50%);
  /* or */
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}

81. How do you create a gradient background?

Use the linear-gradient() or radial-gradient() functions:

.element {
  background: linear-gradient(to right, red, blue);
  /* or */
  background: radial-gradient(circle, red, blue);
}

82. What is the filter property?

The filter property applies graphical effects like blur, brightness, contrast, etc.:

.element {
  filter: blur(5px);
  /* or */
  filter: brightness(150%) contrast(120%);
}

83. How do you create a sticky header?

Use position: sticky with top: 0:

header {
  position: sticky;
  top: 0;
  z-index: 100;
}

84. What is the object-fit property?

The object-fit property specifies how an image or video should be resized to fit its container:

• fill: Stretches to fill (may distort)
• contain: Scales to fit while maintaining aspect ratio
• cover: Scales to fill while maintaining aspect ratio (may crop)
• none: Keeps original size
• scale-down: Uses either none or contain, whichever is smaller

85. How do you create a multi-column layout?

Use the column-count or column-width properties:

.multi-column {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

86. What is the aspect-ratio property?

The aspect-ratio property sets a preferred aspect ratio for the box, which will be maintained even if the box is resized:

.element {
  aspect-ratio: 16 / 9;
}

87. How do you create a dark mode with CSS?

Use the prefers-color-scheme media query:

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
  }
}

body {
  background-color: var(--bg-color, white);
  color: var(--text-color, black);
}

88. What is the difference between @import and link for including CSS?

• <link>: HTML tag, downloads CSS in parallel, better for performance
• @import: CSS rule, downloads CSS sequentially, can cause render blocking

<link> is generally preferred for better performance.

89. How do you create a print stylesheet?

Use the print media type:

@media print {
  /* Hide non-essential elements */
  .nav, .ads {
    display: none;
  }

  /* Adjust colors for printing */
  body {
    color: black;
    background: white;
  }
}

90. What are CSS counters and how do you use them?

CSS counters let you automatically number elements:

ol {
  counter-reset: section;
}

li::before {
  counter-increment: section;
  content: counter(section) ". ";
}

91. How do you create a custom checkbox?

Hide the default checkbox and style a label instead:

<input type="checkbox" id="custom-checkbox" hidden>
<label for="custom-checkbox" class="custom-checkbox"></label>

.custom-checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

#custom-checkbox:checked + .custom-checkbox::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid green;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

92. What is the :is() pseudo-class?

The :is() pseudo-class allows you to write compound selectors more concisely:

/* Instead of */
header p, header h1, header h2 {
  color: white;
}

/* Use */
header :is(p, h1, h2) {
  color: white;
}

93. How do you create a responsive typography system?

Use relative units (rem) and fluid typography with clamp():

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

94. What is the :where() pseudo-class?

The :where() pseudo-class works like :is() but has zero specificity, making it easier to override:

header :where(p, h1, h2) {
  color: white;
}

95. How do you create a CSS-only tooltip?

Use the ::before or ::after pseudo-elements with the content attribute:

.tooltip {
  position: relative;
}

.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  background: black;
  color: white;
  border-radius: 3px;
  white-space: nowrap;
}

96. What is the gap property?

The gap property sets the gaps (gutters) between rows and columns in grid and flexbox layouts:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.flex-container {
  display: flex;
  gap: 10px;
}

97. How do you create a CSS-only carousel?

Use radio buttons and the :checked pseudo-class with sibling selectors:

<div class="carousel">
  <input type="radio" name="slides" id="slide-1" checked>
  <input type="radio" name="slides" id="slide-2">
  <input type="radio" name="slides" id="slide-3">

  <div class="slides">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>

  <div class="navigation">
    <label for="slide-1"></label>
    <label for="slide-2"></label>
    <label for="slide-3"></label>
  </div>
</div>

/* CSS to show/hide slides based on checked radio */
#slide-1:checked ~ .slides .slide:nth-child(1),
#slide-2:checked ~ .slides .slide:nth-child(2),
#slide-3:checked ~ .slides .slide:nth-child(3) {
  display: block;
}

98. What is the backdrop-filter property?

The backdrop-filter property applies filter effects to the area behind an element:

.element {
  backdrop-filter: blur(10px);
  /* or */
  backdrop-filter: brightness(60%);
}

99. How do you create a CSS-only accordion?

Use the :checked pseudo-class with adjacent sibling selectors:

<div class="accordion">
  <input type="checkbox" id="section-1" hidden>
  <label for="section-1">Section 1</label>
  <div class="content">
    <p>Content for section 1</p>
  </div>

  <input type="checkbox" id="section-2" hidden>
  <label for="section-2">Section 2</label>
  <div class="content">
    <p>Content for section 2</p>
  </div>
</div>

/* CSS to show/hide content */
.accordion .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion input:checked + label + .content {
  max-height: 1000px;
}

100. What are CSS Houdini APIs?

CSS Houdini is a set of low-level APIs that give developers direct access to the CSS Object Model (CSSOM), allowing them to create custom CSS features. Key APIs include:

• Properties and Values API: Register custom properties
• Paint API: Create custom images for CSS properties
• Layout API: Define custom layout algorithms
• Animation Worklet: Create high-performance animations
• Typed OM: Type-safe object model for CSS values

Houdini allows developers to extend CSS beyond what's natively supported by browsers.