Container class css declaration doesn't work even with !important rule

I try to better understand how CSS works. I have the following code:

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Creative Inc.</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>

    <header>
        <img src="img/logo.png" alt="Creative inc. logo" class="logo">
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section class="home-hero">
        <div class="contaier">
            <h1 class="title">Making things looks great
                <span>for companies who make great stuff</span>
            </h1>
            <a href="" class="button button-accent">See Our Work</a>
        </div>
    </section>


    <div class="container">
        <section class="home-about">

            <div class="home-about-textbox">
                <h1>Who we are</h1>
                <p>Sit by the fire drink water out of the faucet hide head under banket so no one can see cat is love, cat is life.Knock dish off table eating always hungry so favor packaging over toy.</p>
                <p>
                    <srong>Rub face on owner.</srong>Peer out window, chatter at birds, lure then to mouth. Chase ball of string eat a plant, kill a hand, i am the best have secret plans.
                </p>
            </div>
        </section>
    </div>
    </body>
</html>

CSS

@import
    url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700;900&display=swap" rel="stylesheet');

* {
    box-sizing: border-box;
}

    
    body {
        margin: 0;
        font-family: 'Raleway' , sans-serif;
        text-align: center;
        }

img {
    max-width: 100%;
    height: auto;
}


.container {
    width: 95%;
    max-width: 70em;
    margin: 0 auto;
}



/* typography
================== */
h1 {
    font-weight: 300;
    font-size: 1.7rem;
    margin-top: 0;
}

p {
   margin-top: 0; 
    line-height: 1.5;
}

p:last-of-type {
    margin-bottom: 0;
}

.title {
    font-size: 2.5em;
    margin-top: 1em;
    margin-bottom: 1.5em;
    font-weight: 900;
}


.title span {
    font-weight: 300;
    display: block;
    font-size: .9em;
}


@media(min-width:60rem) {
    p {
        font-size: 1.2rem;
        line-height: 1.6;
    }
    .title {
        font-size: 3.7em;
    margin-bottom: 1em;
        margin-top: 0;
    font-weight: 900;
        }  
}


/* buttons */

.button {
    display: inline-block;
    font-size: 1.15em;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 2px;
    border-style: solid;
    padding: .5em 1.75em;
    color: #00ff6c;
    border-color: #00ff6c;
}

@media (min-width: 60rem) {
    .button {
        font-size: 1.5rem;
    }

.button-small {
    font-size: .7rem;
    font-weight: 700;
}
.button-accent {
    color: #00ff6c;
    border-color: #00ff6c;
}


.button-accent:hover,
.button-accent:focus {
    background: #00ff6c;
    color: #232323;

     
}


}


/* header
================== */


header{
 position: absolute; 
    margin-top: 1em;
    left: 0;
    right: 0;
    margin: 1em;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li{
    display: inline-block;
    margin: 1em;
    
}

nav a {
    font-weight: 900;
    text-decoration: none;
    padding: .5em;
    text-transform: uppercase;
    color: #FFF;
    font-size: .8rem;
    
}

nav a: hover , 
nav a: focus {
    color: #DDD;
}


@media(min-width:60rem) {
    .logo {
        float: left;
    }
    
    nav {
        float: right;
    }
}






/* home-hero
================== */


.home-hero {
    background-image: url(img/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    padding: 10em 0;
    color: #FFF;
}

@media (min-width: 60rem) {
    .home-hero {
        height: 100vh;
        padding-top: 35vh;
    }
}


/* hero-home
======================== */

.home-about-textbox {
    background-color: #232323;
    padding: 4em;
    margin: 0 -2.5vw; 
    outline: 2px solid #00ff6c;
    outline-offset: -2.5em;
    color: #FFF;
    position: relative;
}




.home-about-textbox h1 {
    color: #00ff6c;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: .75em;
    background: #232323;
    padding: 0 .145em;
    white-space: nowrap;
    
}

.container {
    width: 95%;
    max-width: 70em;
    margin: 0 auto;
    background-color: mediumvioletred;
    color: magenta;
    
}

@media (min-width: 25rem) {
    h1 {
        font-size: 2 rem; 
    }
    
    .home-about-textbox h1 {
       top: .6em; 
        padding: 0 .325em;
    }
}

    
    
    @media (min-width: 60rem) {
    h1 {
        font-size: 2.5rem;  
    }
        
        .home-about {
            background-image: url(img/who-we-are.jpg);
            background-repeat: no-repeat;
            padding-bottom: 10em;
            
        }
        
.home-about-textbox {
    width: 50%;
    padding: 7em;
    outline-offset: -3.75em;
    margin-left: -2.5%;
    top: -5em;
    text-align: left;
    box-shadow: 0 0 4em 0 rgba(0,0,0,.3);
    
}
        
        
    
    .home-about-textbox h1 {
       top: .75em; 
        left: 6rem;
        position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: .75em;
    background: #232323;
    padding: 0 .145em;

    }
}



.container {
    width: 95%;
    max-width: 70em;
    margin: 0 auto;
    background-color: mediumvioletred; !important
    color: magenta; !important
    
}






/* portofolio
=================== */

Here, the home-about-textbox is defined in three different ways with the class attribute :

  `<div class="container">
  <section class="home-about"> for pc media
<div class="home-about-textbox">`for mobile media

But the container also selects the “home-hero” section: <section class="home-hero"> <div class="contaier"> .

I tried to figure out what is the role of the container. When I select the .container in the css style sheet just the “home-about-textbox” becomes blue on the browser so I tried to change color of the container to see if this class truly selects both of the sections( “home-hero” & “home-about-textbox”) how it seems to be.

I selected the container again at the end of the code to make sure that nothing else overrides it (the last media declaration is closed) and I styled with crazy colors but nothing change. I even tried !important rule and the style is the same. My question is:

What exactly this container class selects in the code and why I can’t style it?

For starters there is a typo on line 25:

Which is why your styling for this section is not working.


As for the home-about and home-about-textbox:

I believe the reason the the styling does not apply to them, is because the <div class="div"> has no visable elements that are part of it. For example it contains no text, and only its grandchildren do.

As such, using something like:

.container {
  color: red;
}

does not do anything because there is nothing to style red.
However if you are more specific, such as with:

.container p{
  color: red;
}

You will select all <p> elements inside of elements with class="container", and the text becomes red.

I believe the reason the the styling does not apply to them, is because the <div class="div"> has no visable elements that are part of it. For example it contains no text, and only its grandchildren do.

If you set the size for the div and set a background color with an explicit width and height it will show even if the div is empty.

@8-bit-gaming I say this because I like playing with the empty boxes :rofl: :rofl:

1 Like

Hello! Also have a look at the media query. It looks like it might be missing something. Here’s an article on media queries.

2 Likes

The typo was a big part of the problem , thank you. But now I got into the situation where the container applies the colors just to the home-hero and the font-weight just to the home-about. Please, have a look here, where I also added a code snippet : https://stackoverflow.com/questions/62996004/container-applies-properties-preferentially-to-sections .