div[class] {
    position: absolute;
    top: 20%;
    right: 1%;
    bottom: 10%;
    left: 1%;
    overflow: auto;
    visibility: hidden;
    -moz-box-shadow: 3px 3px 3px #333;
    -webkit-box-shadow: 3px 3px 3px #333;
    box-shadow: 3px 3px 3px #333;
}
.default {
    background: silver;
}
#default {
    margin: 0 1em;
    padding: 0 1em;
    visibility: visible;
}
div:target　{
    visibility: visible;
}

setext風

docutls 等で折角 setext から html に変換したのに css で元通りに表示したら可笑しいんでないかと…… Joke の積り。

.setext {
    background: #fff;
}
#setext {
    border: thin outset;
    margin: 0 1em;
    padding: 0 1em;
}
div.setext::after {
    content: "\A..\A";
}
div.setext * {
    font-size: medium;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
}
div.setext > p {
    margin-left: 1em;
}
div.setext > pre {
    float: left;
}
div.setext blockquote > * {
    display: list-item;
    list-style-type: none;
}
div.setext blockquote > *::before {
    content: "> ";
    display: marker;
}
div.setext blockquote,
div.setext dl,
div.setext ol,
div.setext ul {
    padding: 0;
}
div.setext h1::before {
    content: "Subject: ";
}
div.setext h2 {
    border-bottom: medium double;
    float: left;
    margin-right: 1em;
}
div.setext h3 {
    border-bottom: thin solid;
    float: left;
}
div.setext li {
    list-style-type: none;
}
div.setext li li {
    padding-left: 1em;
}
div.setext li::before {
    display: marker;
    content: "* ";
}
div.setext table {
    background: #dc8;
    display: inline-table;
}
div.setext table * {
    margin: 0;
}
div.setext table caption {
    background: #dc8;
}
div.setext td {
    background: #fe8;
}
div.setext td > p {
    margin-left: 1em;
}
div.setext th {
    background: #ed8;
    text-align: left;
}
div.setext a::after,
div.setext ins::after,
div.setext ins::before,
div.setext u::after,
div.setext u::before {
    content: "_";
}
div.setext b::after,
div.setext b::before,
div.setext strong::after,
div.setext strong::before {
    content: "**";
}
div.setext em::after,
div.setext em::before,
div.setext i::after,
div.setext i::before {
    content: "~";
}
div.setext q {
    quotes: "`" "`";
}

Samples

Source	View
<h1>h1</h1>	h1
<h2>h2</h2>	h2
<h3>h3</h3>	h3
<ol> <li>li</li> </ol>	li
<blockquote> <p>blockquote&gt;p</p> </blockquote>	blockquote>p
<p>p</p>	p
<b>b</b>	b
<strong>strong</strong>	strong
<i>i</i>	i
<em>em</em>	em
<u>u</u>	u
<ins>ins</ins>	ins
<a>a</a>	a
<q>q</q>	q

.tab {
    background: pink;
}
#tab {
    border: thin outset pink;
    clear: both;
    margin: 0 1em;
    padding: 0 1em;
}
div#tabpanel {
    position: fixed;
    top: 90%;
    left: 1%;
    right: 1%;
}
div#tabpanel li {
    border-top: 0 none;
    vertical-align: top;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-box-shadow: 3px 3px 3px #333;
    -webkit-box-shadow: 3px 3px 3px #333;
    box-shadow: 3px 3px 3px #333;
}
div#tabpanel * {
    display: inline;
    margin-top: 0;
    margin-left: 1%;
    padding: 0.3em;
}
<div id="tab" class="tab">
    ...
</div>
<div id="tabpanel">
    ...
</div>

.note {
    background: ivory;
}
#note {
    border-top: 1em dotted gray;
    margin: 1em 2em;
    padding: 0 1em;
    outline: ivory solid 1em;
}
<div id="note" class="note">
    ...
</div>