# TDX Article on Styling & Sanitization # HTML Version for KB Web Design in TDX In order to avoid unnecessary confusion and improve training efforts for students taking on tasks related to styling articles, service pages, and more, I believe it would be best to include some explanation for unusual and seemingly arbitrary methods for styling pages with `CSS`. Styling our support portal using the provided admin's "**Styling**" page is extremely limited, as you can see in the screenshot below. ![[Pasted image 20260903145955.png]] Achieving the looks we want for articles and other pages is simply impossible using the provided TDAdmin Styling page. However, if you were to **Edit** a KB article using the included web-editor, and click on `Source` to reveal the code underlying what's displayed on the page, you'll notice some peculiarities: - Inline `style="..."` attributes on individual elements everywhere - **Zero** `<style>...</style>` blocks *anywhere* - **Zero** external stylesheets being linked in **NOTE**: it's much easier to paste the `Source` code into your favorite text editor (I'm using Zed in the screenshot) that includes syntax highlighting, as opposed to trying to edit code in the web editor. ![[Pasted image 20260903154836.png]] # **Vs.** ![[Pasted image 20260903154644.png]] This is because `<style>` blocks, importing external stylesheets, and a number of other properties, codeblocks, and more are simply **disallowed**. When you write content into that text editor, it's stored as raw `HTML` and rendered back out to every visitor who views the page. As you might be able to guess, however, this presents a potentially enormous security risk: someone could write some code to be processed and rendered to the site by the server, and, *woops*, turns out that code was malicious and now you have a bad actor on the server hosting your entire support portal. To prevent this from happening, TDX runs all the source code of the content you just created through a server-side sanitizer. That sanitizer checks every HTML tag, every HTML attribute, and every CSS property used against an **allowlist**, and anything not on that list is silently stripped before the page renders. This is why you might edit an article, see something render correctly in the editor, save it, and then find it's gone (or altered) on the live page — the editor doesn't enforce the same rules as the final render. Given that `<style>` blocks are permanently off the table, the *only* way to apply CSS to an element is directly on that element, via its `style="..."` attribute. For an authoritative source on the allowlists, check out the article [TDX: Sanitization and HTML Content Allowlists](https://solutions.teamdynamix.com/TDClient/1965/Portal/KB/Article/48230/Sanitization-and-HTML-Content-Allowlists). TDAdmin's also have the ability to add HTML elements and attributes, CSS properties, Iframe sources, and script sources to HTML allowlists. However, some are permanently disallowed. If you are unsure, or think that adding something might be useful, contact any of the admin and let them know.