
In CSS, a **container** is a child element's parent element. It helps with formatting and positioning. CSS containers are used to group content that has the same font color, background color, font size, font family, and other characteristics. This is used to add 16px padding to the element's left and right sides. 


# Containers provide equality

The CSS container ensures equality for all HTML container elements:

- Commonly used margins
- Common paddings
- Alignments that are commonly used
- Fonts that are commonly used
- Colors that are commonly used

# How to use a container?
To use a container, we need to add a `w3-container` class to any element.


<div> 
  <h2>Without a Container</h2>
  <p>The w3-container class is not present here</p>

</div>
<div class="w3-container">
  <h2> Container Class </h2>
  <p>The w3-container class is present here</p>
</div>


The `w3-container` class gives HTML element `<p>`  a `16px` left and right padding.

To add color to the container, we can add `w3-container w3-color name` such as: 

<div class="w3-container w3-purple">
  <p>Islamabad is the capital of pakistan</p>
</div>


# Significance
Elements will be able to target their own parents and apply their own styles due to container queries. This means that depending on the size and dynamics of the element, it could appear radically different in the sidebar or body.
Container elements in HTML5 are as follows:

- `<div>`: The container for HTML content that can be used in a variety of ways.

- `<header>`: The header section is represented by this variable.

- `<footer>`: The footer section is denoted by this tag.

- `<article>`: A type of object that represents a piece of writing.

- `<section>`: A general container for a variety of section kinds.

All containers mentioned above can be styled with CSS's w3-container primary class. Other CSS container classes, such as `w3-border`, `w3-red`, `w3-teal`, and `w3-padding-32` can be used to add additional stylistic features to the containers.

# Limitations
We can't use height-based container queries with simply the block axis. We'll need a wrapper element to make grid children function with `@container`. Adding a wrapper, however, allows us to achieve the desired results.


What is the CSS @container property?

Containers provide equality

How to use a container?

Significance

Limitations