CSS 'all' Property Explained

The CSS 'all' property is like the master reset switch for CSS styles on an element. When applied, it can reset all the properties of an element to their initial or inherited values, except for a few exceptions like direction and Unicode-bidi, which deal with text direction. It's a powerful tool for quickly undoing styles without resetting each property individually.

CSS 'all' Property Examples

See the Pen CSS 'all' Property by Webzstore (@webzstore) on CodePen.

The 'all' property is a potent tool, especially in modular CSS where components need to be styled independently of their surrounding context. Its ability to reset or redefine the styling context of an element with a single line of CSS can be incredibly useful for web developers looking to manage complex stylesheets and ensure consistent styling across different parts of a website or application.

Browser Support For 'all' Property

27.0	9.1	37.0	79.0	24.0

CSS Syntax of the 'all' Property

all: initial|inherit|unset;

Usage of the 'all' Property

Use the 'all' property when you want to start styling an element from a clean slate. This is especially useful in situations where you're dealing with a complex stylesheet or when you want to ensure an element is not affected by external styles. It's also handy for components inserted into unknown contexts, like widgets or third-party content, where you want to minimize the risk of style conflicts.

Property Values of the 'all' Property

• Initial: Resets all the properties of the element to their initial values, as defined by CSS specifications. This means each property will be set to the value it would have if no stylesheets were applied.
• Inherit: Sets all the element's properties to inherit values from its parent. Suppose a property does not naturally inherit (like width). In that case, it will still be forced to inherit with this value.
• Unset: This acts as a hybrid of initial and inherit. Each property applies to inherit if it is inheritable and initial if not. This is often the most practical choice, as it respects styles' natural cascading and inheritance.

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at Webzstore Solutions, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

All Posts Website