This question already has answers here:
What's the difference if I put css file inside <head> or <body>?
(12 answers)
Closed 7 years ago.
I have an old website where about 70 percent webpages have css style sheet inside the body tag.
<body>
<style>
h2 {color:red;}
</style>
<h2> Hello Ladies & Gentelmen</h2>
</body>
As you can see ,the CSS is inside the body of the document.
I have tested these webpages with diffrent web browsers including (Opera, Chrome,IE etc) , They are working fine and there is no problem with the CSS.
So now my question is :-
Is body the right place for CSS or Should I always put the CSS in head section of my webpage?
Even though most (if not all) browsers allow the style element as a descendant of body, it is invalid HTML.
The style element is "Metadata content": http://www.w3.org/TR/html5/document-metadata.html#the-style-element
The body element should contain only "Flow content": http://www.w3.org/TR/html5/sections.html#the-body-element
You should always put any css, whether inline, or external, in the <head> of your website.
The reason the websites work as normal is because the modern browsers realize that sometimes people put css in the body, and they automatically correct the mistake. It it were an older browser you may not get so lucky.
A <style> element's being inside <body> is invalid HTML, although some browsers are able to correct it because it's a common mistake. It belongs in the <head> element because it is metadata. I, however, usually prefer to use linked stylesheets because the browser can cache them for better performance.
Originaly was ok, but that change along time ago, if you put the style in the middle of the body, the browser gonna render the first half without styles, ugly right... and then has to repaint all... so, two things, that was slow, that blinks (givin the sensation of slow or wrong).. because that we put styles on header. That was the reason.
Then, the standard adopt putting style in the header like the way to do things. So, if you put styles in the body, its an invalid html.
Hope it helps.
One thing more, you can have the file css... and that would be cached by the browser. You have style tag and inline style... the priority is, inline, then tag then the file.
As my point of view i prefer puting css in <head> tag and jquery at the bottom of page.
And external css is most preferable for reuse class in different pages.
Related
I want to preface this with the understanding that I'm aware this is sub-optimal for web design but my hands are tied.
I am working within my organization of my company to add documentation in an html format through a form field.
The html I am coding will be, essentially, inserted into the rest of the page's body and I don't have access to the style sheets or to the style tags in the header.
Right now I am embedding my css in the html but I would like to have a little bit cleaner code so, to the question at hand.
Is there a way to embed a second section under style tags where I can define IDs and classes in the body. I've tried to just put style tags in the body but it's conflicting with the header of the overall page.
Please let me know if more clarification is needed and thank you, before the fact, for any help!
Is there a way to embed a second section under style tags where I can define IDs and classes in the body. I've tried to just put style tags in the body but it's conflicting with the header of the overall page.
Multiple style tags are ok. When you have multiple style tags, the cascade rule applies, so you just need to make sure your selectors have higher specificity than the page's default style.
The second issue is of where you put the style tag. Strictly speaking, the <style> tag is supposed to go in the <head>, but in practice all browsers will apply <style> anywhere in the page. Having style in body, the page will not validate, however it will work fine.
I'm doing this, defining a <style>...</style> block within the HTML and it's working fine across the browsers I've tested (Firefox, IE10, Chrome).
What do you mean by "it's conflicting with the header of the overall page"? Is there a PHP error saying that their is an output and header can't be set (so the system seems like using ob_start/ob_flush)
Normaly following should work:
<body>
<style>
.class {
border: 1px solid #000;
}
</style>
</body>
Maybe some of the CSS given in the header using !important and make it impossible to overwrite or you just missing some attributes so it looks like you not changing anything at all.
You probaly could use this technik to load stylesheet dynamically into the header: How to create a <style> tag with Javascript
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);
or you creating a style element and fill it with styles, but this will be more complex, because you have to do it completly with Javascript and at some point it sucks.. also to have it clean a extra file would be perfect solution.
I like a directoy css or stylesheets (based on the directory pattern I am following, either short terms like img, css, js or long terms like scripts, images, stylesheets) and a default.css inside. It's your decision what you call it.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Should global css styles be set on the html element or the body element?
There's some really interesting discussion about applying CSS to <html> and <body> in order to get some cool effects — like two background images, one transparent (but CSS3 may render that useless).
However, for the standard cases, which element is most appropriate to use for appling page-wide CSS to?
Perhaps there's even some CSS properties that are better suited to one selector over the other? Thus, split among the two?
(This concerns things like cross-browser compatibility, as well as proper semantics according to spec.)
And we can also bring the wildcard * { } selector into this discussion.
Following Verandaguy's answer, http://www.w3.org/Style/Examples/011/firstcss.en.html applies the style to the body. It doesn't say why, but, that's what it says.
I believe that the W3C recommends that you apply any page-wide styles to the <body> element.
For creating a site with several pages it is best to use the CSS as an external linked page. That way each page can have access to it. But for a single page to page, it would be a "cool effect" on some browsers. But in the same effect other computers might see those effects in a different and less rendered method. Stick with uses the CSS mostly as an external link, and use style tags only as needed, or leave a note on the page of how and what browser they are supposed to view it on.
Does placement of:
<style type="text/css">
...
</style>
matter? Is there any difference if I place it inside page div, or inside body? I recently found out it matters with javascript. I had some problems with my CSS also (jQuery Mobile). Could it be the reason?
The style element should apply to the whole document, wherever it is placed, however it is common practice to always put it in the head element. I would not be surprised if browser handling is a bit flaky if you put it in other places.
Note that html5 allows you to specify the scoped attribute for the style element, which means that it will only apply to the parent element of the style element and all its children.
By the way, usual practice is to put the css in a separate file and use the <link> tag to include the CSS in your document. This way you can share the css across multiple pages.
The placement matters as regards to order of style sheets. When resolving conflicts between style sheets, then at the last step, when other things are equal, the rule that comes last wins. Thus, it matters how the style element is placed relative to other style element and to link elements that refer to style sheets. (It does not matter as regards to style attributes in elements, since other things can’t be equal: the attributes win, by specificity.)
It also matters in validation: a style element is not valid except within a head element. Browsers don’t care about this, though.
JavaScript code can of course be dependent on the placement of the elements it processes. It’s all up to the code.
Ideally it should not, but don't do it, it is just bad practice, plus makes your code looks messy
To answer the question directly, usually if you're placing your code straight in the page, you'll be placing it in the <head> of the page. Should work regardless of where you put it, but <head> is common practice. Not sure what exactly your goal is, but for email, I typically split it up into inline styling (placing relevant code in the HTML tags themselves, like <p style="line-height:1.4em;">).
If you're working on webpages, though, unless there's a particular reason to have the CSS embedded in the code of the page itself, it's almost always better (and it considered best practice) to link to an external stylesheet in between your <head> tags (<head> <link rel="stylesheet" href="[YOUR STYLESHEET]" type="text/css"> </head>). It keeps your HTML cleaner, and helps with the separation of markup (HTML), styling (CSS), and functionality (JavaScript).
Hope that answers your question somewhat, haha.
Can anyone explain to me why can we style the element html?
What are differences between it and body?
I usually see tutorials and multiple websites using body and never html, I only found about it when using YUI 3: CSS Reset since changing the background in body didn't work.
Edit: Actually, I still haven't found the problem regarding that, when I add the reset.css the background gets white, when I remove it returns to normal. Yet Chrome inspector says that the background is the normal one. Btw, this is getting off topic. :p
Edit 2: The culprit was the doctype. Somehow it made the html style in the css-reset render after the body style in my stylesheet. Maybe I should open a question regarding this.
Doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Quite often you'll find people styling the HTML element since it does have an affect on the way the page is rendered.
The most notable style you're likely to see is
html,body{
min-height:101%;
}
This is used to ensure that the scroll bars in browsers like Firefox, always show on the page. This stops the page shifting left and right when changing between long and short pages.
The reason we're allowed to style the html element is because it is a DOM element like any other. All DOM elements can be styled to be something they are not, like a container. Take this example:
<html><body>This is my page.</body></html>
Using CSS to limit the body to 80% width, setting borders on the body and giving the html a different background color (creating an "off page" effect) would be perfectly acceptable, keeping the semantics of the markup intact without resorting to div clutter.
Here's a technique I discovered for centering containers (vertically and horizontally) on the screen without using tons of divs or tables, or even having to know the size of the centered container.
html {
display:table;
width:100%;
height:100%;
}
body {
display:table-cell;
vertical-align:middle;
}
body > div {
# "shrink wraps" the div so you don't have to specify a width.
# there's probably a better way to do precisely that, but this works.
display:table;
margin:0 auto; # center the div
}
You can style the html element (heck you can head, title { display: block; } if you like), but browser support is a bit weak (IIRC, Internet Explorer <8 has issues).
Offhand, I would say: <html> is not a visible element per se, and it contains sections for semantic (e.g. <head>) and presentation data (<body>).
On the other hand, <body> is a block for visible elements, so it can be given a presentation style.
But people do apply styles to the <html> element for a couple cases: (a) because all of its child elements will inherit that style, and (b) in special cases like the scrollbar trick that Jamie Dixon mentioned.
I don't believe you can, but styling <body> should work for you
html is the containing element for the whole document, it contains the <body> which is what is rendered by the browser and <head> which contains meta information on the page/document you are viewing. It has actually no use to be able to style the html element since it isn't rendered by the browser.
It can however be used to build you css selectors with (html div.dataView { color: red } for example)
I see something like this:
<div>
<style type="text/css">
...
</style>
</div>
It's very strange,but still work.
Is this against the standard?
It's worth pointing out that although it's invalid HTML, it's also extremely common, and any browser that didn't support it would fail to render properly a significant portion of the web.
Mash-ups in particular, need use of this feature, and HTML 5 defines <style scoped> to deal with this use case. <style scoped> can appear in the body, though styles so defined do not apply to the whole document, only to the section in which <style scoped> appears.
WARNING: HTML 5 is a draft, and there is no guarantee that <style scoped> or any other HTML 5 feature that is not already implemented will ever be implemented.
Yes, it violates the HTML specification.
<!ELEMENT DIV - - (%flow;)* -- generic language/style container -->
(from the div section of the specification)
Follow the hyperlinks in the live version if you want to see exactly how %flow; expands (it doesn't include style).
Browsers just tend to do huge amounts of error recovery because so many authors do stupid things.
Don't depend on error recovery — there are lots of browsers out there, and they don't all behave the same way when the HTML doesn't conform to spec.
The STYLE element is only allowed as child of the HEAD element. See this explanation for further details.
In HTML5, a <style> tag is allowed to appear under anything in <body> or <head>.
Mostly you are not allowed to put blocking elements into inline elements but meta elements like style, script, meta may appear wherever you want.
I found an example where the tag inside a div is not read correctly by IE8 (it works fine in Firefox and Chrome)
I can't reproduce it with a simple example because I don't know where the problem is. But if I move the outside the div everything works again.
Why I'm using a tag inside a div? because I'm loading external data with AJAX inside that div, and I don't know other way to add the styles in that situation.