Where should I declare the styles on my page? And why? - html

Does it matter where I declare my CSS styles on my page?
Is this:
<style>
div{
height: 50px;
width: 200px;
}
</style>
<body>
<div>This div</div>
</body>
Different to this?
<body>
<div>This div</div>
</body>
<style>
div{
height: 50px;
width: 200px;
}
</style>
If so, how?
I've seen examples of both and never really noticed any significant changes in how long the styles take to kick in on page load. Although, about 90% of the time, styles are declared at the top of the page.
Personally, I much prefer including a separate stylesheet to avoid adding styles to a page in this fashion.

Place it at start
You should place the STYLE element in the HEAD helps the pages load more quickly because the page can then render as the HTML loads.
When a web browser reads a web page, it reads it in the order that the HTML is written. So when your style sheet comes first, that is what is read first. Then, when the browser gets to the HTML, it already knows how to style it and so doesn’t have to wait to load the CSS before displaying the content.
Why Not Put Style Sheets at the Bottom of the Page
When you place a style sheet at the bottom, this prevents many browsers, especially Internet Explorer, from doing progressive rendering. Internet Explorer even blocks rendering of the page until all the styles are added, so that it doesn’t have to redraw the page. This means that customers will see a blank white page until all the elements and styles have been loaded.

It is best to put stylesheets in head.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 50px;
width: 200px;
}
</style>
</head>
<body>
It is recommended because when you have the CSS declared before starts, your styles has actually loaded already. So very quickly users see something appear on their screen (e.g. background colors). If not, users see blank screen for some time before the CSS reaches the user.
Also, if you leave the the styles somewhere in the , the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.

When you add styles to the html page, they are loaded as the page loads and parsed accordingly in that order. Like in first example, the style loads first and then the elements which is meaningless. In the second one, the elements load first with the default styling and then they are styled.
Adding files to a separate stylesheet waits for the page to load and then displays the styles. In very slow connections or heavy pages, the difference is significant.

You should put your stylesheet in head
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
...
}
</style>
</head>
<body>
<div>
....
</div>
</body>
</html>

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.

Only the first alternative, style before body, is valid, according to any CSS specification. No tags are allowed after the end tag </body>, except the end tag </html>.
Although browsers are permissive, there is usually no reason to even think of deviating from the correct order. In some authoring situations, you might be unable to inject a style element where it belongs (the head part), but even then, it should be placed before the end tag </body>.

Related

Is body of a document right place for CSS? [duplicate]

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.

Why does the universal selector show two elements when a border is applied in an empty html file? (CSS)

I'm doing the Web Fundamentals course at Code Academy and noticed something strange.
If I have an html file like so:
<!DOCTYPE html>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
and a CSS file like so:
* {
border: 2px dashed black;
}
I will see two elements outlined. Something that seems like the very edge of my browser window, and then a slightly smaller box inside it. What are those two boxes? There are no elements in my HTML file so what is being outlined?
At first I thought it was an outline for the <html> and <body> elements, so I tried removing <body>, tried removing <head>, and eventually even removed <html> but still there are two boxes.
Thanks!
Edit: I did try searching, as recommended, but could not find a previous answer. It was quite hard to find an answer to this specific question, thanks.
The start and end tags for the html and body elements are optional.
You deleted the tags, but not the elements. You can see this by looking at the document in a DOM inspector (such as you can find in most browser developer tools).
(The same applies to head, but it is display: none by default).
Browsers will automatically put <html> around your document, <head> around your head elements, and <body> around your body elements. These are required HTML elements and cannot be absent.
Therefore, even an "empty" page has a visible <html> and <body> elements for your border to be applied to.

Why use Classes or IDs on the HTML element?

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?
Hi your tags were erased in your question i guess that you are talking about the <html> and <body> tags. I use this in many cases where i need to refer an specific class to change. For example i have an Interface that changes depend of the user rol some properties like background color and buttons, then i assign to the body a class or ID that changes all those things making specific variations on the CSS.
body.Administrator .container {
background-color:#000;
}
You can Check this link it's all about more control in some specific cases
http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/
The most commonly used reason to use CSS classes in a <body> or <html> tag is due to browser sniffing / modernizr.
Browser sniffing means you want to know which browser you're dealing with, so you can adapt styles by using the specific browser class it gets.
Usually this is rendered by JavaScript or PHP
so basically if you're in firefox, you could see <html class="ff ff18 gecko gecko18">
In css if you had a container, you could style that container differently by using the class in HTML.
This works because CSS cascades, so the nested elements will be children of the parent element.
therefore you can overwrite existing styles by adding new styles below them, prefixed with the class found in the <html> or <body> tag.
e.g. .ff .container {color: blue; /*will only apply to firefox*/}

Declare CSS style outside the "HEAD" element of an "HTML" page?

my use-case is the following :
I'm composing an HTML page by using parts that are valid HTML fragments but not valid pages,
like Divs; these elements are using CSS to manage their style.
I'd like to allow each fragment to be responsible for its own styling requirements and to not rely on the declarations of style-sheets in the main fragment (the one with the "HTML" tag).
So here come the question : is there any (standard) way to add some CSS styling outside the HEAD element (excluding the inline styling via the "style" attribute) ?
I guess I could use frames but I'd prefer to avoid this solution.
Thanks in advance for your help.
FINAL EDIT :
Thanks to the propositions of zzzzBov, JMC Creative and moontear, and after some testing, here is the answer :
use JavaScript to dynamically load some CSS style-sheets : HTML4/XHTML and HTML5 compliant,
embed "style" elements directly inside the fragments : non-compliant with HTML4/XHTML but seems to be broadly supported, and is HTML5 compliant.
As I must support email clients I've used the second solution which moreover is more simple.
tl;dr:
If you're not comfortable using HTML features that haven't reached a maturity level of W3C Recommendation, there isn't a standard way of adding <style> to the <body> of a page.
If you're comfortable using less mature features, HTML5.2 appears to be standardizing <style> elements to be allowed anywhere flow content is expected (i.e. the <body> and most of its elements).
If you're already using the [scoped] attribute, stop using the [scoped] attribute, as it was never standardized and is losing browser support.
History:
HTML 4.01
In HTML4.01 the style element was allowed in the <head> only. Browsers, being diligent about attempting to render what the author wants rather than what the author wrote have respected <style> elements in the <body> despite those pages technically being invalid.
HTML 5
The <style> element continued to be invalid in the <body>
HTML 5.1
In some working drafts of the HTML5.1 spec the <style> element was to allow for a [scoped] attribute, which would allow the <style> element to be used in flow content (i.e. in the <body>).
As an example of how that could have been used would be:
<!DOCTYPE html>
<title>Example of using the scoped attribute</title>
<div>
<style scoped>
p {
color: darkred;
}
</style>
<p>this text would be dark red</p>
</div>
<p>this text would be black</p>
Support for the scoped feature was added to Firefox in version 21 and added in Chrome behind a flag in version 20. The feature didn't receive enough support, so it was later removed from the HTML5.1 working draft.
Chrome was first to remove the feature in version 36. Firefox has since set the feature to be behind a flag in version 55.
HTML 5.2
In the July 2017 working draft of the HTML5.2 spec, support was added for the <style> element to be allowed in flow content:
Contexts in which this element can be used:
Where metadata content is expected.
In a <noscript> element that is a child of a <head> element.
In the body, where flow content is expected.
Emphasis mine
At the time of writing this addition has remained in the HTML5.2 spec, which is currently at the Candidate Recommendation maturity level.
While this makes using <style> elements in the <body> still somewhat of a risk, this particular change is standardizing something that browsers have supported for many years.
There is no standard way (EDIT: as of HTML5 there apparently is!) of adding a <style> element outside of the <head> tag - it is only allowed there and NOT within the <body> tag (See the DTD here).
If you want to style your HTML fragments individually and not use CSS styles in your head, you will need to resort to inline styling. However: Most browsers understand <style> tags within the body, so you may as well use them, but your page won't be standards compliant.
In any way:
You should not use inline styling
You should adhere to standards
You should put the CSS in the head where it belongs
From what I understand you use some kind of templating, where you insert different HTML snippets into the page with different designs. Is it so bad if you put all styles within one big CSS file?
Would it be impossible for you to dynamically load a another CSS file (via JS or server side scripting), when your HTML fragment gets inserted in the page (this would be the preferred method)?
I've found two hacks to do that. Both of which should be perfectly valid html.
The SVG way
Wrap your <style /> element inside a <svg /> element.
<div class="foo">Red text</div>
<svg><style>.foo { color: red }</style></svg>
The Data-Uri Link
Format your css as a data uri and use that in a <link /> element.
<div class="foo">Red text</div>
<link rel="stylesheet" href="data:text/css,.foo%20%7B%20color%3A%20red%20%7D" />

Styling the `<html>` element in CSS?

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)