title: AnotherExampleStyleSheet
modifier: blaine
created: 20110211110622
modified: 20110211131015
tags: examples
creator: psd

This tiddler shows some more complex effects that can be obtained with cunning use of CSS. Not all of these will work properly on all browsers because of differences in CSS implementation, but they should fail gracefully.

You can have special formatting for a specific, named tiddler like this:
{{{
#tiddlerHelloThere .title {
background-color: #99aaee;
}
}}}

Or for the first displayed tiddler:
{{{
div.tiddler:first-child .title {
font-size: 28pt;
}
}}}

Or just for the first line of every tiddler:
{{{
.viewer:first-line {
background-color: #999999;
}
}}}

Or just for the first letter of every tiddler:
{{{
.viewer:first-letter {
float: left;
font-size: 28pt;
font-weight: bold;
}
}}}

Or just for tiddlers tagged with a particular tag (note that this won't work for tags that contain spaces):
{{{
div[tags~="welcome"].tiddler .viewer {
background-color: #ffccaa;
}

div[tags~="features"].tiddler .viewer {
background-color: #88aaff;
}
}}}
