CSS - Classification Properties

CSS Classification Properties

CSS - Classification Properties

We can further improve the look an feel of our page using classification properties of CSS.

We can change the default appearance of bullets which appear in a list item.

We can make the block-level element appear as an inline element.

We can change the appearance of the cursor for a particular element on the page.

Let us explore classification properties to do all that.

Let us see the usage of list-style-type and list-style-position property in the below example.

CSS Classification Properties html example

Let us see the usage of the list-style-type property with upper-roman and lower-roman values in the below example.

CSS Classification Properties list output

CSS Classification Properties list 2 output

Let us see the usage of list-style-image property in the below example.

CSS Classification Properties list image

Let us see the usage of display property in the below example.

CSS Classification Properties display html

CSS Classification Properties display css

CSS Classification Properties display output

Note: We can specify a value inline-block to the display property. inline-block is similar to inline elements but we can specify width and height to the inline-block elements.

Demo :

CODE/PROGRAM/EXAMPLE

<!doctype html>
<head>
    <title>Home Page</title>
    <meta charset="UTF-8"> 
</head>
<body>
    <table border="1" align="center">
        <tr>
            <td width="800px" height="100px">
                <h2>Global Bank</h2>
            </td>
        </tr>
    </table>
    <table border="1" align="center" bordercolor="#8598CC" cellpadding="2">
        <tr>
            <td width="700px">
                <section>
                    <h3>Welcome to Global Bank details Page !</h3><br/>
                    <p>Welcome User</p><br /><br />
                </section>
                <table border="4 solid" align="center" bordercolor="#8598CC">
                    <tr>
                        <td>
                            <h3>To know your account details click on the following tabs</h3>
                            <table cellpadding="5">
                                <tr>
                                    <td>
                                        <form name="loginForm" action="accountSummary.html">
                                            <button type="submit">Account Summary</button>
                                        </form>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <form name="loginForm" action="funds.html">
                                            <button type="submit">Transfer Funds</button>
                                        </form>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <form name="loginForm" action="loan.html">
                                            <button type="submit">Apply for loan</button>
                                        </form>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr><br/>
                </table><br/>
                <p dir="rtl"> <a href="home2.html">Logout</a></p>
            </td>
        </tr>
    </table>
    <table border="1" align="center">
        <tr>
            <td width="800px" height="30px">
                <footer>
                    <b>&copy; Global Bank</b>
                </footer>
            </td>
        </tr>
    </table>
</body>
</html>

body{background-color:lightgrey;}

#CSS_Classification_Properties #classification_properties #Classification_Properties_css

(New page will open, for Comment)

Not yet commented...