Html css div example

11 Examples of HTML div With Style, Class, id, background etc

The div element defines the “division” in the HTML documents. The div tags are generally used to define the layout or sections of the web pages.

The div HTML tag is used to group HTML block elements like paragraphs, headings, and format those with style or CSS. Alternatively, you can say, the div is a container that encloses other HTML block-elements to format them with CSS.

Note: The block elements are those that occupy full available width. Also, these elements add a line before and after it.

To understand the difference between block Vs inline elements, see this example.

In this tutorial, we will show you how to use the div tag with the CSS class, id and style attributes along with using CSS to set the border, background color or image, font size, alignment etc. with examples.

A few examples of using div tag

The div style

The style is an attribute that allows applying inline CSS to the div or elements within the div. This is how you can use div style.

Following are a few examples of using HTML div style attribute.

Example of style in div for setting font size and color

The example below sets the font size and color of the text by using the style attribute in a div element.

A div background color demo

The following example shows how to set the background color with the style attribute. The background property of CSS, background-color is used to define the background color of div.

Applying background to div tag by class or id in CSS is explained below with examples.

A div background image example

The following example sets the background image of the div element. The background image is set in the style attribute by using the background-image property of CSS.

A div border demo

The example below shows how to apply the border to HTML div tag with the style attribute. The CSS border property is used to define the border.

As you can see, the border style is kept solid, the border color is black and thickness is 1 pixel.

A div width and height example

The example below shows how to set the height and width of the div element. The height and width are set in the style attribute of the div element. The div height is kept 100 while the width is 300.

An example of div with padding and margin

In the following example, we are using CSS padding and margin properties in the div tag. To learn more about padding and margin go to their respective chapters.

The div Class and ID attributes

Until now we have learned how to set different properties of div tag by using div attributes, especially the style attribute. We saw the examples of setting the div border, background color, and image, font size, and color with inline CSS.

Now let us work and see examples with div class and id and separate CSS rather inline by using the class and id attributes.

The Class attribute of div

The class is an attribute of the div tag that acts as an identifier in the document. For example, you can use div class name in the CSS to create a class for div element style. Similarly, you can refer that particular div by class name in jQuery etc.

CSS style in class attribute of div

You can create a class in CSS that contains style for multiple div tags. You have to give it the same name as in the class attribute. The same class name will be used in CSS style section (in the head tag of HTML) or external CSS. The class in CSS is starts with a dot(.) e.g. .divclass.

The following example will show you how to style a div tag with a class attribute. We will set the div height, width, background color, border, align properties – all in one CSS class.

Источник

: The Content Division element

The HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).

Try it

As a «pure» container, the element does not inherently represent anything. Instead, it’s used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.

Attributes

This element includes the global attributes.

Note: The align attribute is obsolete; do not use it anymore. Instead, you should use CSS properties or techniques such as CSS Grid or CSS Flexbox to align and position elements on the page.

Usage notes

Accessibility concerns

The element has an implicit role of generic , and not none. This may affect certain ARIA combination declarations that expect a direct descendant element with a certain role to function properly.

Examples

A simple example

div> p> Any kind of content here. Such as <p>, <table>. You name it! p> div> 

Result

A styled example

This example creates a shadowed box by applying a style to the using CSS. Note the use of the class attribute on the to apply the style named «shadowbox» to the element.

HTML

div class="shadowbox"> p>Here's a very interesting note displayed in a lovely shadowed box.p> div> 

CSS

.shadowbox  width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); > 

Result

Technical summary

Content categories	Flow content, palpable content.
Permitted content	Flow content. Or (in WHATWG HTML): If the parent is a element: one or more elements followed by one or more elements, optionally intermixed with and elements.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content. Or (in WHATWG HTML): element.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	Any
DOM interface	HTMLDivElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML | Div Tag

The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open (

) tag and it is mandatory to close the tag. The Div is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or function in the web pages.

• Div tag is Block level tag
• It is a generic container tag
• It is used to group various tags of HTML so that sections can be created and styles can be applied to them.

As we know Div tag is block-level tag, the div tag contains entire width. Hence, every div tag will start from a new line, and not the same line.

html

As we know, div tag is used for grouping HTML elements together and to apply CSS and create web layouts using it. In the below example we don’t use div tag and hence we need to apply CSS for each tag (in the example using H1 H2 and two paragraphs p tags)

html

Creating Web Layout using Div Tag The div tag is a container tag. Inside div tag, we can put more than one HTML element and can group them together and apply CSS for them. Div tag can be used for creating a layout of web pages. In the below example we had created a web layout using the div tag. We can also create web layouts using table tag but table tags are very complex to modify the layout. The div tag is very flexible in creating web layouts and easy to modify. The below example will show grouping of HTML element using div tag and create block-wise web layout.

html

Using Div tag we can cover the gap between the heading tag and the paragraph tag. This example will display a web layout with three blocks.

We can use CSS in any of the divisions ( tag) using the following methods:

1. Using class: We can use class on that particular div and apply CSS either inside a tag or linking an external CSS file.

html

html

2. Inline CSS: We can directly use CSS in div also. This method does not require class. Div in HTML coding is used as a container tag also because it is the one that can contain all other tags.

html

Difference Between div tag and span tag

The div and span tags are two commonly used tags when creating pages using HTML and performs different functionality. While div tag is a block level element and span is an inline element The div tag creates a line break and by default creates a division between the text that comes after the tag as begun and until the tag ends with