Skip to main content
Practice

Styling the Carousel Container

Let's decorate the container holding the carousel and the carousel slides using CSS.


Example Code​

Container HTML
<section id="memory" class="container">
    <div class="content-text">
        <h2>Memories</h2>
        <p>These are my treasured memories</p>
        ...
    </div>
</section>
Container CSS
.container {
    max-width: var(--width-medium);
    margin: 0 auto;
    padding: 16px 32px;
}

.content-text {
    text-align: center;
    margin: 24px 0;
}

.content-text h2 {
    transition: 0.2s ease-in-out;
}

.content-text p {
    padding: 8px;
    margin: 0 auto;
    max-width: 700px;
}

The container uses the max-width property to limit the maximum expansion of the width to the value of the --width-medium variable.

The margin: auto property automatically adds margins to the left and right, centering the container. The padding property adds spaces between the container's content and its border.

Inside the container, the <div> element uses the content-text class. This class centers the text using the text-align property and adds a 24px margin above and below the text using the margin property.

The <p> tag uses padding: 8px; to add an 8px space between the text and the border, and margin: 0 auto; to automatically add margins to the left and right, centering the text.

Finally, the max-width property limits the maximum width of the <p> tag to 700px.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.