My simple answer is …
FIRST understand the scope of CSS, How does it work? SCOPE in CSS is central, It is ACTIVE in any rendered scope it is included in,
SECOND understand THE RUSTON gave several ways for CSS to end up in shaping render in TW.
Meaning: just notice HOW CSS in TW is included—when & how.
One of it’s magics.
TT
Just a quick note: I agree this is a bad idea for an “ad hoc” single-tiddler style (unless it’s just a custom-css-class-specific proof-of-concept, etc.). However, embedding a <style> inline within a non-$:/tags/Stylesheet tiddler can be useful as a certain kind of trick.
As long as a tiddler is rendered (in story river or sidebar), its <style> section is active (and, afaict, overrides all previously loaded stylesheets), and it affects all other tiddlers in addition to whatever’s in that tiddler outside the style section.
So, you can effectively get one tiddler to “unlock” the visibility or salience of stuff that has a particular class that’s normally hidden, etc. Use that tiddler in a permaview (so your recipient sees what’s otherwise hidden), or make it a faceless sidebar element active for one audience/purpose but not another, etc. (Of course, you’ll want to document carefully, with comments/notes to future self, if you have faceless elements!)
Right. I missed that point, CSS render order can sometimes be IMPLICIT and a tad hard to fathom.
TT
I will, but that one will take me much more time to process. I’ve been using CSS since the NN4 days, and am very, very used to the standard cascade. It will take some time to start thinking in layers like this. I have some concerns with how they’ll interact, especially if plugins declare their own layers. Although I think I like the idea of adding this to the core, I am a bit afraid of what that would do when simpler user selectors win out over more targeted core ones. I will spend some time on this soon, though.
Thanks for all the new CSS info. I guess I really should pay attention. I was just so glad when FF finally supported :has, but I clearly have missed much else.
That’s a very interesting trick, and would have solved several issues that I’ve overcome in different ways, or abandoned. There must be some potential headaches when two different tiddlers use this with conflicting rules, but there’s a great deal of power too!
Hm, right now I find it easiest, albeit a bit challenging to navigate through, to keep all my CSS in a single tiddler divided by what it affects, partly due to how sometimes I seemed to run into issues where tiddlers were not rendering because they would get overridden by different stylesheets…
I’m not sure I follow. what are you referring to with D&D’ing it? (like dungeons and dragons?)
I am curious if I can create my own cascade type mechanism for other elements of the TW UI, because I really like how you can just, use a new filter and list it before the default one to have it render.
This is a very neat trick, I’m going to be stealing that for my little book of tiddlywiki tricks haha
How does @layer work? I’ve never seen this before, is t newer CSS?
I’ve never used nested CSS like that, frankly I didn’t think it was possible to.
I’m afraid I am years away from understanding The Ruston. I can’t lie, I would have an absolute field day if I could spend a day learning all there is to know about TW from The Ruston (this is now my new favorite way to refer to Jeremy hahaha)
Oh, That’s interesting, I didn’t know that was the case at all, I was under the impression it stayed loaded haphazardly in the entire wiki, due to some incorrect rendering issues I had experienced. Knowing that though, that could be fun to play with.
So, here is something I’d like insight on, is doing something like below unnecessary?
The reason I ask is because I have this at the top to continue to use the same styles as the vanilla theme, but everything after the \import lines should override whatever is imported, or atleast that was my intention.
\import $:/themes/tiddlywiki/vanilla/base
\import [prefix[$:/themes/wiki/base/macros/]] /* This is to import macros used in the stylesheet */
{{$:/themes/tiddlywiki/vanilla/reset}}
...
Also, I came back to a lot 
Lest ye all forget… I did, in that thread where TT asked about how to invent something like “a RUSTON” and what it might refer to…
Really
Useful
Software
To
Organize
Notes
I HAD ACTUALLY TYPED THAT but decided against it, but that’s 100% accurate.
Ah, I thought you were referring to JeremyRuston in this situation
hihi, sorry – drag and drop
It would be interesting to know how these alternate css methods would relate to independant windows with or without seperate templates as I raised here A new Flexbox Layout for TiddlyWiki - #16 by TW_Tones
I often write different plug-ins to support my own needs, but I find that I need to constantly write style files. Over time, these styles are rarely reused, and the style files are getting larger and larger, and I have to switch and maintain them among multiple style files. They are troublesome. So I wrote them all using tailwindcss, which completely relieved my mental burden of writing plugin code. (Some people may not like the way tailwindcss does)
@Justin_H On the topic of CSS and waiting for future fun things to appear…
The CSS attr() function seems to offer a somewhat simpler way to tie HTML attributes to CSS properties directly in the HTML. That is, for regular HTML elements and custom, imagine influencing behavior and display style directly as you type your HTML. Link
<!-- HTML -->
<span class="X" data-my-color="#bada55"> stuff </span>
/* css */
.X { background-color:attr(data-my-color); }
Then, the CSS element() function… words almost fail me. I just can’t wait. “Dashboard” builders and tinkerers are going to swoon over it. I made a post here a while back with a link to someone’s demo where s/he used to great effect. If I can find it, I’ll update this post. Link
Here you go: make sure you’re strapped in tight: Minimap — uiwtf
So, interesting behavior I just stumbled upon. It would seem that, you may be able to use this to apply CSS to TW tiddlers in other browser tabs as well… I need to do a bit more tinkering but, I thought I would share this little tidbit.
EDIT:
Also, I am playing around with CSS a bit to try out the things discussed above, and I have a question regarding data-attr styles.
I have 3 tiddlers, A B and C, and A {{transcludes}} B’s text, and B transcludes C, which has the CSS within it (see below) while A is the only tiddler tagged as a stylesheet.
I have also tagged A with HelloThere, however, I’m not sure I understand how to use the snippet of CSS below correctly. Could someone explain what I may be doing incorrectly here?
[data-tiddler-title="A"] {
border: solid 1px red;
[data-tags*="HelloThere"] {
.tc-title { color: green; }
}
}
I was unable to get it to work except for when it is not nested, so I think I am missing some key information.
[data-tiddler-title="A"] {
border: solid 1px red;
&[data-tags*="HelloThere"] .tc-title {
color: green;
}
}
I removed an extra set of curly brackets around the “.tc-title” style.
Put the “&” nesting selector directly before the [data-tags] style so that it looks at the same element as, rather than a child of tiddler A.
It will apply both styles to a tiddler with the Title “A” & the tag “HelloThere”
It is both.
1 — As the acronym for RUSTON (Really Useful Software To Organize Notes)
[IMHO that has as yet undriven mileage as an alternative name for TW???]
2 — Reference link to the Oxfordian Jeremy Ruston; our Ultimate Architect.
Just a comment
TT
Justin, I went back to your initial post.
I thought about it, read the replies (all mostly good), and pondered on it all.
TBH, CSS in TW is very free, very usable, and can very much determine what you end up with (visually & functionally).
It is one thing in TW where more detailed tutorials could really help. I think.
Tutorials that explain (1) the CSS “cascade” and, importantly, (2) the various (rich, useful) ways CSS is potentiated in TW.
Just a comment
TT
Ohh, I understand what I did now. If there was a tiddler inside of tiddler A it would have applied to that tiddler. Thank you for the correction 
With as extensive as CSS is, I’m not sure we could do it justice by making a full set of guide tiddlers. That is a herculian task in it of itself, let alone maintaining those and the documents explaining tiddlywiki.
However, going over commonly used CSS like for instance @media within the tiddlers that discuss features that use them where external links are included to the Mozilla Dev page or even the w3schools pages dicussing them could be an easier way of providing insight into CSS.
I would think that tiddlers that should be made regarding CSS should go over TiddlyWiki specific usecases, like how it was done with the data-tags, or better yet as previously mentioned, using the style html tags for unique behaviors.
These seem to be exclusive or atleast somewhat exclusive, usecases to tiddlywiki, if that makes sense.
Footnote: Right. But it is not “exclusive” … rather TW architecture really uses the power of CSS well in several ways. I think that may make it look more complex than it actually is. It is fully conformant to CSS standards. It just uses them!
Of course with TW one has to deal with the fact TW is a “Full On Standards Universal Machine” (meaning it’s architecture is open to all native HTML, Javascript, CSS & SVG easily).
Rant off, TT