This question already has answers here:
Closed 11 years ago.
Possible Duplicates:
Is adding CSS rules outside the Header possible?
Declare CSS style outside the “HEAD” element of an “HTML” page ?
I'm working on a CMS which doesn't permit me to edit the CSS, nor do I have access to the head to add a link to my own CSS file.
I do however have access to certain html zones of the website and would like to declare my CSS link inline with the HTML for each element.
The reason: I'm building a "garage door" with CSS3 Transitions and therefore it's important that I can declare the ID and style in my html directly.
So how would one declare a CSS file inline with the html? Here's what I've come up with, but I'm clearly missing something.
"ul id="garagedoor": href="http://linktothefile/garagedoor.css"
I realize it's entirely counter-intuitive to declare the css inline with the html, but I see no other way of getting this to work.
Thanks guys
I'm working on a CMS which doesn't permit me to edit the CSS
Then either:
It is a really awful CMS and should be replaced or
You don't have the authority to add CSS to the site (but someone else does and you need to talk to them)
Can one declare a css file directly in an html element?
The only place that <link> or <style> elements are allowed is the <head>, although browsers will error recover from them being elsewhere.
style attributes are allowed on most elements, but are bad practise.
"ul id="garagedoor": href="http://linktothefile/garagedoor.css"
That doesn't even resemble HTML.
Related
This question already has answers here:
Does <STYLE> have to be in the <HEAD> of an HTML document?
(10 answers)
Closed 1 year ago.
I'm doing an html and css course on udemy. The creator first said that the style tag must be placed in the head tag but then in one of the programs he put the style tag in the body tag and it worked. Could someone please explain this to me?
Browsers are very permissive and will often attempt to work with the html you provide, so technically both work. However the correct aproach would be to place it in the <head> quoting from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
The <style> element must be included inside the <head> of the document. In general, it is better to put your styles in external stylesheets and apply them using <link> elements.
The short answer is:
Yes you should always place the style tag under head. Placing it under body would still work most of the time, but is considered wrong or bad practice. If he put the style tag in body, he was doing the wrong thing.
If you are interested in a more detailed explanation as to why this is considered best practice, you can take a look at this thread:
Does <STYLE> have to be in the <HEAD> of an HTML document?
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.
This question already has answers here:
Are custom elements valid HTML5?
(12 answers)
Closed 7 years ago.
Is it possible to use custom tags in html such as <g></g> to group text? I then want to apply styling to these custom tags via CSS that accomplish the same thing as in the fiddle with the rounded rectangles and blue text.
The reason all of this is needed is because the first way I have it set up in the fiddle uses generated content - which isn't part of the DOM so the blue text can't be highlighted/selected so that you can copy/paste it.
The solution I came up with was to make the generated content not generated, but merely distinguish the tags from the actual content by a delimiter, in this case, the | character.
So I need a way to produce the same output as the original, but with the new syntax, so that way the text can be copyable.
http://jsfiddle.net/xa3apsdc/20/
Do <span class="g"></span> instead and problem solved.
On custom tags older browsers cant support it, but you can handle them as other not supported (ex. canvas) tags, so if you really need it, you can do it: http://jsfiddle.net/xa3apsdc/22/
You will encouter some problems anyway: custom tags not working in ie8
Key is to set display rule to element: display:block; or display:inline-block and you are set to go.
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.