Conversation

shellsharks All Content shellsharks All Content remote Jul 31, 2026, 1:18 PM You are here

citations.css
I previously introduced the idea of using CSS as a means to selectively style references to other sites/authors/creators. There I also suggested using indieweb.txt as a place to share one’s own reference info, including this css styling. Since I somewhat routinely credit or otherwise shout-out other IndieWeb personalities throughout this site, I wanted an easier way to apply these styles when making said references. Why? Because I think it’s a fun way to pay homage to these other unique sites I enjoy and respect. Enter citations.css, a place to centralize these styling directives for referencing other sites and authors.

citations.css is a list of .class selector declarations where each reference maps to the site you are referencing’s domain name. You replace any dots “.” with a dash (“-“). So “shellsharks.com” becomes “shellsharks-com”. An example for this site can be seen below…
```
/* Shellsharks.com */
.shellsharks-com {
    color:#CA3342;
}
```
Once loaded up, you can then refer to my site using class="shellsharks-com" and voilà, you’ve got shellsharks!

For sharing your own styling preferences such that others can add it to their citations.css file, I suggested using indieweb.txt. You could have it as a field in indieweb.txt itself, or perhaps point to a citation.css (note: ‘citation’ singular, not ‘citations’ plural) file that houses just your site’s prefered reference css.
```
- citation-css: .shellsharks-com { color:#CA3342; }
```
or
```
- citation-css: https://shellsharks.com/citation.css
```
tiny note: I use the former, so you won’t find anything at “shellsharks.com/citation.css”.

Issues

This is just an idea—and like with many of my ideas, there’s many-an-issue…
- Accessiblity is an obvious one. Some people’s preferred or chosen styling might just not look great on the destination site. This could result in accessibility concerns or just general eye-soreness.
- Security, duh: Accepting arbitrary code from folks on the Internet? What could go wrong!?
- Logistics: I’ve still not figured out the most friction-less way of sharing and otherwise ingesting other people’s reference css. Maybe it’s in indieweb.txt, maybe it’s in a static file named citation.css in the .well-known directory. I’m not really sure.
To solve for accessibility, maybe you could share light and dark mode-compatible styling code. For security, maybe there could be a centralized directory (github repo) that folks can submit their styling block to that get’s reviewed (scanned?) before it is accepted. Who would own/run/maintain this repo? Duno. For logistics, this is something that would probably just need to be agreed upon by the larger community (assuming this reached any level of popularity or adoption at all, which I honestly do not expect).

Other Considerations

As I’m talking with others and using this myself, I’ll add some other considerations here…
- It may be useful to have a last updated value somewhere so that others can know if they have the latest styling block for your site.
- Ideally, styling should not make text larger or smaller, but rather focus on font, color, framing, etc…
- Though there’s no technical limitation, my recommendation is to keep your styling rather simple (e.g. no animation, etc…). To help with adoption, accessibility, security review and usability on other people’s sites.
Anywho… that’s my idea! So if you do feel like referencing my site in a fun way on your own site, feel free to get my citation styling from my indieweb.txt file! If you think this is fun and have decided to implement it yourself, let me know! I’ll add your info here too.

Shout out to fLaMEd, who’s unique styling inspired this idea. 🔥

Citations Directory

A list of sites (that I know of) that have implemented citations.css or shared their citation css block with me.
source

Conversation

citations.css

Issues

Other Considerations

Citations Directory