# Applying my own CSS and HTML on websites?

**URL:** <https://boards.straightdope.com/t/applying-my-own-css-and-html-on-websites/663012>\
**Category:** Factual Questions\
**Created:** [July 9, 2013, 5:34am UTC](https://boards.straightdope.com/t/applying-my-own-css-and-html-on-websites/663012 "2013-07-09T05:34:04Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dog80](https://avatars.discourse-cdn.com/v4/letter/d/6bbea6/32.png) [@Dog80](https://boards.straightdope.com/u/Dog80)\
**Post date:** [July 9, 2013, 5:34am UTC](https://boards.straightdope.com/t/applying-my-own-css-and-html-on-websites/663012/1 "2013-07-09T05:34:04Z")

</div>

There’s a website I frequent that they made some changes recently. One of the changes was that they made the sidebar wider, almost as wide as the main content bar.

The result looks good on wide screens, but horrendous on my old 4:3 monitor and the text on the main bar wraps around.

I played around with Firebug, and by modding a few lines in the CSS I managed to get the site back to its old look.

But is there any way to make the changes stick?

Also there’s another website that has a \<div\> that is not closed properly and this messes up spacing. It has been pointed out several times to the site admin but they won’t fix it.

Is there a way to fix the html issue on my side in a similar fashion to the CSS?

---

<div class="post-metadata">

**Author:** ![DataX](https://avatars.discourse-cdn.com/v4/letter/d/e99b99/32.png) [@DataX](https://boards.straightdope.com/u/DataX)\
**Post date:** [July 9, 2013, 5:38am UTC](https://boards.straightdope.com/t/applying-my-own-css-and-html-on-websites/663012/2 "2013-07-09T05:38:28Z")

</div>

You can include CSS inside the HTML itself. You don’t have to reference an external CSS file.

So if you copy All the old CSS out of the .css file and put it inside the HTML file - that is one way of doing it.

---

<div class="post-metadata">

**Author:** ![the\_O](https://avatars.discourse-cdn.com/v4/letter/t/eada6e/32.png) [@the\_O](https://boards.straightdope.com/u/the_O)\
**Post date:** [July 9, 2013, 5:39am UTC](https://boards.straightdope.com/t/applying-my-own-css-and-html-on-websites/663012/3 "2013-07-09T05:39:08Z")

</div>

Only if it’s \*\*\*your \*\*\*website can the changes you make in Firebug be made to ‘stick.’

---

<div class="post-metadata">

**Author:** ![DataX](https://avatars.discourse-cdn.com/v4/letter/d/e99b99/32.png) [@DataX](https://boards.straightdope.com/u/DataX)\
**Post date:** [July 9, 2013, 5:41am UTC](https://boards.straightdope.com/t/applying-my-own-css-and-html-on-websites/663012/4 "2013-07-09T05:41:09Z")

</div>

> [@the\_O](#):
>
> Only if it’s \*\*\*your \*\*\*website can the changes you make in Firebug be made to ‘stick.’

Oh - if you don’t have control over either the HTML or CSS file on the server - then yeah - you are screwed. This is a simple change. Move hosts if they can do it.

---

<div class="post-metadata">

**Author:** ![Jragon](https://avatars.discourse-cdn.com/v4/letter/j/e19b73/32.png) [@Jragon](https://boards.straightdope.com/u/Jragon)\
**Post date:** [July 9, 2013, 5:49am UTC](https://boards.straightdope.com/t/applying-my-own-css-and-html-on-websites/663012/5 "2013-07-09T05:49:12Z")

</div>

I’m not a web guru, but **surely** one could make a browser plugin that intercepts HTML and CSS received from certain domains and makes pre-determined changes before displaying them.

---

<div class="post-metadata">

**Author:** ![tellyworth](https://avatars.discourse-cdn.com/v4/letter/t/977dab/32.png) [@tellyworth](https://boards.straightdope.com/u/tellyworth)\
**Post date:** [July 9, 2013, 6:10am UTC](https://boards.straightdope.com/t/applying-my-own-css-and-html-on-websites/663012/6 "2013-07-09T06:10:44Z")

</div>

There are several ways.

If you only need to change CSS, you can install a [user stylesheet](http://superuser.com/questions/318912/how-to-override-the-css-of-a-site-in-firefox-with-usercontent-css). If you know a little CSS it shouldn’t be hard to do that using the rules you made in Firebug.

For the HTML issue, perhaps [Greasemonkey](https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/).

---

<div class="post-metadata">

**Author:** ![Dog80](https://avatars.discourse-cdn.com/v4/letter/d/6bbea6/32.png) [@Dog80](https://boards.straightdope.com/u/Dog80)\
**Post date:** [July 9, 2013, 3:48pm UTC](https://boards.straightdope.com/t/applying-my-own-css-and-html-on-websites/663012/7 "2013-07-09T15:48:27Z")

</div>

> [@the\_O](#):
>
> Only if it’s \*\*\*your \*\*\*website can the changes you make in Firebug be made to ‘stick.’

I know that 😛

What I meant was how to make the changes stick _on my end_  
Tellyworth, thanks. I guess this will do the trick!

---

<div class="post-metadata">

**Author:** ![Blakeyrat](https://avatars.discourse-cdn.com/v4/letter/b/ecd19e/32.png) [@Blakeyrat](https://boards.straightdope.com/u/Blakeyrat)\
**Post date:** [July 9, 2013, 5:14pm UTC](https://boards.straightdope.com/t/applying-my-own-css-and-html-on-websites/663012/8 "2013-07-09T17:14:04Z")

</div>

Greasemonkey is the usual answer, but it’s not trivial to learn.

EDIT: and I really wish people wouldn’t say things are “impossible”, just because they don’t know of a way to accomplish it. Greasemonkey has been around for years and years.

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [July 10, 2013, 11:42am UTC](https://boards.straightdope.com/t/applying-my-own-css-and-html-on-websites/663012/9 "2013-07-10T11:42:01Z")

</div>

[Stylish](https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=search) is the usual way to do this if you don’t need the full power of Greasemonkey. And look on [userstyles.org](http://userstyles.org/); somebody may have already made the same change you did.

Shameless plug: I made a few [SDMB ones](http://userstyles.org/styles/browse/all/SDMB) to increase usability.
