Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > CSS: Embedding Styles Sheets outside the "head" tags

CSS: Embedding Styles Sheets outside the "head" tags
Thread Tools
Apple Pro Underwear
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status: Offline
Reply With Quote
Jun 29, 2007, 03:08 PM
 
I am doing some work for my company where a vendor is asking us to drop CSS code outside the head tag. It sort of works but it's inconsistent, how should I do it so that it works? Is there any guidelines for implementing this?

Specifically, I want to embed something like this to change a parameter in a external sheet:

.something {
something: 10px;
}




thanks' y'all
     
Chuckit
Clinically Insane
Join Date: Oct 2001
Location: San Diego, CA, USA
Status: Offline
Reply With Quote
Jun 29, 2007, 03:31 PM
 
I don't believe STYLE and LINK elements are allowed outside the HEAD tag. You could use inline styles (e.g., <div style="font-weight:bold">test</div>) if need be, but I kind of question this requirement. Why on earth would the vendor ask for it?
Chuck
___
"Instead of either 'multi-talented' or 'multitalented' use 'bisexual'."
     
Apple Pro Underwear  (op)
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status: Offline
Reply With Quote
Jun 29, 2007, 05:42 PM
 
It's a part of a content management system where we want to style something but customizing the template is not an option. he told me that we can use embedded styles but I thought it would be in the head. It's not, so I don't know what to do. The template already has pre-defined selectors already in the divs.

Any advice?
     
Catfish_Man
Mac Elite
Join Date: Aug 2001
Status: Offline
Reply With Quote
Jun 29, 2007, 06:17 PM
 
You could include a <script> element that inserts a <style> into the head...
     
Apple Pro Underwear  (op)
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status: Offline
Reply With Quote
Jun 29, 2007, 06:23 PM
 
can a script be executed in just the body alone?
     
Catfish_Man
Mac Elite
Join Date: Aug 2001
Status: Offline
Reply With Quote
Jun 29, 2007, 06:27 PM
 
scripts are run as they're encountered on the page; as far as I know they're valid in head and body.
     
Chuckit
Clinically Insane
Join Date: Oct 2001
Location: San Diego, CA, USA
Status: Offline
Reply With Quote
Jun 29, 2007, 06:54 PM
 
Yep, you can include a script tag pretty much anywhere. It obviously won't work for people who don't have JavaScript turned on, though, so I don't know how that effects your decision.
Chuck
___
"Instead of either 'multi-talented' or 'multitalented' use 'bisexual'."
     
Gavin
Mac Elite
Join Date: Oct 2000
Location: Seattle
Status: Offline
Reply With Quote
Jun 29, 2007, 11:55 PM
 
you can put a style tag anywhere you want, head, css include, last thing on the page.... just try it.

< style >
.something {
something: 10px;
}
< /style >

You may get cross-browser inconsistencies, so you may have to fiddle with the doc type to compensate (if you can that is). The css and html validators at w3.org are a big help here.
You can take the dude out of So Cal, but you can't take the dude outta the dude, dude!
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Jun 30, 2007, 12:16 AM
 
It's a Bad Idea™, but knock yourself out:

<html>
<head>
<style type="text/css">
div { background: green }
</style>
</head>
<body>
<script type="text/javascript">
addStyles('div { background: red }');

function addStyles(styles) {
if (!document.createElement) return;
if (!document.createTextNode) return;
if (!document.getElementsByTagName) return;
if (!document.appendChild) return;

var stylesheet=document.createElement('style');
stylesheet.appendChild(document.createTextNode(sty les));
document.getElementsByTagName('head')[0].appendChild(stylesheet);
}
</script>
<div>Test</div>
</body>
</html>
     
Apple Pro Underwear  (op)
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status: Offline
Reply With Quote
Jun 30, 2007, 12:41 AM
 
Synotic, you da man!

Beyond using javascript, why is this a bad idea? Some inconsistencies may arrise between browsers I suppose but the other option is using very dated and knowingly bad templates. My back is against the wall.
     
Apple Pro Underwear  (op)
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status: Offline
Reply With Quote
Jun 30, 2007, 12:44 AM
 
Gavin,

< style >
.something {
something: 10px;
}
< /style >

I tried adding my style tag in the only place it was allowed to me but I couldn't get any results. Am I doing something wrong?
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Jun 30, 2007, 01:08 AM
 
Originally Posted by Apple Pro Underwear View Post
Synotic, you da man!

Beyond using javascript, why is this a bad idea? Some inconsistencies may arrise between browsers I suppose but the other option is using very dated and knowingly bad templates. My back is against the wall.
The reasons that it's bad are largely academic. Decoupling JavaScript from the markup, behavior from content, and all that.

In this particular case, the solution is simple enough and should work for your purposes. I put in a few checks to make sure that browsers that couldn't handle it didn't choke. I've only tested it in Safari and Firefox, and so I don't know how MSIE and others are going like it. No guarantees.

Let me know how it goes though, and good luck
     
Catfish_Man
Mac Elite
Join Date: Aug 2001
Status: Offline
Reply With Quote
Jun 30, 2007, 07:40 PM
 
Crud. I wasn't exactly expecting my script idea to be taken seriously...

meh, it'll work
     
Apple Pro Underwear  (op)
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status: Offline
Reply With Quote
Jul 11, 2007, 11:52 AM
 
I eventually tracked down somebody who knew something at the vendor and they told me how I can externally link to my own style sheet. It is actually pulling a external file using the link tag outside the head... it works but I know it's not exactly geniousness in action.
     
Apple Pro Underwear  (op)
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status: Offline
Reply With Quote
Jul 11, 2007, 11:54 AM
 
Also, THANK YOU ALL FOR HELPING.
     
arcticmac
Dedicated MacNNer
Join Date: Apr 2004
Status: Offline
Reply With Quote
Aug 5, 2007, 01:24 AM
 
Originally Posted by Gavin View Post
you can put a style tag anywhere you want, head, css include, last thing on the page.... just try it.

< style >
.something {
something: 10px;
}
< /style >

You may get cross-browser inconsistencies, so you may have to fiddle with the doc type to compensate (if you can that is). The css and html validators at w3.org are a big help here.
Um... NO. Go read the DTD, and then come back and tell me again that it doesn't *specifically state* that the style tag is allowed ONLY inside the head element.

Just thought I'd clarify...
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Aug 5, 2007, 02:28 AM
 
Originally Posted by Catfish_Man View Post
You could include a <script> element that inserts a <style> into the head...
The problem with that approach is that Javascript is applied only at initial page render time, so if there was any Ajax stuff on the site Ajax calls (i.e. div block reloads) would not pick this up unless the Javascript function invoking the call also had the commands to inject the styes into the head tag.

I would go with simply embedding the styles into the actual HTML tags just like Chuckit described.

All sorts of inline Javascript functions and stylesheet stuff gets really sloppy. Look at some of the code for various pages on this forum, it's nearly incomprehensible. I'm very much a fan of storing this info in external files. However, embedding the styles as overrides to the defaults is, IMHO, the next best thing, as this way you can see at a glance what tags are getting what overrides without having to wade through style tags strewn about in random places.
( Last edited by besson3c; Aug 5, 2007 at 02:34 AM. )
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Aug 5, 2007, 02:31 AM
 
Originally Posted by Apple Pro Underwear View Post
Gavin,

< style >
.something {
something: 10px;
}
< /style >

I tried adding my style tag in the only place it was allowed to me but I couldn't get any results. Am I doing something wrong?

Inheritance? If this is the same class or ID, the last one that is read will take precedent, but whatever is missing in the same declaration and present in the first one will be inherited from the first declaration. In other words, the second declaration would be considered as overrides for the first declaration.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Aug 5, 2007, 03:00 AM
 
Originally Posted by besson3c View Post
The problem with that approach is that Javascript is applied only at initial page render time, so if there was any Ajax stuff on the site Ajax calls (i.e. div block reloads) would not pick this up unless the Javascript function invoking the call also had the commands to inject the styes into the head tag.

Disregard this.

What I wrote about Javascript only being picked up at initial page load time is indeed true, but any Ajax calls you make should pick up on this adjusted CSS as long as they didn't occur onload, in which case you might have a race condition.
     
Gavin
Mac Elite
Join Date: Oct 2000
Location: Seattle
Status: Offline
Reply With Quote
Nov 27, 2007, 08:14 PM
 
Originally Posted by arcticmac View Post
Um... NO. Go read the DTD, and then come back and tell me again that it doesn't *specifically state* that the style tag is allowed ONLY inside the head element. Just thought I'd clarify...
There's theory and then there's practice. The ground truth is what the browser will let you do. And if you don't get what you like, switch doc types.

Try it. I think you'll find that sophomorically memorizing a DTD only gets you half way.
You can take the dude out of So Cal, but you can't take the dude outta the dude, dude!
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 10:14 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,