Apply styles to text appearance and text font

Applying color to text

CSS3 accepts the color value in any of the following three methods.

  • Hexadecimal value:This is commonly referred to as the RGB code(red, green, blue). For example #FA00FA, the firt two digits are the red, the second two are the green and the last two are the blue.
  • Color name: Use a word to specify the color value, such as red to display the text in red.
  • RGB function: This takes three parameters, each representing a color spectrum bit value from 0 to 255. For example, rgb(0,255,0) specifies green as the text color.

The following code demonstrates each method in use.

<head>
<style type="text/css">
    /* Using Hexadecimal value */
    #p1 {   color: #00FF00;  }
    /* Using Color name */
    #p2 {   color: green;   }
    /* Using RGB function */
    #p3 {   color: rgb(0,255,0);    }
</style>
</head>
<body>
    <p id="p1"> TEXT COLOR USING (color: #00FF00;)</p>
    <p id="p2"> TEXT COLOR USING (color: green;)</p>
    <p id="p3"> TEXT COLOR USING (color: rgb(0,255,0);)</p>
</body>

Applying bold to text

The font-weight CSS property accepts the following values to specify how bold you would like the text to be:

  • lighter, normal, bold, and bolder
  • numeric values 100 (lighter) to 900 (darker), increase by 100

The following code demonstrates the text bold properties:

<head>
<style type="text/css">
    /* APPYING BOLD */
    #boldText { font-weight:bold; }
    /* APPYING BOLD - NUMERIC VALUE*/
    #boldTextNumeric { font-weight:500; }
</style>
</head>
<body>
    <p id="boldText">TEXT BOLD USING (font-weight:bold;;)</p>
    <p id="boldTextNumeric">TEXT BOLD USING (font-weight:500;)</p>
</body>

Applying italic style to text

Through the font object, you can also make specific text italic. This is done by specifying the font-style for the text.

The following code demonstrates applying the italic style:

<head>
<style type="text/css">
    /* MAKE TEXT ITALIC*/
    #italicText{  font-style:italic; }
</style>
</head>
<body>
    <p id="italicText"> THIS TEXT IS ITALIC USING ( font-style:italic; )</p>
</body>

Apply styles to text font

You can control the font typeface in a few different ways:

  • Fonts that are installed on the system using the font-family keyword. If the font name contains spaces, it must be contained within quotes. If none of the specified fonts are available, the text falls back to the browser’s default font.
  • Fonts available on the Internet knowns as WOFF (Web Open Font Format). To use these fonts in your webpage, you define a font family using the special keyword @font-face.

The following code demonstrates both types of fonts using font-family and @font-face. 

<head>
<style type="text/css">
    /* SYSTEM FONTS USING - FONT FAMILY*/
    #fontText{
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';
    }
    
    /* PERSONALIZED FONT - USING FONT FACE */
    @font-face {
        font-family: 'myText';
        src: url('fonts/Aaargh-webfont.woff') format('woff'), 
             url('fonts/DJ-webfont.woff') format('woff');
    }
    /*CALLING THE PERSONALIZED FONT*/
    #fontText2 {    font-family: "myText";  }
</style>
</head>
<body>
    <h3>Apply styles to text font using font-family</h3>
    <p id="fontText"> APLLYING FONT FAMILY TO TEXT USING ( font-family) </p>
     
    <h3>APPLY STYLES TO TEXT FONT USING @font-face</h3>
    <p id="fontText2"> FONT FAMILY USING ( @font-face )</p>
</body>

Using the font-size property

You can control the control the size of the text by using the font-size property.

The available values are: xx-small, x-small, small, smaller, medium, larger, large, x-large, xx-large.

The following code demonstrates the font-size properties: 

<head>
<style type="text/css">
    /* FONT-SIZE*/
    #size1 {    font-size:x-large;  }
    #size2 {   font-size:small;    }
    /*Specifying the size in px*/
    #size3{    font-size:25px;     }
</style>
</head>
<body>
    <h3>FONT SIZE</h3>  
    <p id="size1"> TEXT WITH ( font-size:x-large;)</p>
    <p id="size2"> TEXT WITH (font-size:small;)</p>
    <p id="size3"> TEXT WITH (font-size:25px;)</p>
</body>

Ads Right