Grow your CSS skills. Land your dream job.

Why use Classes or IDs on the HTML element?

Published by Chris Coyier

Reader Nicolas writes in:

I'm frequently seeing ID and class specifications to <body> and <html> elements. I'm curious as to why one would do this? If it is unique to either element, then why not specify body or html in the CSS?

I believe what Nicolas is asking is why would you do this:

<html class="happyNewYear">
.happyNewYear { background: url(http://cdn.css-tricks.com/images/fireworks.jpg); }

When you could just do:

html { background: url(http://cdn.css-tricks.com/images/fireworks.jpg); }

...and skip the class name. After all, there is guaranteed to only be one <html> element, right?

I see Nicolas' point. If you view source and look at a page in isolation, I can see how any class or ID on the <html> element seems superfluous. The fact is, these top-level classes can be extremely useful. Let's review the theory and see some real word examples.

Many Pages, Few CSS files

The idea of CSS is to abstract design away from markup. One hundred pages on a site may all use the same exact CSS file. This is efficient for many reasons, one of which is that changes to design happen in one place, rather than one hundred. A top-level class can serve to identify which page is currently being viewed and thus apply styling to that a different page may not get.

Different pages, same CSS file, different designs. And because this is happening at the highest level possible element, you can control the entire pages design through a single class hook.

WordPress

A WordPress powered site uses themes to display pages. All pages on the site are built from the active theme. This theme has a file in it called header.php which outputs the top of all the pages, like the doctype, head, and opening body and html tags. WordPress has a function called body_class() which outputs a whole bunch of classes that are specific to the type of page being loaded. Most themes have an opening body tag like this:

<body <?php body_class(); ?>>

On a single post page, the output might be like this:

<body class="single single-post postid-8212 logged-in">

On the homepage, the output might be this:

<body class="home blog">

Now there are a bunch of hooks you can use in the CSS file to style things uniquely based on the kind of page. For example:

.single h2 {
   font-size: 150%; /* Fonts bigger on single post pages */
}
.home aside {
   width: 100%;  /* Sidebar kicked to bottom of page on homepage */
}

I'm not entirely sure why WordPress calls it "body_class", as you can (and it's often useful to) style the HTML element directly. Just as an FYI, you can absolutely just move the function up to the HTML element.

Modernizr

Modernizr is a JavaScript library that also adds top level classes. It adds them dynamically to the html element when it loads and runs. The classes are symbolic of what the current browsers capabilities are. So whereas WordPress applies classes you can use to make different pages look different, Modernizer applies classes you can use to make the same page look different, depending on browser capabilities.

This is what an html element might look like after Modernizr:

<html class="js flexbox canvas canvastext no-webgl no-touch 
  geolocation postmessage websqldatabase no-indexeddb
  hashchange history draganddrop websockets rgba hsla 
  multiplebgs backgroundsize borderimage borderradius 
  boxshadow textshadow opacity cssanimations csscolumns 
  cssgradients cssreflections csstransforms no-csstransforms3d 
  csstransitions fontface video audio localstorage sessionstorage 
  webworkers applicationcache svg inlinesvg smil svgclippaths">

So now you might have CSS that styles things differently depending on the capability:

section {
  background: url(boring-fallback.jpg);
}
.multiplebgs section {
  background:
    url(logo.png) top left no-repeat,
    url(texture.jpg),
    url(top-edge.png) top left repeat-y;
}

Anything else?

I have an older article which covers this same idea and the classic tip of using this idea to do current navigation highlighting. Check it out for some other tips.

Please share if you have some other use-cases for using top-level classes.

Comments

  1. The-Marshal
    Permalink to comment#

    WOW Awesome idea … it’s really work

  2. I think the original idea behind putting an ID on your HTML element was for user-build custom stylesheets (like the FF extension “stylish” which now uses a URL mapping). So a user could do something like html#cnn-com{ font-size:150%; } or/and html#foxnews-com{ display:none; }

    I still use an id of www-csskarma-com on a lot of my personal stuff, but I don’t think many still do it.

    • That seems slightly weird… If you are loading a site specific user stylesheet, you’d think whatever was doing that would load that stylesheet last, and thus any selector you write will override the same selector on that page (and thus no need for a top-level ID). Or is the same stylesheet used for every single site? (which seems inefficient)

    • yea, maybe that’s why it never really took off

  3. Permalink to comment#

    the body_class(); function is awesome, i use it all the time.

  4. I’m using that on my site redesign where the body is given an id and the css file can override the default styling for a single page. In my case it’s used for animations, and current navigation highlighting.

    Example:
    //default styling:
    #header { background: transparent url(“../images/header3.png”) no-repeat center top; min-width: 960px; height: 189px; color: #FFF; margin: 0 auto;}

    //single page overwriting the styling with css specificity:
    #aboutpage #header { height: 392px; }

    Lot’s of things you can do with this ‘trick’ :) Thanks for sharing!

  5. I published that little page graphic I used in this blog post on DesignMoo: http://designmoo.com/resource/page-with-turned-corner/

  6. I like to specify what version of IE, if any, is being used in the <html> tags, so I can specify workarounds for those people. See the HTML5 Boilerplate for an example (and it’s a generally good idea to check it out, anyway).

    • I second the awesome HTML5 Boilerplate. Great starting point to customize your own “starter package” of files, and it uses conditional comments to add the ie version to the body or HTML element. I suppose you could call that browser sniffing, but used sparingly it can be useful.

  7. I’m becoming a big fan of using php includes. A cool thing to do on a larger site is to group your main navigation in an include then use the body tag to specify which page you are on and then you can use that class or id in css to to style that link differently. It’s a huge time saver and keeps your code a lot cleaner.

  8. Bob
    Permalink to comment#

    I’m curious whether or not using that many classes on an element is decreasing site perfomance or is in any way ‘bad’.
    The MODERNIZR example you gave has loads of classes:
    html class="js flexbox canvas canvastext no-webgl no-touch
    geolocation postmessage websqldatabase no-indexeddb
    and so on..

    I see if often on websites and I always wondered if that has an impact on site speed or anything really regarding the website. It just seems a lot, and since its dynamically, elements could really get loads of classes.

    • Permalink to comment#

      Agreed. This is something I have yet to get a good answer on yet.

    • Permalink to comment#

      I’d like to see an article on this ^_^

    • I tried out adding 10,000 unique classes to the HTML element to see if it affected performance.
      It doesn’t. Even in IE6. Fast fast fast.

      However if all those classes were added one-by-one (as they were in the early days of HeadJS) you were be in reflow city. And that’d be bad.

      But we’re not in reflow city. So things are fast and happy. :)

  9. Permalink to comment#

    It makes sense to take into account that HTML element cannot have class attribute (at least in XHTML 1.0). It’s better to apply class to BODY element instead.

    • In HTML 5 it’s valid to have classes and ID’s on the <html> element.

      In xHTML, you are correct, the code won’t validate with classes on the <html> element but all browsers will interpret the code as expected so it’s practical to do so.

      I usually put page backgrounds on the <html> element as the background will fill the viewport regardless of content length. Pages working correctly cross-browser is more important than validation.

    • Flavia
      Permalink to comment#

      I learned to use a class (and/or ID) on the body element while working on WordPress themes, I’ve also been using it on static pages – mostly if I need to override some css when for a number of reasons it’s not possible to edit the original stylesheet or change the markup.

      So… I was wondering if there were more pros/cons regarding this issue and so far I figured out the following pros of using a class or ID on the html element versus using it on the body element:
      -viewport-filling property (as Peter Wilson said);
      -multiple backgrounds with no additional markup (i.e. one for the html element, one for the body element);

      …while the cons might only be that it doesn’t validate in XHTML.

      Am I missing something or might it be a matter of personal preference to apply a class/ID to html or to body (given the same result can be achieved in both ways)?

  10. Wow another brilliant feature of your site Chris, had clicked the reply to button instead of a generic reply to the post at the bottom here, had already typed some text and had to cancel. How nicely surprised was i to find the second comment box already populated. Brilliant!

    My comment was far less note worthy than this usability dream you are creating piece by piece however it goes…

    Recently hooking onto the html element was something naturally discovered. You could call it legacy coding if you like, not in the strict sense of that phrase but more so convenience as my site is using HTML5 at a basic level already.

    However needed to hook on and apply some image styles in a context that it had to be higher up in the document.

    HTML was the only tag. IDs and classes where not necessary as it was a small change, however useful to know all elements can usually be styled out the box.

  11. afraz
    Permalink to comment#

    Disagree, I use classes to work with html tags. Because when developing dynamic pages, IDs sucks.

    Thanks

    • Angelee
      Permalink to comment#

      ids and classes have its own usage.. it’s actually fine to use both..

    • Permalink to comment#

      Why it is sucks?

    • afraz
      Permalink to comment#

      Right questions. Actually, when I have to pass different IDs to Divs in the development phase, the names of ID’s conflicts with the development end. And definitely, we can’t use multiple IDs on same Div. That’s why classes are better.

    • Very tunnell visioned. Not that i use IDs overly often anymore. If you are not using a grid system for instance and have a very rigid interface, it might be an idea to use IDs only for structural elements.

      This way you can forget about them entirely.

      If you were then to integrate a blogging system or repeating data areas, you would then be free to use classes for those areas. You wouldn’t even have to consider the IDs. Thus making your job as a dev easier. If the designer has coded the interface with IDs you can forget about them entirely in your process.

  12. Using this trick is great for setting ‘active’ state on main navigation items (when an active class is not pinned to a nav-item):
    body#about li#nav_about {font-weight:bold /*etc*/}

    This trick is also good for re-purposed pages, such as a page needing to fit within a modal dialog would need slimmer content, headers, footers, etc.
    body.modal div#content {width:800px /*etc*/}

  13. I think that it this method could be used to speed up pages. Since loading different stylesheets for different pages could mean that another stylesheet has to be loaded for every different looking page. But, by using a class or ID on the element, once the home page loads, the stylesheet would probably get cached and loading another page would not mean loading another stylesheet, therefore speeding up the page.

    And the best part is that in the past loading different stylesheets one after the other meant that all the stylesheets would not load in parallel (there are ways around that) but this method of using one stylesheet for all CSS not only proves to be faster but more ‘semantic’.

  14. I use a Drupal WYSIWYG editor that takes some of its style from the body tag. Using an ID on the body allows me to pass what I want the WYSIWYG module to see with the Body tag, and what I don’t want it to see with the ID. Makes it easy to control how the module looks.

  15. Permalink to comment#

    I’m testing my iQ

  16. Khaled Garbaya
    Permalink to comment#

    Nice !

  17. Thanks for the nice article. I really like leveraging body / HTML classes and ID’s for advanced theming. I wrote an article on my blog how to do this in Drupal.

    http://highrockmedia.com/blog/custom-body-class-php-advanced-theming-and-css-drupal-6

  18. Using some js, php, or whatever other scripting/sniffing method you’d like, you can make browser specific layout or font hacks, e.g.:

    Add a class ie6 to fix things like double margins on floated elements or screwy absolute positioning.


    #someFloatedDiv {float: left; margin-left: 50px;} /* This will look fine in most browsers */
    .ie6 #someFloatedDiv{margin-left:25px;} /* This will fix ie6 */

    Everything in one stylesheet without the need for loading another overriding style sheet for ie6. This helps keep all your styles for a particular element in one spot. Sure, if the script is deferred, you get to what amouts to a FLOUC in ie6, but if you’re using ie6, you’re used to seeing that sort of stuff anyhow.

  19. I add a class of “nojs” to the body tag in my HTML code. When my javascript code executes it removes this class and adds a class of “js”. This allows me to style differently depending whether or not javascript is enabled or not.

    I haven’t tried Modenizer yet. It sounds like it might do the same thing. I will have to check it out….

  20. Really great! ‘didn’t know why to use this before. Now it’s clear.
    I’ll already start apply theses techniques for my future project. Big thanks!

  21. I was in the same boat as Nicolas before, but that all makes perfect sense. I really like the concept of using the body ID or Class as the main hook for the rest of the content. Great article.

  22. Permalink to comment#

    Here’s a clever (yet slightly messy) use of classes on the HTML element from Paul Irish. Target versions of IE with conditional comments and a single stylesheet: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

    Off-topic: Love the comments design on the newest version of css-tricks.

  23. Permalink to comment#

    I’d use IDs on html/body elements mostly for attaching a unique CMS item identifier to the final markup, which in turn would make it rather simple to provide content specific styling.

    Another use-case (at least for me) for classes in the same element is whether or not the rendered page should leave space for a sidebar.

  24. Nile
    Permalink to comment#

    Making links active

    body#contact a.contact { color: blue; }

  25. Just as a random example, if it helps anyone, I’m using different body classes to distinguish between background formats on my personal site, http://jenius.me/v2 (not quite finished, hence the v2). If you look through the pages, I change the space available in the heading area based on 3 different body classes.

  26. Permalink to comment#

    I’ve found body class tags especially helpful in letting sitewide jQuery code know what methods are needed for that page.

    It’s pretty much just like the CSS example (“page-1″ and “page-2″), but for jQuery.

    Always give the body a class or ID that allows you to later deploy functionality to a page, a section or a type of page.

    One client in particular wanted the logo tucked away on certain pages, and out in the open on others. jQuery handled the animations based upon the page id’s (only 2 pages had the logo tucked away). It was very helpful.

    If you get a chance, check out how WordPress handles the classes on the body tag, it’s useful to see.

  27. Permalink to comment#

    Ehm..i never think about this way…it can make us easier to make different style for different page in one file..no need create separate div as main body. Thx for sharing this. .. I will try this method. :-D

  28. Really great! ‘didn’t know why to use this before. Now it’s clear.

    Thank you so much !!

  29. I agree to AFRAZ whe he says it’s far better using classes for html elements. In my daily development I usually work with ids for server relationships and when talking about elements I used to play with classes.

  30. Permalink to comment#

    Really great. Very useful information.
    I appreciate you for your post. Thank you.

  31. Good one. Short and crispy article.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".