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

This property is often misunderstood because it has many values, each with its own specific use. I've written about display in my article here: "Using display in CSS".

2. float

This property is often misunderstood 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

This property is often misunderstood 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

This property is often misunderstood 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

This property is often misunderstood because it only affects elements that have a position value other than static. I've written about this here: "The Quirks of z‑index".

6. box‑sizing

This property is often 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

This property is often misunderstood because it has two values, visible and hidden, which can be confusing. Read more here: "CSS visibility: Hiding Elements Without Affecting Layout".

8. opacity

This property is often misunderstood because it affects the transparency of an element, but it does not affect the visibility of the element or its children. Read more about opacity in my article: "Controlling Element Transparency with CSS opacity ".

9. transition

This property is often misunderstood 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

This property is often misunderstood 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

This property is often misunderstood 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

This pseudo‑class is often misunderstood because it only applies to elements that can be hovered, such as links. Read more about what :hover is and how to use it here: "Understanding the :hover Pseudo‑Class in CSS".

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

This at‑rule is often misunderstood because it can be used to create complex animations, but it requires specifying multiple keyframes and can be difficult to work with. Read more about animating with @keyframes here: "Mastering CSS Animations with @keyframes", and how they compare against animating with transition: "CSS Animations: Transitions vs. Keyframes".