Стили в HTML

Как сделать отображения кода на странице таким образом:

ТЕКСТ на сером

ТЕКСТ на сером
ТЕКСТ на сером ТЕКСТ на сером ТЕКСТ на сером ТЕКСТ на сером ТЕКСТ на сером ТЕКСТ на сером ТЕКСТ на сером ТЕКСТ на сером

Добавляем в шаблон сайта блога (http://www.blogger.com), в самом начале файла, после тега head этот код, обрамляем его тегом style. На станице сообщения в блоге обрамляем наш код следующим тегом <pre class="mycode300"> наш код </pre>.

<style>
.mycode {
background: none repeat scroll 0% 0% rgb(230, 230, 230);
color: black;
font-size: normal;
overflow: auto; 
padding: 2px; 
text-align: left; 
width: 100%;
}
.mycode300 {
background: none repeat scroll 0% 0% rgb(230, 230, 230);
color: black;
height: 300px; 
font-size: normal;
overflow: auto; 
padding: 2px; 
text-align: left; 
width: 100%;
}
.mycode600 {
background: none repeat scroll 0% 0% rgb(230, 230, 230);
color: black;
height: 600px; 
font-size: normal;
overflow: auto; 
padding: 2px; 
text-align: left; 
width: 100%;
}
.mycode600bw {
border: 1px inset; 
height: 600px; 
line-height: 1.0; 
margin-right: -99999px; 
margin: 0px; 
overflow: auto; 
padding: 2px; 
text-align: left; 
width: 100%;
}
</style>
 

Применяем следующим образом

<pre class="mycode"> наш код </pre>    фон серый, скроллинг по ширинe автоматом
<pre class="mycode300"> наш код </pre> т.ж., но фиксированная высота 300 px
<pre class="mycode600"> наш код </pre> высота 600 px
<pre class="mycode600bw"> наш код </pre> высота 600 px, фон белый, бордюр

Для того чтобы отобразить теги на html-странице, даже в коде, приходится прибегать к использованию спецсимволов

&lt;    <
&gt;    >
&quote;  "
&nbsp;   _
&amp;   &

Раньше использовал стили на каждой странице, что не удобно.

<style>
.mybbcodeblock {
border: 1px inset; height: 600px; line-height: 1.0; margin-right: -99999px; margin: 0px; overflow: auto; padding: 2px; text-align: left; width: 100%; font-family: Courier New,Courier,monospace;
}
my.code {
background: none repeat scroll 0% 0% rgb(230, 230, 230);
color: black;
font-family: Courier New,Courier,monospace;
font-size: normal;
}
mycode6000 {
border: 1px inset; 
height: 600px; 
line-height: 1.0; 
margin-right: -99999px; 
margin: 0px; 
overflow: auto; 
padding: 2px; 
text-align: left; 
width: 100%;
}
</style>

Примеры

pre class="mycode"

ТЕКСТ на сером ТЕКСТ на сером ТЕКСТ
ТЕКСТ на сером ТЕКСТ на сером ТЕКСТ на сером ТЕКСТ на сером ТЕКСТ

my class="code"
ТЕКСТ С КОДОМ.

pre class="mycode6000" на странице

1 ТЕКСТ 
2 ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ 

pre class="mycode600" в шаблоне

ТЕКСТ на белом 

pre class="mybbcodeblock" на странице

ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. 

ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. 

ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. ТЕКСТ на белом. 

&lt; <
&gt;   >
&quote;  "
&nbsp; _
&amp; &