CSS - Font Properties

CSS Font Properties

CSS - Font Properties

Usage of the same font for the entire content of your webpage may give a monotonous feel to your webpage.

You may wish to use different fonts for styling content of your webpage.

Font properties of CSS may help you achieve the above requirement.

Let us explore on font properties.

Let us see the usage of font-family property in the below example.

Let us see the usage of font-style and font-variant property in the below example.

font-style and font-variant property small-caps

Let us see the usage of font-size property in the below example.

Let us see the usage of font-size property in the below example.

Let us see the usage of font-weight property in the below example.

Demo :

CODE/PROGRAM/EXAMPLE

<!doctype html>
<head>
    <title>Login Page</title>
    <meta charset="UTF-8"> 
</head>
<body>
    <table align="center">
        <tr>
            <td width="800px" height="162px">
                <h2>Global Bank</h2>
            </td>
        </tr><br/><br/>
    </table><br />
    <table align="center">
        <tr>
            <td>
                <p>New User Account Creation Form!</p>
            </td>
        </tr>
    </table><br />
    <table border="4 solid" align="center" bordercolor="#8598CC">
        <tr>
            <td>
                <h3 align="center">Account creation form</h3>
                <form name="signupForm" action="success.html" class="form_css">
                    <table cellpadding="5" align=center>
                        <tr>
                            <td align="right">First Name</td>
                            <td><input type="text" name="fname" required /></td>
                        </tr>
                        <tr>
                            <td align="right">Last Name</td>
                            <td><input type="text" name="lname" required /></td>
                        </tr>
                        <tr>
                            <td align="right">Address</td>
                            <td><input type="textarea" name="address" cols="2" rows="2" required /></td>
                        </tr>
                        <tr>
                            <td align="right">Contact No</td>
                            <td><input type="number" name="contactNo" required /></td>
                        </tr>
                        <tr>
                            <td align="right">Gender </td>
                            <td><input type="radio" name="gender" value="Male" />Male
                                <input type="radio" name="gender" value="Female" />Female
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Account Type</td>
                            <td align="left">
                                <select name="accountType">
                                    <option value="#">--Select--</option>
                                    <option value="Savings">Savings</option>
                                    <option value="Current">Current</option>
                                    <option value="Fixed">Fixed</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Minimum Balance</td>
                            <td><input type="number" min="1000" value="1000" name="balance" required>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center"><input type="submit" value="Submit"></td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
    </table><br /><br />
    <table align="center">
        <tr>
            <td>
                <p>Visit Home Page after account creation</p>
            </td>
        </tr>
    </table>
    <table align="center">
        <tr>
            <td width="777px" height="30px">
                <footer>
                    <h2>&copy; Global Bank</h2>
                </footer>
            </td>
        </tr>
    </table>
</body>
</html>

#css_font_properties #css_font_family #css_font_weight #font_properties #css_font_family_list #font_variant_css #font_weight_normal #font_weight_property

(New page will open, for Comment)

Not yet commented...