HTML or BODY: Where Should You Apply Global CSS Styles?

CSS Global Styles: HTML vs. Body

When defining global CSS styles, developers often face a dilemma: apply them to the HTML or BODY element? This article explores the differences and provides guidance on standard practices and considerations for this choice.

Differences Between HTML and BODY

HTML is the root element, while BODY is a child element. HTML encompasses the entire document structure, including the browser viewport. BODY, on the other hand, represents the page's content and layout.

Global Page Styling

For most global page styling (e.g., fonts, colors, backgrounds), it is recommended to apply styles to BODY. This aligns with traditional practices of assigning presentation attributes (e.g., bgcolor, background) to BODY in HTML. Moreover, CSS rules converted from such attributes are applied to BODY by default.

However, styling the HTML element can be useful for modifying viewport behavior (e.g., hiding scrollbars).

Interesting Effects

Applying CSS rules to both HTML and BODY can create interesting effects. For example, setting overflow: hidden on HTML removes page scrollbars.

Inheritable Properties

There is no inherent difference when applying inheritable properties (e.g., font-family, color) to HTML or BODY.

Browser Behavior

Browser implementations vary. However, modern browsers typically apply overflow values from the BODY element to the viewport. Scrollbars are generated by the viewport, influenced by the overflow settings on HTML and BODY.

Conclusion

While both HTML and BODY can be used for global CSS styles, BODY is generally the preferred choice for page styling. HTML is used for viewport modifications and specific effects. Understanding the differences between these elements ensures effective CSS application and adherence to standard practices.

The above is the detailed content of HTML or BODY: Where Should You Apply Global CSS Styles?. For more information, please follow other related articles on the PHP Chinese website!