基本的に文章ばかりのページを作っておりまして，HTMLの可読性というのはすごく気になるところです．物書き人間はそういう人が多いよね，と勝手に思ったので，私の小説（めっきり二次小説ばかりですが）ページで使っているCSSをちょっと解説します．
デザインの部分は横において，構造的な部分とか可読性でみたCSSの解説になります
書き上げた小説がすでにあるとします．
青空文庫形式のテキスト文書を前提としています．すなわち，
ほかにも決まり事はいろいろありますが，主なところはこんな感じ．
これをHTMLにするわけですが，ルビを使いたいので，XHTML1.1にします．
サンプルとして夢野久作『縊死体』を使います．（サンプルにその文章を使うのが何か間違っている気がする）
このHTMLだけのファイルがどう見えるかはこちら．この小説は新聞記事が途中にあって，その部分のタグはどうしておこうか困ったのですが，今回の趣旨とはあまり関係のないところで悩んでもしょうがないので，スタイルを既に埋めちゃいました．
段落をpタグで囲んだりルビを処理したりは自動的な部分なので，私はマクロで一気にファイルを作っています．（秀丸エディタでHTMLベタ書きしているもので）
CSSを使ってこのHTMLの見栄えを整えるわけですが，使い回すのが楽なのと，変更した時の簡便性から考えて，別ファイルを読み込む形式にした方がいいと思います．
ので，ヘッダーの部分に<link rel="stylesheet" href="外部スタイルシートのファイル名" type="text/css" />というコードを埋め込みます．
ファイル数が多くなってしまうので，サンプルではHTMLにCSSを直接書いています．
多分，段落をpタグで囲った時の不満は多くのブラウザでその前後に空行が入ることでしょう．とりあえず，p要素のマージンをとってしまいます．
p{ margin: 0px; } →マージンを無くした例
見にくくなったねけ〜！！（富山弁）と思った人のために，多くの文字書きがCSSを使うに当たっての最大の利点（と私は思っている），行間調整を追加してみましょう．
p{ margin: 0px; line-height: 2em; } →行間を調整した例
だいたいこれで1行空きになります．これで劇的に読みやすくなったかと．
あと，ウィンドウの端と文章との間に隙間があると見やすくなります．
body{ margin-right: 10%; margin-left: 10% } →余白を設定した例
節を示すためにその上下との間隔を大きくします．
.section{ margin-top: 3em; margin-bottom: 3em; }
節をくくるdivタグにclass="section"と書いているのはこの空行を設けるためです．あとは，まあ，筆者の名前は右寄せかな，と．
.author{ text-align: right;} →セクション上部の空行を設定した例
実は問題点が1つ．それは，この方法だとCSSに対応していないブラウザでは節の始まりが分からないことです．う〜む．
これでおしまいなわけで，あとは好きにデザインしていきましょうということになるのですが，その時にやらない方がいいと思う事．
文字の大きさを小さめにすると小ぎれいに仕上がるからか，文字の大きさ等を指定する人が多々いるんですが（あるいは作成ソフトが勝手にそうしてしまうのか？），環境によって大きさが変わるのと，読み手が必ずしも目がいいとは限らないので（……），文字の大きさは指定しないでほしい．
指定するのならせめて相対値（パーセント指定や，現在の文字の大きさを基準とするem，exなど）でしてほしい．
白い背景に薄い灰色など．明度差があまりないページは上品に見えるので，使っている人は多いですけど，長文だと辛い．
色の話をすると，主観によるのかもしれませんが，この頃，背景色が濃い色だと目が辛くなってきました．昔は平気だったのになあ．
こっから話の雲行きが怪しくなるのですが．（苦笑）
シリアスは文字を明朝（それに類する書体）にしたくなっちゃうんだ．そうするとモニタでは読みにくいのは分かっているんだ．でもする．
body *{ font-family: serif; } →文字をセリフ体にした例
書体はブラウザの設定によります．
私は縦書きを愛する者です．よって，縦書きにしたい．したがって縦書きにしてみる．
現在，CSSだけで縦書きを実現できるのはIEの5.5以上（およびレンダリングエンジンにそれを使っている物）だけです．
ちなみに，私の常用ブラウザはFirefoxです．したがって，縦書きにしても自分じゃさっぱり恩恵にあずかれません．
さて，縦書きの指定はwriting-modeでやるのですが，これはbody要素には適用できないので，ページ全体をdivで括ってやるしかありません．<div class="story">（bodyの中身全体）</div>等と書き足します．
以下が縦書きのためのスタイルシートの記述．何でそう書くかは，縦ルビなどを参照してください．
縦書きにした例．（IEの5.5以上で見ないと縦書きにはなりません）
縦書き表示なんですが，主に書き手である人は縦書きにしたがるように思います．特にリアルでも本が好きな人は．が，主に読み手である人にはあまり評判が良くない．まあ，コンピューターの世界は横書き基準で操作性も横書きを想定しているんですから仕方がありません．
よって，縦書きは自己満足と心得ましょう（苦笑）．
ルビを使いたいという物書きさんはとても多いと思いますが，ルビに対応しているのはIE5.5以降だけ．
そこで，IE以外でも，CSSでルビを実現してしまおうと，以下のコードをruby.cssとして読ませています．
2008.7.20修正：以前は「曉に死す」の徒書2003年3月16日の記述を利用していたのですが，
ので，いじくっているうちにこうなりました．副産物としてSafariでもルビ表示できました．（Macで見たら表示されてた）
素晴らしくブラウザ依存なので，これも自己満足です．
以上をまとめてテンプレートにしたファイル．→doc_css.zip（2KB）
秀丸エディタな人は，プレーンテキストファイルを上述のようなHTMLにするマクロ．→storyto_mac.lzh（4KB/言葉の組み合わせによってはうまく変換しきれません．だいたいはうまくいくはずなので，手動で補完してください）
激しく使う人を選ぶ物ばかりだな．（果たして今時タグをベタ打ちしていて，しかもVailedなHTMLを書きたい物書きがどれだけいるというのだろう？）