What is the difference between applying css rules to html compared to body?
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 justbody
: http://jsfiddle.net/hhtzE/background
onhtml
andbody
: http://jsfiddle.net/hhtzE/1/background
onlyhtml
: http://jsfiddle.net/hhtzE/2/
What is the difference between html, body and * when setting global CSS Properties
*
will select all elements.
html
will select the <html>
element.
body
will select the <body>
element.
The reason that sometimes they do the same thing is inheritance, meaning that child elements of the element you apply the style too will get that same style. (See the "Inherited?" column of the spec for which properties do this).
If inheritance applies, you should select body
or html
because *
is generally slower, tho it won't make much of a difference on modern browsers.
Also, don't overuse any of these. They are very broad, and you don't want to go undoing your styles for specific elements. h1.header {color: red;}
is better than
* {
color: red;
}
h2, h3, p, ul, ol {
color: black;
}
or
* {
color: red;
}
:not(h1) {
color: black;
}
h1.other-header {
color: black;
}
Difference in applying CSS to html, body, and the universal selector *?
html {
color: black;
background-color: white;
}This rule applies the colors to the
html
element. All descendants of thehtml
element inherit itscolor
(but notbackground-color
), includingbody
. Thebody
element has no default background color, meaning it's transparent, sohtml
's background will show through until and unless you set a background forbody
.Although the background of
html
is painted over the entire viewport, thehtml
element itself does not span the entire height of the viewport automatically; the background is simply propagated to the viewport. See this answer for details.body {
color: black;
background-color: white;
}This rule applies the colors to the
body
element. All descendants of thebody
element inherit itscolor
.Similarly to how the background of
html
is propagated to the viewport automatically, the background ofbody
will be propagated tohtml
automatically, until and unless you set a background forhtml
as well. See this answer for an explanation. Because of this, if you only need one background (in usual circumstances), whether you use the first rule or the second rule won't make any real difference.You can, however, combine background styles for
html
andbody
with other tricks to get some nifty background effects, like I've done here. See the above linked answer for how.* {
color: black;
background-color: white;
}This rule applies the colors to every element, so neither of the two properties is implicitly inherited. But you can easily override this rule with anything else, including either of the above two rules, as
*
has literally no significance in selector specificity.Because this breaks the inheritance chain completely for any property that is normally inherited such as
color
, setting those properties in a*
rule is considered bad practice unless you have a very good reason to break inheritance this way (most use cases that involve breaking inheritance require you to do it for just one element, not all of them).
difference between body and * in css
The body
selector has higher priority, but the *
selector applies more broadly, so in <body>foo<p>bar</p></body>
the body
selector will determine the background of the text foo
, but the *
selector will determine the background of the <p>
element.
Note, also that many browsers create an element around the <body>
that includes its margins and scrollbars, so the *
selector may also determine the color of that region.
Should global css styles be set on the html element or the body element?
I'm assuming that "global page styling" here refers to things such as fonts, colors and backgrounds.
Personally, I apply global page styling, for the most part, to body
and the simple element selectors (p
, h1, h2, h3...
, input
, img
, etc). These elements are more closely related to the presentation of content of an HTML page to the user.
My rationale for this is simple: the presentational attributes bgcolor
, background
, text
, topmargin
, leftmargin
and others were given to the body
element, not the html
element. These attributes are now converted to their respective CSS rules with extremely low precedence in the cascade:
The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet.
Most if not all implementations I'm aware of will convert these to CSS rules on body
, based on their HTML equivalents. Others such as link
, alink
and vlink
will become a:link
, a:active
and a:visited
rules respectively.
Of course, it should be noted that CSS itself doesn't really have any semantics to it per se, as it's a styling language in itself which is completely separate from the content structure of an HTML document. Although the introduction to CSS2.1 covers the basics of styling an HTML document, note that the section calls itself non-normative (or informative); this means it doesn't set any hard and fast rules for CSS implementers to follow. Instead, it simply provides information for readers.
That said, certain styles may be applied to html
to modify viewport behavior. For example, to hide the page scrollbars use:
html {
overflow: hidden;
}
You can also apply rules to both html
and body
for interesting effects; see the following questions for details and examples:
- What's the difference in applying CSS to html, body, and *?
- Applying a background to <html> and/or <body>
Note that html
is not the viewport; the viewport establishes an initial containing block in which html
is situated. That initial containing block cannot be targeted with CSS, because in HTML, the root element is html
.
Note also that, technically, there is no difference between applying properties to html
and body
that are inherited by default, such as font-family
and color
.
Last but not least, here is an excellent article that details the differences between html
and body
in terms of CSS. In summary (quoted from its first section):
- The
html
andbody
elements are distinct block-level entities, in a
parent/child relationship.- The
html
element's height and width are controlled by the browser window.- It is the
html
element which has (by default)overflow:auto
, causing
scrollbars to appear when needed.- The body element is (by default)
position:static
, which means that
positioned children of it are
positioned relative to thehtml
element's coordinate system.- In almost all modern browsers, the built-in offset from the edge of the
page is applied through amargin
on
thebody
element, notpadding
on the
html
element.
As the root element, html
is more closely associated with the browser viewport than body
(which is why it says html
has overflow: auto
for scrollbars). Note however that the scrollbars are not necessarily generated by the html
element itself. By default, it's the viewport that generates these scrollbars; the values of overflow
are simply transferred (or propagated) between body
, html
, and the viewport, depending on which values you set. The details of all this are covered in the CSS2.1 spec, which says:
UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.
The last bullet point probably has its roots in the aforementioned topmargin
and leftmargin
attributes of the body
element.
css selectors: difference between body h1, body .h1 and body.h1
body h1
will address all <h1>
-elements inside the <body>
-element:
<body>
<h1>This one</h1>
<div>
<h1>And also this one</h1>
</div>
</body>
body .h1
will select all elements inside the body that have the class h1
:
<body>
<h1 class="h1">This one</h1>
<div class="h1">And also this one</div>
</body>
body.h1
finally will style the <body>
-element itself, when having a class h1
:
<body class="h1"></body>
Applying a background to <html> and/or <body>
This is correct behavior.1 In standards mode, body
, as well as html
, doesn't immediately take up the entire height of the viewport, even though it appears so when you only apply a background to the latter. In fact, the html
element will take on the background of body
if you don't give it its own background, and html
will pass this on to the canvas:
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.
For documents whose root element is an HTML
HTML
element or an XHTMLhtml
element: 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 HTMLBODY
or XHTMLbody
child element. The used values of thatBODY
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 theBODY
element rather than theHTML
element.
That said, however, you can superimpose any background image over a background color on a single element (either html
or body
), without having to rely on two elements — simply use background-color
and background-image
or combine them in the background
shorthand property:
body {
background: #ddd url(background.png) center top no-repeat;
}
If you wish to combine two background images, you need to rely on multiple backgrounds. There are chiefly two days to do this:
In CSS2, this is where styling both elements comes in handy: simply set a background image to
html
and another image tobody
which you wish to superimpose over the first. To ensure the background image onbody
displays at full viewport height, you need to applyheight
andmin-height
respectively as well:html {
height: 100%;
background: #ddd url(background1.png) repeat;
}
body {
min-height: 100%;
background: transparent url(background2.png) center top no-repeat;
}Incidentally, the reason why you have to specify
height
andmin-height
tohtml
andbody
respectively is because neither element has any intrinsic height. Both areheight: auto
by default. It is the viewport that has 100% height, soheight: 100%
is taken from the viewport, then applied tobody
as a minimum to allow for scrolling of content.In CSS3, the syntax has been extended so you can declare multiple background values in a single property, eliminating the need to apply backgrounds to multiple elements (or adjust
height
/min-height
):body {
background: url(background2.png) center top no-repeat,
#ddd url(background1.png) repeat;
}The only caveat is that in a single multi-layered background, only the bottommost layer may have a background color. You can see in this example that the
transparent
value is missing from the upper layer.And don't worry — the behavior specified above with propagating background values works exactly the same even if you use multi-layered backgrounds.
If you need to support older browsers, though, you'll need to go with the CSS2 method, which is supported all the way back to IE7.
My comments under this other answer explain, with an accompanying fiddle, how body
is actually offset from html
by default margins even though it looks like it's being padded out instead, again owing to this seemingly strange phenomenon.
1 This may have its roots in setting the HTML background
and bgcolor
attributes of body
causing the background attribute to apply to the entire viewport. More on that here.
Related Topics
How to Upload Multiple Files Using One File Input Element
"Break-Inside: Avoid-Column" Doesn't Work in Firefox
@Media Queries and Image Swapping
Convert HTML to Plain Text in Vba
Why Use Definition Lists (Dl,Dd,Dt) Tags for HTML Forms Instead of Tables
How to Stretch a Background Image to Cover The Entire HTML Element
CSS Vertically & Horizontally Center Div
How to Replace Radio Buttons with Images
Aligning to The Bottom in Flexbox
Stop Lastpass Filling Out a Form
How to Use <Section> and <Article> Tags in HTML5
How to Change The Bootstrap Default Font Family Using Font from Google
How to Reuse HTML Code Across Several HTML Files
Border Around Specific Rows in a Table
How to Set The Background Color of <Option> in a <Select> Element