Learn CSS Variables by Building a City Skyline - Step 10

Tell us what’s happening:

I’m not sure how to sepearate these two. Basically I know I can’t combine them but how do I separate them so that it runs the code. Or am i misunderstanding this code?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">    
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />


<!-- User Editable Region -->

    <div class="background-buildings"><div class="bb1"></div></div>

<!-- User Editable Region -->

/* file: styles.css */
* {
  border: 1px solid black;
  box-sizing: border-box;

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;

.background-buildings {
  width: 100%;
  height: 100%;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 10

You need to add the styles in your styles.css file. It is shown on the top of your page.
You can style an element with their tag name or class name or id.
Here you need to style your divs with their class name.
An example would look like this:
In your index.html file
<div class="mydiv"></div>

And in your styles.css file
.mydiv{ Width: 100%; }

 <div class="background-buildings"></div><div class="bb1"></div>

    .mydiv{ Width: 100%; 
I still got an error. What did I do wrong?

Remove this line of code from here and add it in your styles.css file. You have two files and one of them is for styles. You can open the styles.css file by clicking a button with that name on top of your editor.
Also " .div " was an example and you shouldnt add that. You should add ".background-buildings " or “.bb1” according to what the instructions say.

1 Like