CSS Class and ID, The Difference Between ID and Class
The difference between ID and a Class selector is that an ID selector can be used to identify one element, but, class selector can be used to identify more than one element.
In the CSS, Class selector starts with "." followed by the selector name, and the selector ID starts with "#" followed by the selector name
The Difference Between ID and Class - example
Syntax : selector { property: value }
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Class and ID, The Difference Between ID and Class - example</title>
<meta name="description" content="CSS Class and ID, The Difference Between ID and Class - example - learn The Difference Between ID and Class." />
<style type="text/css">
#header {
background-color: #B0FFB0;
padding: 12px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}
.main-box {
color: #039;
font-weight: bold;
text-align: center;
padding: 14px;
background-color: #EAEAEA;
margin-top: 16px;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
</head>
<body>
<div id="header">
Your head title here. This header box is an ID selector.
</div>
<div class="main-box">
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
</div>
<div class="main-box">
Here is the second main-box selector
</div>
</html>
CSS cod above will display this CSS result -
CSS Class and ID, The Difference Between ID and Class
CSS Class and ID, The Difference Between ID and Class - css tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.