{"id":2788,"date":"2026-03-08T06:12:05","date_gmt":"2026-03-08T11:12:05","guid":{"rendered":"https:\/\/izendestudioweb.com\/articles\/?p=2788"},"modified":"2026-03-08T06:12:05","modified_gmt":"2026-03-08T11:12:05","slug":"all-the-different-ways-to-select-the-html-element-in-css","status":"publish","type":"post","link":"https:\/\/izendestudioweb.com\/articles\/2026\/03\/08\/all-the-different-ways-to-select-the-html-element-in-css\/","title":{"rendered":"All the Different Ways to Select the <html> Element in CSS"},"content":{"rendered":"

The <html><\/strong> element sits at the root of every web page, yet in many projects it is barely touched in CSS. Most developers simply use the plain html<\/strong> selector and move on. However, there are several other, lesser-known ways to target this root element\u2014some practical, some mostly academic, but all useful to understand if you care about robust CSS architecture.<\/p>\n

This article walks through the various ways to select the <html><\/strong> element in CSS, explains when they may be appropriate, and highlights the implications for modern, standards-based web design.<\/p>\n

Key Takeaways<\/h2>\n
    \n
  • The html<\/strong> element can be targeted via simple element selectors, pseudo-classes, and attribute-based selectors.<\/li>\n
  • Some methods are more explicit than others, but they typically end up matching the same root element.<\/li>\n
  • Choosing the right selector impacts maintainability, readability, and cross-browser behavior.<\/li>\n
  • Consistent use of root-level selectors is important for typography, layout scaling, theming, and accessibility.<\/li>\n<\/ul>\n
    \n

    Why Target the <html> Element at All?<\/h2>\n

    Before reviewing the different selection techniques, it is useful to clarify why you would target the <html><\/strong> element in the first place. For many teams, root-level styling controls global behavior and provides a foundation for the entire design system.<\/p>\n

    Common use cases include:<\/p>\n

      \n
    • Setting a base font-size<\/strong> to drive rem<\/em>-based typography.<\/li>\n
    • Defining default scroll-behavior<\/strong> or background<\/strong> for the page.<\/li>\n
    • Applying color-scheme<\/strong> or theme variables used throughout the site.<\/li>\n
    • Managing box-sizing<\/strong> strategies (often in combination with the *<\/strong> universal selector).<\/li>\n<\/ul>\n
      \n

      The way you style the <html><\/strong> element often defines how predictable and scalable the rest of your CSS will be.<\/p>\n<\/blockquote>\n

      \n

      1. The Classic Element Selector<\/h2>\n

      Direct Element Selector: html<\/h3>\n

      The most familiar and straightforward way to target the root element is simply:<\/p>\n

      Example:<\/strong><\/p>\n

      html { font-size: 16px; }<\/p>\n

      This selector directly matches the <html><\/strong> tag in the DOM. It is universally supported, instantly readable, and should be your default for most use cases.<\/p>\n

      Use this approach when you need global defaults, such as:<\/p>\n