HTML-Booklet

Text styles assume a significant job in making a site more easy to use and expanding content meaningfulness. Textual style face and shading relies altogether upon the PC and program that is being utilized to see your page yet you can utilize HTML <font> tag to include style, size, and shading to the content on your site. You can utilize a &lt;basefont &gt; tag to set the entirety of your content to a similar size, face, and shading. 

The text style tag is having three properties called size, shading, and face to redo your textual styles. To change any of the textual style qualities whenever inside your website page, just utilize the <font> tag. The content that follows will stay changed until you close with the </font> tag. You can transform one or the entirety of the text style qualities inside one <font> tag. 

Note : The text style and base font labels are belittled and it should be expelled in a future variant of HTML. So they ought not be utilized rather, it’s recommended to utilize CSS styles to control your textual styles. Yet at the same time for learning purposes, this section will clarify text style and basefont labels in detail. 

Set Font Size 

You can set the substance text dimension utilizing size trait. The scope of acknowledged qualities is from 1(smallest) to 7(largest). The default size of a text style is 3. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size =”1″>Font size One</font><br />
<font size =”2″>Font size Two</font><br />
<font size =”3″>Font size Three</font><br />
<font size =”4″>Font size Four</font><br />
<font size =”5″>Font size Five</font><br />
<font size =”6″>Font size Six</font><br />
<font size =”7″>Font size Seven</font>   
</body>
</html>

Output:

Font size One

Font size Two

Font size Three

Font size Four

Font size Five

Font size Six

Font size Seven

Relative Font Size 

You can determine what number of sizes bigger or what number of sizes littler than the preset text dimension ought to be. You can indicate it like <font size = “+n”> or <font size = “−n”> 

Model 

<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size =”-1″>Font size -1</font><br />
<font size =”+1″>Font size +1</font><br />
<font size =”+2″>Font size +2</font><br />
<font size =”+3″>Font size +3</font><br />
<font size =”+4″>Font size +4</font>
</body>
</html>

Output:

Font size -1

Font size +1

Font size +2

Font size +3

Font size +4

Setting Font Face 

You can set a text style face utilizing face trait yet know that if the client seeing the page doesn’t have the textual style introduced, they won’t have the option to see it. Rather the client will see the default textual style face pertinent to the client’s PC. 

Model

<!DOCTYPE html>
<html>   
<head>
<title>Font Face</title>
</head>
<body>
<font face =”Comic sans MS” size=”6″>Comic Sans MS</font><br/>
<font face =”Times New Roman” size=”6″>Times New Roman</font><br/>
<font face =”Verdana” size=”7″>Verdana</font><br/>
<font face =”Bedrock” size=”6″>Bedrock</font><br/>
<font face =”WildWest” size=”6″>WildWest</font><br/>        
</body>
</html>

Output:

Comic Sans MS

Times New Roman

Verdana

Bedrock

WildWest

Determine substitute textual style faces 

A guest might have the option to see your textual style on the off chance that they have that textual style introduced on their PC. Along these lines, it is conceivable to determine at least two text style face choices by posting the textual style face names, isolated by a comma. 

<font face =”arial,helvetica”

<font face =”Lucida Calligraphy,Comic Sans MS,Lucida Console”

At the point when your page is stacked, their program will show the main text style face accessible. On the off chance that none of the given text styles are introduced, at that point it will show the default textual style face Times New Roman. 

Note : Check a total rundown of HTML Standard Fonts. 

Setting Font Color 

You can set any textual style shading you like utilizing the shading characteristic. You can indicate the shading that you need by either the shading name or hexadecimal code for that shading. 

Note :You can check a total rundown of HTML Color Name with Codes. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color =”green”>This text is Green</font>
<font color =”#FF00FF”>This text is in pink</font><br/>   
</body>
</html>

Output:

This text is Green

This text is in pink

The &lt;basefont &gt; Element 

The &lt;basefont &gt; component should set a default text dimension, shading, and typeface for any pieces of the record that are not in any case contained inside a <font> tag. You can utilize the <font> components to abrogate the &lt;basefont &gt; settings. 

The &lt;basefont &gt; tag likewise takes shading, size and face traits and it will bolster relative textual style setting by giving size an estimation of +1 for a size bigger or −2 for two sizes littler. 

Model

<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<base font face =”arial, verdana, sans-serif” size =”2″ color =”#ff0000″>
<p>This is the default font.</p>
<h2>Example of the &lt;basefont&gt; Element</h2>
<p><font size =”+3″ color =”red”>This is red text with two sizes larger</font></p>
<p><font face =”courier” size =”-1″ color =”#000000″>It is a size smaller and black in color.</font>
</p>   
</body>
</html>

Output:

This is the default font.

Example of the Element

This is red text with two sizes larger

It is a size smaller and black in color.

 

Share