Page 1 of 1

CSS on my note affects the whole screen

Posted: Wed Feb 12, 2014 5:32 am
by Swingerzetta
I have a note in which I use a <style> tag to change the style of td and th elements, and, in particular, makes the background of td's white. When I view this note, I notice that the top of the page, and several other elements, are now on white backgrounds.

Re: CSS on my note affects the whole screen

Posted: Wed Feb 12, 2014 6:56 am
by joo
You could use the fact that everything in a note is inside a <pre> tag, and everything outside is not, by changing your styles in the following way:

Change:

Code: Select all

td { background: red }


To:

Code: Select all

pre td { background: red }

Re: CSS on my note affects the whole screen

Posted: Thu Feb 13, 2014 12:40 am
by Swingerzetta
That works great! Thanks. I didn't know about that.
So, using two items not separated by commas means the style will only be applied to td's inside pre's?

Re: CSS on my note affects the whole screen

Posted: Thu Feb 13, 2014 6:22 am
by EchoMan
Yes, that is how it works. You could also add a div and an id, e.g.

Code: Select all

<style>
#mystuff ul { background: #fff; }
</style>

...

<div id="mystuff">
<ul>
<li>first item</li>
<li>Second item</li>
</ul>
</div>


... or use specific classes, eg.

Code: Select all

<style>
.my-td { background: #fff; }
</style>

...

<td class="my-td">whatever</td>

...