Free Reprintable Web Development Articles
HTML
Font and Paragraph Styles
This brief article is a tutorial on how to format font styles and paragraphs in webpages.
The most basic styles for text that are used in webpages are bold, italic, and underline. To add a bold style to your text, the tag is <b>. For italics, it is <i>, and for underline, it is <u>.
To change the font style, you would add the font tag inside the <p> tag. For example:
<p><font face="Arial">This is a sentence.</font></p>
To change the color of your text, you would change the word "face" in the above code to "color". It would look like this:
<p><font color="#008000">This is a sentence.</font></p>
The number "#008000" is the hexadecimal value of the color green. You could replace "#008000" with the word "green" and the browser would show the same thing. For complicated colors, the browser might not understand what color you want and it might just use a default color like black. To use complicated colors, you have to find their hexadecimal values. Use google and type the keywords "hexadecimal color values" or something similar to it.
To center align your sentences, use the code <p align="center">. For example:
<p align="center">This is a sentence.</p>
To make your sentence left-aligned, juse use <p> or <p align="left">. To right align, replace the word "left" with the word "right".
You can combine tags to make complex styles. For example the code:
<p align="center"><font color="#008000"><b>This is a sentence</b></font></p> will show "This is a sentence" bold, color green, and centered on the page.
You might wonder that the above code seems long. Can the code be shorter and produce the same effect? The answer is yes. Inside the head tags of your code you have to put a code which tells the browser how to handle user-created tags. Using our previous example, your code in the head tags would look like this:
<head>
<style>
<!--
.p1 { color: #008000; text-align: center; font-weight: bold; }
-->
</style>
</head>
p1 is the name of your user-created tag. You can rename "p1" to anything that you like. Now, if you want to code the text "This is a sentence" in a shorter way. You would type it as
<p class="p1">This is a sentence</p>.
For an interactive HTML Font Tutorial, visit csshtmltutorial.com/
Customize your Free Hit Counter at BestFreeHitCounter.com