Guidance portal

World of Guidance and Education

Font style, Color and Size

                            In this chapter we will discuss about font, font style and color of font. Font style, color and size is used to format the layout of contents on a webpage so that it becomes more pleasant, attractive and effective for readers. Thus we need to learn

  1. How to change font face (style)?
  2. How to change font size ?
  3. How to change font color ?

 Font face:         

Font face is the technical name used in HTML for font style. As usual we have to learn about "font face tag". This tag is a bit complex as compared to earlier tags we studied. The tag is <font face="name of font style">. Please note that closing tag is </font>.

Please note "name of font style" should be complete programming names. These names can be picked from here. For example if you want to change font face for Verdana then

     <font face="Verdana, Geneva, sans-serif">
    WELCOME TO OUR WEB SITE
    </font>

Similarly if you want the font style to be Arial Black then write the programming name of arial black in font style tag as shown below.

     <font face="Arial Black, Gadget, sans-serif">
    WELCOME TO OUR WEB SITE
    </font>


Note

Just change the programming name of font style. Syntax is same for all styles.

Font size

In this topic we will learn how to change "font size" in the specific place of contents according to our requirements. The tag to change font style is <fontsize="font size as per your requirement">. Please note that closing tag is same as used in "font style" that is </font>.

     <font size="8">
    WELCOME TO OUR WEB SITE
    </font>

     

Font color:

Changing the font color is same like other two font functions studied above. The tag to be used is <font color="programming name of color">. There are thousands of colors with programming names. Some common colors with progamming names are given here. Please note that closing tag is </font>.

     <font color="#FF0000">
    WELCOME TO OUR WEB SITE
    </font>

Now lets put it all in one coding to see how it looks like on browser.

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>

    <p><font face="Verdana, Geneva, sans-serif">WELCOME TO OUR WEB SITE
    </font>
    </p>
    <p><font size="8">WELCOME TO OUR WEB SITE
    </font></p>
    <p>
    <font color="#FF0000">WELCOME TO OUR WEB SITE
    </font></p>
    </body>
    </html>

     Browser view

 

comments powered by Disqus