Create a div css

How To Use a , the HTML Content Division Element

The HTML Content Division element ( ) acts as a container to structure a webpage into separate components for individual styling. This tutorial will teach you how to create and style containers on your webpage.

On its own, the element has little effect on the layout of the page and is usually given attributes to adjust its size, color, position, or other features. Typically, developers style elements with CSS, but this tutorial will give you an understanding of how elements work by styling them directly in an HTML document.

The element is styled with the HTML style attribute. As demonstrated in the example below, a element can contain multiple style properties:

div style=”property: value; property: value;”>div> 

Notice that the element has opening and closing tags but does not require any content. To understand how the element works in practice, clear your index.html file and paste the code below inside. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.

div style="width:300px;height:200px; background-color:red;"> div> 

Save the file and reload it in the browser. (For instructions on loading the file in your browser, see our tutorial here.) You should receive a red box with a width of 300 pixels and a height of 200 pixels like this:

You can also add content to a element by adding content in between the opening and closing tags. Try adding text in between your tags like so:

div style="width:300px;height:300px; background-color:red;"> This is text inside a div. div> 

Save the file and reload it in the browser. You should receive something like this:

You can also put containers inside containers. Try adding a yellow container inside the red container like so:

div style="width:300px;height:300px; background-color:red;"> div style="width:100px;height:100px; background-color:yellow;"> div> div> 

Save the file and reload it in the browser. You should receive something like this:

Note that elements are block-level elements and will start on their own line and push subsequent elements down to the next line. Try adding another element to your file to understand how it is pushed down to the next line (even though there appears to be enough space for it to fit next to the second element:

div style="width:300px;height:300px;background-color:red;"> div style="width:100px;height:100px; background-color:yellow;"> div> div> div style="width:100px;height:100px; background-color:blue;"> div> 

Save the file and reload it in the browser. You should receive something like this:

You should now have a basic understanding of how elements work. We will return to elements when we begin building our website in the third section of this tutorial series.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Tutorial Series: How To Build a Website with HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

Источник

HTML Div – What is a Div Tag and How to Style it with CSS

Kolade Chris

The HTML division tag, called «div» for short, is a special element that lets you group similar sets of content together on a web page. You can use it as a generic container for associating similar content.

The div tag is one of the most used tags and doesn’t seem to be going anywhere despite the introduction of semantic elements (these elements let you use several tags as a container).

In this tutorial, I will show you the various things you can do with the div tag, how you can use multiple divs the same HTML file without getting confused, and how to style it.

When to Use the div Tag

The div tag is multi-purpose – you can use it to do several things on a web page. You’ll mostly use it in web layouts and CSS art, but it’s super flexible.

Ultimately, you’ll almost always to use it to style whatever it contains or manipulate such things with JavaScript.

1. Use div in Web Layouts

You’ll primarily use the div tag to group similar content together so you can style it easily. A great example of this is using div to group different sections of a webpage together. You can put together the header, nav, sections, and footer of a page in an individual div tag so they can be styled together.

Later in this tutorial, I will take you through how to make a web layout with multiple div tags without getting confused.

Div itself does not have a direct effect on the presentation of the content unless you style it.

2. Use div in CSS Art

With the div tag, you can make various shapes and draw anything because it is easy to style.

To make a square with div tag, you first need to define an empty div tag and attach a class attribute to it in the HTML. In the CSS, select the div with the class attribute, then set an equal height and width for it.

You can make a circle with the div tag by coding an empty div in the HTML, setting an equal height and width for it in the CSS, then a border-radius of 50%.

Making the Nigerian flag with the div tag is not that hard. The flag is a rectangular shape with the colors green, white, and green.

To make it, define 3 div tags and attach different classes, then style them appropriately in the CSS.

.naija-flag < display: flex; >.first-green < height: 100px; width: 60px; background-color: green; >.white < height: 100px; width: 60px; background-color: white; >.second-green

How to Style the div Tag

As we discussed above, the div tag is very easy to style. It’s one of the reasons why many developers use it to group similar content.

The div tag accepts almost all CSS properties without a problem. Let’s look at a few examples of that now.

1. How to Apply Font Properties with div

You can apply the CSS properties such as font-size , font-family , font-weight , and font-style on content grouped together with the div tag:

 
 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
 
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam eaque rem dicta, quos quas ipsum.
 
 

2. How to Apply Color with the Div Tag

You can apply the CSS color and background-color properties on content grouped together with the div tag:

 
 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
 
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam eaque rem dicta, quos quas ipsum.
 
 

3. How to Style Texts with the Div Tag

You can apply the CSS text-transform and text-decoration properties on a div tag like this:

 
 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
 
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsam eaque rem dicta, quos quas ipsum.
 
 

4. How to Create a Shadow Effect with the Div Tag

You can create a shadow effect with the div tag with the box-shadow property:

 
 
Before paying to learn programming, checkout freeCodeCamp.org 
The HTML, CSS, and JavaScript curricula would take you from zero to hero in web development.
 
There is a Python curriculum that will get you a considerable knowledge in Python 
And an upcoming Data Science curriculum.
 
 

What’s happening in the CSS above?

I was able to create the shadow effect with the CSS box-shadow property.

• The first value (2px) represents the offset on the x-axis (offset-x)
• The second (another 2px) represents the offset on the y-axis (offset-y)
• The next 20px is for the blur-radius, that is, how blurry you want the shadow to be.
• The 23px value is the spread radius (how far you want the shadow to spread)
• The last value is the shadow color – in this case, #7fecad.

The output looks like this:

How to Use Multiple Div Elements without Getting Confused

Div tags are commonly used to group similar content together. In older and even some newer web pages, you’ll find divs all around, despite the fact that semantic tags are recommended for accessibility and better SEO.

Since div tags are still very common, I recommend applying class and id attributes to them so you can manipulate individual div elements with those attributes.

I will walk you through how to put this into practice by making a basic web layout.

The first section you’ll want to make is the header, containing the logo and navbar:

Before styling the navbar, I made some CSS resets to make things align correctly and display nicely:

* < margin: 0; padding: 0; box-sizing: border-box; >.hero, .about, .services, .contact

In the code snippet above:

• I removed the default margin and padding
• I set a maximum width for the main sections so they don’t go all across for better UX
• I set a margin at the bottom of each section to give them some space
• I set a margin 0 at the top and bottom, auto on the left and right to center them.

To style the navbar appropriately, I will grab the container div tag with its class attribute, header . I’ll give it a display of flex , alongside some other properties to lay it out nicely. I will also grab the div wrapped around the navbar ( ul element) by its class and lay it out with Flexbox.

For the remaining sections apart from the footer, the HTML and stylings are generic:

 
Hero Section
 
 
About Us
 
 
Our Services
 
 
Contact Us
 
 
© 2021 All Rights Reserved
 
 

.hero < background-color: #eee; height: 200px; >.hero h1 < display: flex; align-items: center; justify-content: center; line-height: 6; >.about < background-color: #eee; height: 200px; >.about h1 < display: flex; align-items: center; justify-content: center; line-height: 6; >.services < background-color: #eee; height: 200px; >.services h1 < display: flex; align-items: center; justify-content: center; line-height: 6; >.contact < background-color: #eee; height: 200px; >.contact h1 < display: flex; align-items: center; justify-content: center; line-height: 6; >.footer < background-color: #777; height: 40px; >.footer p

I gave the individual sections a greyish background color and a height of 200px. I positioned the h1 tags inside in their centers with Flexbox and applied a line height of 1.5 to each of them.

Finally, I gave the footer a deeper grey background color to make it distinct, and centered the content in it with a line height of 1.7.

The resulting layout looks like this:

Conclusion

The HTML div tag is commonly used among web developers everywhere.

Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. This is because semantic tags are better for accessibility and SEO.

In short, the div tag remains useful and isn’t going anywhere anytime soon, so feel free to use it when necessary.

Thank you for reading and have a nice time.

Источник