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

PHP forms
HTML Tutorial

CSS Tutorial

CSS Div Id Class


CSS Tutorial » CSS div id class


In the CSS to select elements class, write a "." (dot) character, followed by the name of the class
and an id selector is a name preceded by a "#" tag.


Syntax:

Syntax: id CSS.
#id_name { css declarations; }

Syntax: class CSS.
.class_name { css declarations; }

Note: use external CSS instead.

Different Id / Class Although both #id and .class can be used to style an html element. In practice, only the class attribute is used for this purpose. The id attribute is generally used in javascript to locate an html element and perform actions on it.

On the other hand, the id attribute must be unique on the page. This means that there cannot be another html element with the same id. The presence of several elements with the same id, can generate javascript errors and invalid html copy.

How to create div CSS id and class - examples


You can try to execute the following code to change div CSS id and class property of a text on this page.

Example:
Example 1, How to create div CSS id and class property - examples:

  <!DOCTYPE html>
<html>
<head>
<title>How to create div CSS id and class property - examples - example</title>
<style>
#first_box {
width: 380px;
border: 2px solid #00FF00;
text-align:right;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
font-style: italic;
font-weight: bold;
color: #00CCFF;
text-decoration: none;
background-color: #CCCCCC;
}
.second_box { width: 276px;
text-align:left;
font-family: "Courier New", Courier, monospace;
font-size: 14px;
border: 2px solid #0000FF;
margin-top: 18px;
}
</style>
</head>
<body>
<div id="first_box"> <h1>How to create div CSS id and class property</h1> How to create div CSS id and class property - examples - example
<div class="second_box">How to create div CSS id and class property - examples - example.</div> </div>
<div class="second_box"> This div contains a very long word:
will break and wrap - thisisablablarylongwordblarylongwordblarylongwordblarylongwordblarylongword.
The long word will break and wrap to the next line.</div>
</body>
</html>
Note: Use external CSS instead.

css div id class, together, selector CSS Div Id Class - css tutorial

3185. CSS Margin, top, bottom, left, righ, auto, css tutorial
CSS Margin, top, bottom, left, righ, auto css tutorial
https://www.agernic.com/css-tutorial/css-margin-top-bottom-left-righ-auto.html

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

812. CSS (foreground) color - CSS tutorials - w3resource

https://www.w3resource.com/css/color/introduction.php

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/

2592. How to include, how to incorporate CSS in HTML, css tutorial
How to include, how to incorporate CSS in HTML css tutorial
http://www.agernic.com/css-tutorial/how-to-include-how-to-incorporate-css-in-html.html

3012. CSS Text Style Bold - Text Decoration - Text Shadow, css tutorial
CSS Text Style Bold - Text Decoration - Text Shadow css tutorial
http://www.agernic.com/css-tutorial/css-text-style-bold-text-decoration--text-shadow.html

Your add here
PHP htmlspecialchars() function

PHP str_repeat() function

PHP similar_text() function

PHP ltrim() function

PHP str_split() function

PHP wordwrap() function

PHP ucwords() function

PHP ucfirst() function

PHP strtolower() function

PHP strcmp() function

PHP strlen() function

PHP lcfirst() function

PHP strip_tags() function

PHP implode() function

PHP md5() function

PHP strtoupper() function

Blog Templates
CSS Font Color Class
Design HTML CSS Templates
CSS max width - max height - CSS responsive
CSS Padding, top, bottom, left, right
CSS Border Radius top left right bottom