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.
Related
This question already has answers here:
Image width/height as an attribute or in CSS? [duplicate]
(12 answers)
Closed 4 years ago.
Fairly new at this, but what’s the benefit to defining image height/width in a linked Css over defining it inline attribute of the img tag? Everything I’m seeing points to defining the img size in Html as better since the browser will load the page faster with the proportions in mind without having to track them down elsewhere, but the whole point of separating the two is to keep things like sizes and colors outside the main html and clean up everything.
Thanks!
Using inline style is hardly ever a good approach.
Using classes allows other developers to modify your code much easier. Also managing properties via classes is a standard everyone uses. Nobody will look for them coded inline.
There are really many reasons why you should define your styles somewhere else than inline.
You should take a read here and search stackoverflow/google as this question has been asked many times before.
I would suggest:
1) Define the original size value in HTML om the img tag.
2) Add an "id" to your img tag in HTML
3) With the "id" tag, add it as reference in CSS and adjust the size based on %.
The benefit of doing it like this is that you will control the size from CSS but anyhow have a standard size defined in HTML.
This question already has answers here:
How to apply CSS to iframe?
(28 answers)
Closed 6 years ago.
I tend to apply my own custom CSS documents to certain sites, since I prefer dark backgrounds with light text as opposed to the vice-versa standard, and very few sites have a "dark mode" or otherwise cater to that preference, this site itself being an excellent example.
However, I was recently stricken by something odd - an entire HTML document nested inside of another one. (I now understand this is achieved via use of an <iframe> and so it's nearly impossible to style without JS or something) I can only apply the custom stylesheet to the parent document, though.
So, long story short, I'm wondering what sort of selectors I would have to use to target elements of the nested document only - for example, selecting the <body> of the nested document. Would I refer to a body in a html in a !DOCTYPE that is also in a body? What about recursively nested documents?
Whether this nesting thing is poor practice or not does not immediately concern me -- there seems to be a valid use case for it and, regardless, I'm not building the site. What I DO care about is how to add styles to it externally.
Assuming you literally have a document that has been 'injected' into another document, you would simply target it with the expected identifiers:
To target elements unique to the sub-document:
body body [element] {
}
To target elements that exist within both documents, you would just use the standard:
[element] {
}
The above would apply the style to any desired element that is contained within either document.
Please be aware that you cannot style an iframe inside a document with CSS -- you'd either have to find a way to manipulate the iframe's CSS itself, or use JavaScript to target the desired elements with document.getElementById().
Hope this helps! :)
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.
My professor asked us to develop a website using pure HTML,
JUST HTML. And it's really hard to design without CSS but I have to follow her instructions.
Anyway, my question is do you consider this code as CSS even if I removed the type="text/css"?
<style>
a {color:white; }
</style>
This maybe a dumb question but thanks for your time to answer it, I just really want to use CSS to make it easier.
Could you suggest anything that would make my coding easier? I just don't want to have repetitive code.
You are having this snippet,
a {
color:white;
}
is an element selector with the color property, whatever you write, i.e, between <style> tag, or style attribute, or stylesheet, all are CSS, if your professor is vintage fan, and is asking you to assign the color to a than you can use the font tag with color attribute with a value of white
<font color="white">Hello</font>
Demo
Note: Please read the box on the Mozilla Developer Network which says
SO DON'T USE IT
And just incase your professor understands, and his mind comes back to 2014... than would like to point out that even using
a {
color: white;
}
will target all the a elements in your document, so make sure you use a class or a specific selector to select particular a element.
Anyway, my question is do you consider this code as CSS even if I removed the type="text/css"?
CSS is CSS, not matter how it is added to the document or labeled.
it's really hard to design without CSS but I have to follow her instructions.
Could you suggest anything that would make my coding easier?
I'd start by clarifying if CSS really is forbidden and, if it is, what the purpose of forbidding it is. I can think of a number of possible reasons:
To prepare you to deal with code written by someone from 1996
To make you focus on the structure and semantics instead of the appearance
The course you are taking is almost two decades out of date
How you deal with the problem depends on which of those is the reason.
If it is the first one, then you need to look at all the obsolete, deprecated (and possibly non-standard too) presentational features of HTML (like <font> and background attributes).
If it is the second one, you just don't worry about how it looks and deal with the structure and the semantics. Let the browser's default stylesheet control the way it looks.
If it is the third one, then you probably have little option but to grit your teeth and bare it or find a better course.
<style>
a {color:white; }
</style>
Yes you write type="text/css" or not it will be considered as css.
The content of a style element is CSS, for most practical purposes (it would hardly make sense to use anything else there, since no other style sheet language is supported by browsers). The attribute type="text/css" does not change this, because the de facto default style sheet language is CSS.
On the other hand, the style element, including its content, is HTML. The content is not defined in HTML but in other specifications. Similar considerations apply to style attributes, as in <a style="color: white">...</a>: the attributes are HTML, and but they contain embedded CSS.
When you are told to use “pure HTML, JUST HTML”, then you are probably expected to refrain from using CSS or JavaScript in any way. On the other hand, you are probably allowed to use images, even though images are not HTML but are used via external references or data: URLs. There is nothing particularly logical in such a requirement.
As suggested in other answers, simply do not try to control the rendering of the page. Worry about the rendering only if it becomes intolerably messy and there is a reasonable way to prevent that in “pure HTML”. For example, don’t try to set link colors (this would in fact be an improvement over the way most web pages deal with links), backgrounds, fonts, etc. But if you use e.g. a data table, consider using , which often makes a table essentially more readable.
Yes, you can:
and too you can put style inline in your body or header
<style>
a{
color: #ffffff;
}
</style>
and so, all your css you can write it in your native .html without use of another .css file
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.