Displaying codes

In this tutorial I am going to show you how to display codes like this:

<a href=”http://lovemore.src”> LOVEMORE </a>

First we are going to start by making a div class in style.css:

.code {
width:500px;
background:#95bfda;
color:#022338;
font:400 13px/20px ‘Coming Soon’, cursive;
margin:10px;
padding:10px;
text-align:left;
}

We want the width to be less than the content, so I made mine 500px. After that We will choose the background of the code area, the color of the font, the type of font we use and the the size of the code. We want a space around our code area so we are going to add margin:10px; also we don’t want our text right near the margin of the code area so we are going to add padding:10; (this will move the text inside the block with 10px. And I choose to align my text to the left, but you can ass well align it to the center.

When you add the code in your page it should look like this:

< div class=”code” >

</div>

To display a code you have to use some html codes for “<" and ">“.
For “<" the html code is &lt;
For “>” the html code is &gt;

So when displaying a code you have to replace < and > with &lt; and &gt;. So your code should be something like this:

<div class=”code”>
&lt;a href=”http://lovemore.src”&gt; LOVEMORE &lt;/a&gt;
</div>

This is the way to display a code without using textarea boxes. Of course you can customize your code area how you like. I hope this helped you.