How to make code box for website || How to set code box || How to write code in website

How to make code box for website ||  How to set code box || How to write code in website 

1 = Code box with Scroll     ----

Write following code in your blogger CSS --

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid 
#5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 
'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 
10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding:
 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }

Write this code in your blog ---

<div class="code">

here is your all code

</div>

2  = Code Box without scroll  ------

Write following code in your blogger CSS –

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid 
#5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 
'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 
10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; 
width: 90%; }
.code:hover { background-repeat:no-repeat; }

Write this code in your blog ---

<div class="code">

here is your all code

</div>

3 = Simple Code Box  ----

Write This code in your blog ---

<form><textarea rows="5" cols="40" onClick=select() readonly>

Write Code Here.

</textarea></form>

4 = Automatic / Best Code Box ---

 

Write following code in your blog --

 

<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: &quot;andale mono&quot;, &quot;lucida console&quot;, &quot;monaco&quot;, &quot;fixed&quot;, monospace; font-size: 15px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code style="color: black; overflow-wrap: normal;">


Write Code Here.
 
</code></pre>

Thanks -----