CSS Id Selector

CSS - Id Selector

Id Selector

If we have a requirement to style a particular paragraph among several paragraphs.

In this case, element selectors will not be useful as it will select all paragraph of a particular type.

We can use another selector called id selector which can uniquely select an HTML element among several elements of the same type.

Let us learn how to use the ID selector.

Id selectors match an element based on the element’s id attribute and apply the styling accordingly.

Id must be unique for each HTML element.

The id should be prefixed with “#” while using the id in CSS file for styling.

id selector in css
id selector output in css

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" cellpadding="2">
        <tr>
            <td width="700px">
                <section>
                    <h3>Welcome to Global Bank Home Page !</h3><br />
                    <p><em>Global Bank</em> is a international bank which has branches in various 
                    cities of various country.</p>
                </section>
                <p>
                    This application automates the banking process.Using this application the admin can 
                    easily create new accounts and the customers can login to view their account details.
                </p><br />
                <table align="center" border="4 solid" bordercolor="#8598CC">
                    <tr>
                        <td>
                            <h4 align="center">Login</h4>
                            <form name="loginForm" action="Details.html">
                                <table cellpadding="5">
                                    <tr>
                                        <td align="right">User Name</td>
                                        <td><input type="text" /></td>
                                    </tr>
                                    <tr>
                                        <td align="right">Password</td>
                                        <td><input type="password" /></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" align="center"><input type="submit" value="Login">
                                        </td>
                                    </tr>
                                </table>
                            </form>
                        </td>
                    </tr><br />
                </table><br />
                <p>
                    Submit online application for new account here <a href="signUp.html">Create Account</a>
                </p>
            </td>
        </tr>
    </table>
    <table border="1" align="center">
        <tr>
            <td width="800px" height="30px">
                <footer>
                    <h2>&copy; Global Bank</h2>
                </footer>
            </td>
        </tr>
    </table>
</body>
</html>

body{background-color:lightgrey;}
#css_id_selector #css_id #css_id_and_class #Id_Selector #div_id_css #css_class_id #css_id_and_class_together_ #css_using_id_

(New page will open, for Comment)

Not yet commented...