Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Layout box-sizing and max-width

Muhammad Mehdi
seal-mask
.a{fill-rule:evenodd;}techdegree
Muhammad Mehdi
Front End Web Development Techdegree Student 1,117 Points

Max wieght

Can we use universe selector for max-width? Just as we did with box-sizing. I was wondering if it is a good practice.

For example

*{ box-sizing : border-box; max-width: 900px; }

3 Answers

Steven Parker
Steven Parker
231,275 Points

The universal selector can be used with any property, but it's generally not considered a good practice to use it to set properties to specific values.

The property box-sizing doesn't establish any specific value, it just determines how measurements are made.

To constrain the width of the page, you could just apply that restriction to the body element, it wouldn't need to be applied to every element within it.

Mathieu St-Vincent
Mathieu St-Vincent
9,244 Points

No, you should assign a max-width to a class, along with the other properties relevant to your container and give that class to every containers your site has.

.container {
    max-width: 900px;
    margin: auto;
    background-color: #1f1653;
}
<section id="sectionName">
    <div class="container">
        <p>My parent has a max width of 900px and is centered !</p>
    </div>
</section>

<section id="anotherSection">
    <div class="container">
        <p>My parent also has a max width of 900px and is centered !</p>
    </div>
</section>
Muhammad Mehdi
seal-mask
.a{fill-rule:evenodd;}techdegree
Muhammad Mehdi
Front End Web Development Techdegree Student 1,117 Points

Thank you, Steven Parker for your reply but I think you got my question wrong. Let me rephrase my question.

Generally, it is considered a good practice to use the universal selector as little as possible. So, let us say, I am developing a website that containers 10 or 20 pages. Is it a good practice to use the max-width property in the universal selector so that the max-width does not exceed the set value for any of my pages?

Thanks

Steven Parker
Steven Parker
231,275 Points

I did understand the question that way. Also, I added a suggestion to my answer.