Some of the Most‑Misunderstood Properties in CSS

Many properties in CSS can be misunderstood, but here are twenty that ‑ in my experience ‑ are most commonly misunderstood:

1. display

Display is easy to misunderstand because it has many values, each with its own specific use. I cover display in my article here: "Using display in CSS".

2. float

Float causes confusion because it is used for layout, but it can also affect the positioning of other elements on the page. You can read my article on CSS float (and how to clear it) here: "How to Use and Clear the CSS float Property".

3. position

Position trips people up because it has many values and can be used in conjunction with other positioning properties, such as top, left, right, and bottom. I've written about using CSS position here: "Positioning in CSS", and a more in‑depth look specifically at position: sticky here.

4. overflow

Overflow can be confusing because it has different effects on different elements and can be used to hide or show content. You can read more about overflow and how to use it here: "The CSS overflow Property".

5. z-index

z-index is easy to misapply because it applies to positioned elements and also to flex and grid items; the result still depends on stacking contexts.

6. box-sizing

box-sizing is commonly misunderstood because it changes the default behaviour of how the width and height of an element are calculated. You can read more in my article here: "CSS box‑sizing: Controlling the Element Box Model".

7. visibility

visibility commonly uses visible and hidden, and also defines collapse for table rows, columns, and some layout contexts.

8. opacity

opacity is often misread because it composites an element and its descendants as a group. A child cannot cancel a parent's opacity by setting its own value to 1.

9. transition

Transition can be confusing because it has many values and can be used to animate changes to CSS properties. Read more here: "Understanding CSS Transitions", and more about the difference between transition and @keyframes here.

10. transform

Transform can be confusing because it has many values and can be used to manipulate the appearance of an element. Find out more here: "Manipulate Elements with CSS transform".

11. animation

Animation can be confusing because it has many values and can be used to create complex animations. Read more about animating with CSS here:

• "Mastering CSS Animations with @keyframes".
• "Understanding CSS Transitions".
• "CSS Animations: Transitions vs. Keyframes".

12. flexbox

This layout model is often misunderstood because it has many properties and can be used to create complex layouts. Read more in my article here: "Understanding and Using Flexbox in CSS".

13. grid

This layout model is often misunderstood because it has many properties and can be used to create complex layouts. I have written about this in detail here: "How to Use grid in CSS", and how it compares to flex here: "Flexbox vs. grid".

14. calc()

This function is often misunderstood because it can be used to perform calculations in CSS, but it has limitations. Read more here: "Dynamic Calculations in CSS Using calc()".

15. vh and vw

These length units are often misunderstood because they are based on the viewport size, rather than the size of the element or its parent. I write specifically about vh and vw units here: "Using Viewport Units in CSS: vw and vh", and about viewport units in more detail here: "Exploring CSS Viewport Units Beyond vw and vh".

16. Media Queries

These are often misunderstood because they can be used to apply styles based on the size of the viewport or other conditions. Read about how to use them here: "Understanding Media Queries in CSS".

17. !important

This flag is often misunderstood because it can be used to override normal specificity rules, but it should be used sparingly. I've written about this previously: "!important in CSS".

18. :hover

:hover can match any element under a pointing‑device hover condition, not only links. It should not be the only way to expose essential interaction because touch devices may not provide stable hover.

19. :before and :after

These pseudo‑elements are often misunderstood because they can be used to insert content before or after an element, but they are not actual elements in the DOM. I go into this in detail here: "::before and ::after Pseudo‑Elements in CSS".

20. @keyframes

@keyframes can define one or more explicit keyframe blocks. Omitted start or end values come from the element's computed style; multiple explicit keyframes are common, not a grammar requirement.