Where the code goes

1. CSS: Manage Profile → the CSS box (validator scopes it under #user-css-[your userid]).
2. Bio HTML: Manage Profile → Bio. Auto-format is on: put each block on one line and control breaks with block tags.
3. Bio code can carry its own class/id hooks so your CSS can target it precisely (e.g. #bio).

The specificity game

The profile is tables inside tables, so you rack up "points" by stacking selectors. table hits everything; tr:has(td[colspan='3']) hits just the top bar; tr:has(a[href*="interests"]) hits just the interests row. See the cheat sheet tab for the full list.

Sections: hiding rows

The Sections tab writes the hide rules for you. Each checkbox targets one row: the user row is the only tr[valign="top"] (it carries the userpic); name and website are its next siblings (tr[valign="top"] + tr, then + tr + tr, with a guard so a bio-shaped row is never caught); friends and communities are found by their label links (td[align="right"] a[href*="/friends"] and a[href*="community"]); bio is the labeled row that contains blockquotes. Interests, account type, schools, "friend of" and the more-details link match their own links. When you grab a profile, hide rules in its CSS that match these rows are moved into the checkboxes: the rule is stripped from the CSS and the box is checked, so unchecking makes the row visible again. A row a journal does not have (some have no interests or website row) gives its checkbox nothing to match, so it does nothing.

WYSIWYG notes

Turn on WYSIWYG and click inside the bio area of the preview to type directly. The toolbar edits text formatting; the Code tabs stay in sync. Use ↺ Reset or Save/Load for sessions (stored in your browser). Ctrl+Z undoes and Ctrl+Y redoes any design change (typing in text fields keeps the browser's own undo). ⇔ compare splits the window into two half-height panes: the original imported profile on top (ORIGINAL), your styled version below (NEW). Each pane scrolls on its own and the two stay in step while you scroll either one.

Accessibility

Contrast matters more than aesthetics. If you shrink the font, keep the contrast high. Test both light and dark userpics against your box color.

Official rules — FAQ #168

Editor: Manage Account → Manage Profile → Profile CSS (manage/profile/css.bml). Save validates and stores — if anything fails, nothing is saved. Validate dry-runs and shows the cleaned CSS; Reset wipes your CSS and the profile reverts. Editing multiple journals? Use the "Work as account" dropdown there.

Limits & blockers

Max size 64 KB. Allowed: standard rules, comments, @media queries (responsive breakpoints ok), and url() pointing at https:// URLs, same-site relative paths, or data:image/ URIs. Blocked: @import / @charset / @font-face · position: fixed · z-index > 100 · selectors on html / body / :root or anything starting #IJ- · expression() / behavior: / -moz-binding · javascript: & vbscript: URLs · plain http:// url() values. The ✔ validate button checks all of these before you paste.

Good to know

Profile CSS only affects /profile — journal S2 styling is separate. Other users can't override your CSS. Not seeing changes? Hard-refresh (Shift+Reload); profile fields can take a moment to clear caches. IJ doesn't host images — use any https:// image host with a stable URL. Deleting your account deletes the stored CSS.

Reference

Framework post: mashbill.insanejournal.com/66826.html
Pattern library: thehills.insanejournal.com
Official profile-CSS FAQ: insanejournal.biz/support/faqbrowse.bml?faqid=168
Local snapshots in reference/

Click any selector to highlight it on the live preview. Sources: mashbill's framework post + thehills pattern library.

Live outline of the preview's profile DOM. Hover to locate, click to select.