CSS-Coding Best-Practises under '*', 'html' and 'body' Tags

As a best practice, CSS properties defined under the universal selector (*), the html tag, and the body tag typically establish a foundational baseline for the entire document.

Here, I discuss three TAGS (two TAGS related-to HTML-Document and one is CSS-Selector '*' called-as UNIVERSAL-SELECTOR).

Universal Selector (*)

The universal selector usually handles fundamental box-sizing and sometimes resets margins and padding.

Property	Value	Description
`box-sizing`	`border-box`	Ensures that padding and borders are included in the element's total width and height, simplifying layout calculations.
`margin`	`0`	Resets default margins across all elements (often used in combination with other resets or normalization libraries).
`padding`	`0`	Resets default padding across all elements (often used in combination with other resets).

HTML Tag (<html></html>)

The html selector defines the root font size and occasionally the default scroll behavior.

Property	Value	Description
`font-size`	`100%` or `1rem`	Establishes a base font size for relative `em` and `rem` units, typically based on the user's default browser settings [1].
`scroll-behavior`	`smooth`	Enables smooth scrolling for in-page anchor links [1].

Body Tag (<body></body>)

The body selector defines default styles for typography, color, and layout applied throughout the entire page.

Property	Value	Description
`margin`	`0`	Removes the browser's default margin from the body element.
`font-family`	`[Stack Name]`	Sets the primary default typeface using a robust font stack (e.g., `'Helvetica Neue', Helvetica, Arial, sans-serif`).
`line-height`	`[~1.5]`	Sets the default line spacing for readability.
`color`	`[#Hex Value]`	Sets the default text color for all elements.
`background-color`	`[#Hex Value]`	Sets the background color for the visible page area.
`min-height`	`100vh`	Ensures the body covers the full height of the viewport even if content is sparse..

Example of Best Practice Implementation

/* Universal Selector: Best practice for box model consistency */ *, *::before, *::after { box-sizing: border-box; margin: 0; /* A common part of a CSS reset */ padding: 0; /* A common part of a CSS reset */ } /* HTML Tag: Root font settings and scroll behavior */ html { font-size: 100%; /* Base font size */ scroll-behavior: smooth; } /* Body Tag: Default styles for the entire document */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; color: #333; /* Default text color */ background-color: #fff; /* Default background */ min-height: 100vh; -webkit-font-smoothing: antialiased; /* Enhances text rendering on some systems */ }

Code

Modern CSS best practices utilize these selectors to create a stable, predictable layout foundation, often referred to as a CSS Reset. 

1. The Universal Selector (*)

Used to ensure every element, including pseudo-elements, follows the same sizing logic. 

*, *::before, *::after {
  /* Forces padding and border into the element's total width/height */
  box-sizing: border-box; 
  
  /* Removes default browser-added spacing to ensure manual control */
  margin: 0;
  padding: 0;
}


2. The Root Tag (html)

Acts as the global container. It is best used for high-level configuration like sizing and smooth behaviors. 

html {
  /* Preferred for inheriting box-sizing safely down the tree */
  box-sizing: border-box; 
  
  /* Enables smooth scrolling for internal anchor links */
  scroll-behavior: smooth; 
  
  /* Standard base for responsive typography */
  font-size: 100%; 
}


3. The Body Tag (body)

Defines the visual baseline for your content. Best practice is to set typography and layout defaults here to avoid repetitive code. 

body {
  /* Sets a flexible baseline for spacing and readability */
  line-height: 1.5; 
  
  /* Standard modern font stack for system-native appearance */
  font-family: system-ui, -apple-system, sans-serif; 
  
  /* Ensures the body takes up at least the full screen height */
  min-height: 100vh; 
  
  /* Improves font clarity on most browsers */
  -webkit-font-smoothing: antialiased; 
  
  /* Prevents side-scrolling from accidental overflows */
  overflow-x: hidden; 
}


Key Highlights


	Box-Sizing: Setting border-box on * is the single most important rule for modern layout design, preventing borders from "breaking" your grid.
	Inheritance: Applying box-sizing to the html tag and letting other elements inherit it is considered the most flexible "professional" approach.
	Typography: Defining line-height and font-family on the body ensures all text children inherit these styles automatically.

Chapters

CSS-Coding Best-Practises under '*', 'html' and 'body' Tags

Select Chapter