Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between applying css rules to html compared to body?

Tags:

html

css

I don't see the difference between:

html {     background: #f1f1f1; } 

and

body {     background: #f1f1f1; } 

Any explanation?

like image 516
Steve Avatar asked Jul 18 '11 21:07

Steve


People also ask

What is the difference between HTML and body in CSS?

As per HTML rule ,The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. Generally data are visible to user or reader. The html tag tells the browser that this is an HTML document. The html tag represents the root of an HTML document.

What is the difference between body and * in CSS?

body is an element selector (selects an element body ) while * is a universal selector (selects all elements).

What are the similarities and differences between HTML and CSS?

Differences Between HTML vs CSS. HTML (Hypertext Mark-up Language) and CSS (Cascading Style Sheets) are two of the core web scripting languages for building web pages and web applications. HTML provides web pages' structure, whereas CSS is mainly used to control the styling and layout (visual and aural) of web pages.

Can CSS apply to body?

To declare style rules for the body of a webpage, you will need to create a CSS rule for the body tag selector. These rules will then be applied to all elements that are placed inside the opening and closing <html> tags that you added to the index.


2 Answers

There is no real difference (if you're just talking about where to apply background, otherwise BoltClock's answer to this other question is a better fit). html is an element, just like body is.

Both are valid choices, and both will both work in all common browsers.

The YUI Reset for instance, chooses to set a background on the html element instead of body:
http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css

This requires that you set your background on html, for instance see: can't change body background color using CSS reset

See: http://dev.w3.org/csswg/css3-background/#special-backgrounds

The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas, although any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) If the root's ‘background-color’ value is ‘transparent’, the canvas's background color is UA dependent. The root element does not paint this background again, i.e., the used value of its background is transparent.

And:

For documents whose root element is an HTML HTML element [HTML401] or an XHTML html element [XHTML11]: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTML BODY or XHTML body child element. The used values of that BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

What that wall of text is saying is demonstrated here:

  • background on just body: http://jsfiddle.net/hhtzE/
  • background on html and body: http://jsfiddle.net/hhtzE/1/
  • background only html: http://jsfiddle.net/hhtzE/2/
like image 99
thirtydot Avatar answered Sep 22 '22 21:09

thirtydot


html is the parent of body. One way to see the difference is to do:

html {     overflow: scroll; }   body {     overflow: scroll; } 

You will see that there are two nested sets of scrollbars, one belonging to html and the one inside that belonging to body.

like image 25
Gazler Avatar answered Sep 22 '22 21:09

Gazler