Not my usual type of post, but here’s a dabbleance with HTML and CSS…
I was building a mockup web site for the church I attend. One of the design decisions was to use a very dark – as black as possible – background, and while I don’t like light text on a dark background (since it’s harder to read as you approach geezerdom), we’re a church with a relatively low average age, so it would work there.
So … near-black background, white or very light text. And I thought maybe a third color for the borders and other bits of styling, such as the bullets in lists. Orange on black is a good standout color.
It’s not so easy in CSS to get text in one color and list bullets in another – it’s one of the things I suspect never occurred to the committees. What you want to be able to do is something like:
… but that property keyword doesn’t exist. And when the question comes up on the web, it doesn’t seem to be something the forum gurus are too up on either – at various different sites one simply said no, you can’t do it; another said use an image instead, and a third suggested enclosing the text in the list in a span like this:
Now the idea behind CSS was that it manage style in place of HTML, not that it require more HTML to manage the limitations of CSS. So I had a think, and here’s how you do it:
In the CSS, turn off the bullet. Then add the ‘:before’ pseudo class to the li statement with the spiffy color and a snazzy bullet character that you pulled from your favorite HTML entity table (here’s a site with them all). And you get something like this:
Don’t forget to add your Doctype at the front for IE or it won’t work.
Demo and code here.