by

Tutorial: How to create a HTML Code Block Text on your site.

We start with this basic code. You see the black block and the white text in it.

This is the html code which creates the block.

<div style=”background-color: black; color: white; margin: 20px; padding: 20px;”>
<h2>Wealthy Affiliate</h2>
Wealthy Affilate University gives the best internet course Worldwide, with their 95-99% rating, they have no competition, whatsoever!

</div>

Now I will show you what you can change. You can make the block completely in your own style.
For that, you need different color codes, which you can find here.

I will use RED to show you where to put the color codes,

and BLUE for the codes which will change the character.

We are now going to change the colors. The black background color and the white text color.

<div style=”background-color: #CC9933; color: #660033; margin: 20px; padding: 20px;”>
<h2>Wealthy Affiliate</h2>
Wealthy Affilate University gives the best internet course Worldwide, with their 95-99% rating, they have no competition, whatsoever!

</div>

We copy and paste this html code block into the text area and get this result.

What we are now going to do is change the font.

These are the HTML codes for changing fonts, we use two of them.

Character size – <FONT SIZE=”4″> This letters are size 4</FONT>

Font color – <FONT COLOR=”#FF0000″> Here are RED characters</FONT>

Font color – <FONT COLOR=”#0000FF”> Here are BLUE characters </FONT>

Character types – <FONT FACE=”Arial”> Written in Arial</FONT>

Character types – <FONT FACE=”Purisa”> Written in Purisa</FONT>

<FONT COLOR=”#800080″, SIZE=”6″, FACE=”URW Chancery L”>Here is your adjusted text</FONT>

And this is the result from the Html font code above.
Character size – These letters are size 4

Font color – Here are RED characters

Font color – Here are BLUE characters

Character types – Written in Arial

Character types – Written in Purisa

Here is your adjusted text

By adding the next code you change 1st line font face in

<FONT FACE=”URW Chancery L”></FONT>

and the 2nd line in

<FONT FACE=”Purisa”></FONT>

<div style=”background-color: #CC9933; color: #660033; margin: 20px; padding: 20px;”>
<h2><FONT FACE=”URW Chancery L”>Wealthy Affiliate</FONT></h2>
<FONT FACE=”Purisa”>Wealthy Affilate University gives the best internet course Worldwide, with their 95-99% rating, they have no competition, whatsoever!</FONT>

</div>

We copy and paste this html code block into the text area and get this result.

The result is amazing, by just adding some html script there appears a whole different style.

<div style=”background-color: #66ff00; color: #009900; margin: 20px; padding: 20px;”>
<h2><FONT FACE=”URW Chancery L”>Tutorial html code block</FONT></h2>
<FONT FACE=”Purisa”>I hope you liked this tutorial, if you did, please leave a comment below!</FONT>

</div>

We copy and paste this html code block into the text area and get this result.

 I almost forgot to tell you about the marges: margin: 20px; padding: 20px;

When you set them at 5px the block becomes wider and narrower.

<div style=”background-color: #66ff00; color: #009900; margin: 5px; padding:5px;”>
<h2><FONT FACE=”URW Chancery L”>Tutorial html code block</FONT></h2>
<FONT FACE=”Purisa”>I hope you liked this tutorial, if you did, please leave a comment below!</FONT>

</div>

“HTML Code block” Tutorial

I was able to write these tutorials for you, because of the great course I am following on the

Wealthy Affiliate University.

Others also read...

List of html codes, no Css or JavaScript

  When you are having a WordPress website, you probably know that a lot of codes are stripped. I have searched for HTML codes which Read more...

How To Change The Background Color Of A Website Partially

Loes Knetsch © Some themes have this as default, a white background, then another color, and back to white again. You can create this with Read more...

by