CSS - container Property

Quiz

The container Property

CSS container property is a shorthand property for container-name and container-type. The container property defines an element as a container for container queries. Using container property, styles can be applied based on the container's size rather than based on the size of the viewport.

Syntax

The syntax for the CSS container property is as follows:

container: container-name / container-type;

Property Values

Property	Description
container-name	It specifies a name for the container. It assigns a name to the container which can be later used in container queries.
container-type	It specifies the dimension or size for which the container queries will be activated.

Defining a Container for Responsive Components

The container property is used to make a particular container responsive based on the container's size rather than making the entire page responsive.

Example

In this example, we have used the container property to make a container named container responsive. The text and background color of the text inside the container change based on the screen sizes.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS container Property</title>
    <style>
        .container {
            container: abcd / inline-size;
            width: 60%;
            margin: auto;
            padding: 20px;
            border: 1px solid #031926;
        }
        .card {            
            padding: 20px;
            background-color: #04af2f;
            text-align: center;
            font-family: Verdana, sans-serif;
            font-size: 16px;
        }

        @container (max-width: 450px) {
            .card {
                background-color: #031926;
                font-size: 18px;
                color: white;
            }
        }        
    </style>
</head>

<body>
    <h2>CSS container Property</h2>
    <div class="container">
        <div class="card">
            Resize the window to see style changes.
        </div>
    </div>
</body>

</html>

Naming a Container for Query Targeting

The name can be specified with container property to target the specific container in the container query.

Example

In this example, we have assigned a name to the container and used this to target it in the container query.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS container Property</title>
    <style>
        .container {
            container: example / inline-size;
            width: 50%;
            border: 1px solid #031926;
            padding: 20px;
            margin: auto;
        }
        .box {
            padding: 10px;
            background-color: red;
            font-size: 16px;
            color: white;
            text-align: center;
        }
        @container example (max-width: 450px) {
            .box {
                background-color: greenyellow;
                font-size: 12px;
                font-family: Verdana, sans-serif;
                color: black;
            }
        }
    </style>
</head>
<body>
    <h2>Naming a Container for Query Targeting</h2>
    <div class="container">
        <div class="box">
            This content changes on small container widths.
        </div>
    </div>
</body>
</html>

Using Both Container Name and Type

The container property can be used with both of its values i.e. container-name and container-type to target any container.

Example

In this example, we have defined a container with both a name and a type. The type value used here is size which allows to style the container based on width as well as height.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS container Property</title>
    <style>
        .container {
            container: example / size;
            width: 300px;
            height: 200px;
            border: 2px solid #031926;
            display: flex;
            align-items: center;
            justify-content: center;
            resize: both;
            overflow: auto;
        }
        .box {
            padding: 20px;
            background-color: rgb(232, 164, 225);
            font-size: 16px;
            text-align: center;
        }
        @container example (min-width: 400px) {
            .box {
                background-color: #d17c14;
                color: white;
            }
        }
        @container example (min-height: 300px) {
            .box {
                background-color: #04af2f;
                color: white;
            }
        }
    </style>
</head>

<body>
    <h2>CSS container Property</h2>
    <div class="container">
        <div class="box">Resize Me</div>
    </div>

</body>

</html>

Supported Browsers

Property
container	105	105	110	16	91

Print Page