HOME | PHP Tutorial | CSS
facebook icon
AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP
PHP Tutorial

PHP forms
HTML Tutorial

CSS Tutorial

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 }

Example 1:
<!DOCTYPE html>
<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>

</body>
</html>

CSS cod above will display this CSS result -

The Difference Between ID and Class

Note: There are no browser defaults for any ID or Class

CSS Class and ID, The Difference Between ID and Class CSS Class and ID, The Difference Between ID and Class - css tutorial

3298. CSS background image opacity without affecting child elements, text or content, css tutorial
CSS background image opacity without affecting child elements, text or content css tutorial
https://www.agernic.com/css-tutorial/css-background-image-opacity-without-affecting-text-content.html

2232. CSS Tutorial - Font and font families
There are mainly two types of fonts which are: serif and sans serif. There isn
https://tutorialehtml.com/en/css-tutorial-font-and-font-families/

2231. CSS Tutorial - Float
All HTML elements that comes next to elements aligned using float left or right, will float next to it. To prevent that you need to use the clear attribute with the value: both:
https://tutorialehtml.com/en/css-tutorial-float/

3180. CSS align image center - how to create, css tutorial
CSS align image center - how to create css tutorial
https://www.agernic.com/css-tutorial/css-align-image-center-how-to-create.html

3179. CSS align content Property - CSS align text - how to create, css tutorial
CSS align content Property - CSS align text - how to create css tutorial
https://www.agernic.com/css-tutorial/css-align-content-property-css-align-text-how-to-create.html

813. CSS box model - CSS tutorials - w3resource

https://www.w3resource.com/css/concepts/box-model.php

Your add here
PHP strstr() function

PHP str_replace() function

PHP print() function

PHP str_split() function

PHP strtolower() function

PHP implode() function

PHP lcfirst() function

PHP ucwords() function

PHP isset() Function

PHP strcmp() function

PHP count() Function

PHP str_repeat() function

PHP printf() function

PHP trim() function

PHP strlen() function

PHP define() function

CSS Font Color Class
HTML Text Style
PHP Function, Creating PHP Function - how? - example
CSS background image opacity without affecting child elements, text or
HTML Text Color
CSS div class background color