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

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

What is HTML Div tag?

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.

Difference between block and inline element

As you can see, the div takes available width while <a> tag which is an inline element will take only the required space. You can change this behavior by using CSS display property.

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

Example of div style for setting font size and color

div background color example

div border example

Div with class attribute example

Div center align example

A Short Video about 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.

<div style=””>div content</div>

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.

Experience this online

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.

HTML div tag

Experience this online

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.

Experience this online

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.

Experience this online

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.

HTML div widht height

Experience this online

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.

HTML div padding margin

Experience this online

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.

Experience this online

In the demo, we just included class name class=divclass and it assigned all CSS style to the div element. As mentioned earlier, if you have more div sections in your web page and want to apply the same style to those div tags then use classes. If you plan to use in only single div then use ID attribute in the div tag and in the CSS as well.

What is div id?

The id is also an attribute of the div tag. It also acts as an identifier in the HTML document. You can use IDs in CSS or also may refer div by id in jQuery etc.

The div with ID attribute and CSS example

We will use the same code as created for the above div class example. However, we will refer ID by # (hash) sign followed by the ID name.

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

Experience this online

Difference between class and id

While both class and id can do the same things, then what’s the difference? You should use id attribute in the div if it is occurring only once in the document. You should use the classes for multiple occurrences with the same properties.

The div alignment examples

Before HTML5, align property was supported to let you align text etc. to the left, right, center or bottom. However, this is deprecated from HTML5. Then how to align the text or image in div or other elements?

We can do it in the CSS by using text-align property. See examples below for setting the alignment.

A div with CSS center align example

The following example shows how to align a div centered with CSS. In order to make the text of div align center, you can use the text-align property of CSS.

HTML div center align

Experience this online

You can see by using the text-align property, the div is aligned centrally and horizontally.

How to align div aligning right example

The example below aligns the div text to the right.

Experience this online

Div float example with floating left

The example below shows how to use the CSS float property in the div element of HTML. The floating value used in the div is left. You can float both the text and images. This example shows how to float the text.

HTML div float

Experience this online

To understand more about float property of CSS visit float chapter.