How do I override CSS from inside the BODY of the website?

September 23, 2008 1:36 PM

How do I override a website's CSS with a snippet in the body? The most common example of this would be the elaborate re-designs people do to MySpace pages using the profile field, though I've seen it elsewhere (even, briefly, here.)

This isn't a matter of plain CSS coding, but how to use a snippet in a user-editable section of a page to override the whole design. I know it's possible to define classes inside the BODY of a HTML document but I've never gotten the hang of it. Are there tutorials available online that I could use to generalize the process? I'm sure it's straightforward enough if I can just wrap my brain around it.

posted by Karmakaze to Computers & Internet (11 answers total)

Just put in <style></style> tags and dump whatever CSS you want in between. Note that most websites will filter these tags out when put into something like a user-editable profile field.
posted by zsazsa at 1:56 PM on September 23, 2008

So, you can define CSS "rules" in the head of a web page. Those rules consist of a selector (which tell the browser what parts of the webpage you want changed) and one or more declarations (which tell the browser what you want done to those parts you have selected).

While you can use CSS in the body of a page to override styles, you're looking at what are called inline styles, using a style attribute (perhaps applied to an already extant element or perhaps as part of a span tag which wraps around your target).

Two key parts here:
1) Typically the inline style trumps styles defined elsewhere as they have higher specificity as part of that whole "Cascading" business. Sometimes that does not work, and you have to add an !important keyword to a declaration.

2) These inline styles do not have selectors applied to them. Therefore, if there was a class selector established in the head of the document (.annoyingmusicplayer {display: block;}), only with let's say a ton of declarations, you do not have a way to grab onto that selector and make your changes. At least, that's to my knowledge.

You might explore trying to alter the CSS rules in Javascript, thereby allowing your user-editable section to latch onto the established CSS rules. I tried that once, but failed, mostly due to finding an easier way to do what you want. I've never tried to drop a style block anywhere but the head of the document. Might invalidate your document; might be ignored by the browser.

I think we need more specifics. What website? More importantly, is this your website? Is it someone else's?
posted by adipocere at 2:26 PM on September 23, 2008 [1 favorite]

You might also want to look into using !important declarations in your CSS.
posted by kickingtheground at 3:02 PM on September 23, 2008

HTMLhelp has a good basic guide to CSS, including inlining. It looks like you may also be able to import a style sheet using a style tag in the body.
posted by timepiece at 3:53 PM on September 23, 2008

Response by poster: The issue here is that I'm working on a proprietary CMS with some limited templates. (I can't go into detail because it's, well, proprietary). The templates are all done with .css files which I can't access. All I can change are a few defined fields. However, there's stuff with those templates I really want to be able to change. Redefining the styles inside STYLE tags is all I could think of. I know whenever I see these redesigns, the overrides are all very specifically nested, but I'm not sure why that matters. Can I even redefine classes that way?
posted by Karmakaze at 12:16 PM on September 24, 2008

Are you trying to override for yourself, or for everyone viewing? Can you edit all of the HTML, or just portions inside the actual BODY tag? If you have access to the entire HTML file, you can easily add another style sheet of your own to be imported along with the others. As I said above, it looks like you can also import from within a STYLE tag, like so:

<STYLE TYPE="text/css">
<!--
  @import url(http://www.htmlhelp.com/style.css);
-->
</STYLE>

In general, being able to put all the code in an external sheet will be much easier, and will enable you to apply the style sheet to multiple pages.

It is possible to override style sheets with your own, especially if this is just for yourself. The Stylish extension for Firefox exists for just that purpose. For examples of how people override site style sheets, take a look at userstyles.org.

The ability to override depends on the cascading order - you just need to make sure your rules are more specific or more important than theirs. If you can't use classes or IDs to specify elements (if they don't have classes or IDS in the html and you can't add them), you may want to look at the ways to specify selectors. Warning - many of those methods (e.g, child and sibling selectors) are not supported by IE6, and I have no idea whether IE7 supports them.
posted by timepiece at 7:42 AM on September 25, 2008

Response by poster: It's for everyone viewing. And I can only edit the HTML in some small portions inside the actual BODY tag. If I could get at the headers, I'd be golden. It's having to do it from inside the BODY that's defeating me.
posted by Karmakaze at 9:03 AM on September 25, 2008

I don't see why only being able to put your <style> tags in a random place inside the body is defeating you. You can override any class in the whole document anywhere. Example.
posted by zsazsa at 3:53 PM on September 25, 2008

Response by poster: Because it's not working. Or it's not working right. There's some magic to working out exactly the chain of object names will actually get the desired result.

For example, I can't just do [style][!-- li {padding: 1em} --][/style] because the designer zeroed out the list padding for a reason. That'll mess up the navigation. So it's div:content ol li or some such. And sometimes that works and sometimes it doesn't and I don't know why!
posted by Karmakaze at 1:35 PM on September 30, 2008

A lot of people zero out everything (* { margin: 0; padding: 0; }) to minimize browser differences. I do.

Can you change anything at all? Enough to know you're getting the syntax right? In your padding example, does making it !important work?

Remember, a more specific rule (or more !important) overrides a less specific one. ID is more specific than class is more specific than HTML element. Seriously, look at that cascading order link above - it shows you how to calculate the specificity of a selector. If the page uses IDs, use those plus the class plus the element, to ratchet up your specificity.

li {padding: .2em;} ‌ low
.linklist {padding: .5em;} ‌ medium
#leftmenu {padding: .7em;} high
#leftmenu .linklist li {padding: 1em !important;} winner!

Maybe you could add in a few of your own IDs and classes to the html?
posted by timepiece at 7:58 PM on September 30, 2008

Response by poster: What's killing me is that I've successfully fixed the padding, but I can't override the list type!
posted by Karmakaze at 7:57 AM on October 1, 2008