Styling text within <div>

Question

I've tried searching to find anything relevant, but I'm not sure if I am overlooking correct answers because I'm new to HTML or CSS, or if it hasn't been asked before.

I'm trying to develop my own website with the intention of having it split down the middle. I've gotten so far as to having;

.wrap {
  width: 100%;
  overflow: auo;
}

.fleft {
  float: left;
  width: 40%;
  background: gray;
  height: 100vh;
}

.fright {
  float: right;
  width: 60%;
  height: 100vh;
}

.fleft {
  float: left;
  width: 40%;
  background: gray;
  height: 100vh;
  h1 {
    color: green;
  }
}

<div class="wrap">
  <div class="fleft">
  </div>
  <div class="fright">
  </div>
</div>

But whenever I got to specify the color of the h1, h3, etc. tags I keep getting an error. IE;

With either a "colon expected" error or a "unknown property". Do I have to specify those colors outside of the .fleft and if I do, how do I change the color of the headings within the two themselves?

Answer 1

It appears your CSS has a syntax issue (and a typo, but that's not the problem).

The issue: if you're using plain CSS, you can't nest rules like:

.fleft {
  float:left; 
  width: 40%;
  background: gray;
  height: 100vh;   

  h1 {
    color: green;
  }   
}

with the h1 is nested in the .fleft.

If you're using Sass or Less this would be acceptable, and perhaps that's the case, but you didn't mention that in the question.

To fix this you'll need to use a child selector, like:

.fleft {
  float:left; 
  width: 40%;
  background: gray;
  height: 100vh;      
}

.fleft h1,
.fright h1 {
  color: green;
}

where .fleft h1 and .fright h1 will select all h1 tags within the .fleft and .fright classes.

Also, you have a typo in one of the values.

.wrap {
  width: 100%;
  overflow: auo; // should be auto
}

Answer 2

You have h1 style definition specified wrong... try this:

.fleft h1 {
  color: green;
}

.fright h1 {
  color: red;
}

Full example at this fiddle