Should I Style My Website with 'html' or 'body'?

Understanding Global CSS Styling: Element Choice Between 'html' and 'body'

In web design, global CSS styling is often applied to elements within the 'html' and 'body' tags. While this choice may seem arbitrary, there are subtle differences to consider.

Standard Practice: Applying Global Styles to 'body'

Traditionally, global page styling is applied to the 'body' element. This is due to the historical precedence of presentation attributes (e.g., bgcolor, background) being assigned to 'body'. In modern browsers, these attributes are translated to CSS rules with low specificity, effectively prioritizing any user-defined styling.

Exceptions: HTML-Specific Styles and Viewport Behavior

While 'body' is the default choice, certain styles may be applied to 'html' to influence specific browser behaviors. For instance, a style like "overflow: hidden" on 'html' can suppress scrollbars. Additionally, styles on 'html' and 'body' can be combined for interesting visual effects.

Viewport Context

It's important to note that the 'html' element is not the viewport itself. The viewport establishes the initial containing block, which is distinct from the HTML document. Therefore, CSS targeting the viewport cannot be used on 'html'.

Inheritable Properties

Applying properties that are inherited by default (e.g., font-family) to either 'html' or 'body' makes no practical difference. The style will be propagated to child elements regardless of the parent element chosen.

Conclusion

While 'body' is the conventional choice for global CSS styling, understanding the distinct roles of 'html' and 'body' enables effective and flexible web design. Consider the purpose and desired effects of your styles when deciding which element to target.

The above is the detailed content of Should I Style My Website with 'html' or 'body'?. For more information, please follow other related articles on the PHP Chinese website!