Learn CSS Variables by Building a City Skyline - Step 10

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

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

  <body>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

  </body>
</html>

/* 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/122.0.6261.70 Safari/537.36 WebCatalogPhoton/43.1.1

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 10

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Hi!
Please try explaining your issue, even if you struggle. And please do not make duplicate topics.

Here you need to a class attribute set to .bb1 . Example: <p class="blue">
And then in your CSS add a .bb1 selector, with a width set to 10% and your height set to 70%
Example, I am setting, my width to 35% and height to 40% in my .blue :

.blue{
width:35%;
height:40%;
}
3 Likes
4

how to use “.bb1” selector to style the element step 10 city skyline

5

Hello @bmalapane750 !

I am not sure if you have been able to move on from this question.

Here is an example of how you previously used the .background-buildings selector in the CSS files (accessed above the instruction in the step).

The .bb1 selector would have the same syntax, but with the information provided in the instructions, instead of the quote which is only for reference on how you were successful before using this code.

I think the fact that we need to access the CSS above the instructions may be a bit of confusion for many of us, at first.

Smooth coding!

1 Like
6

these are two questions, nest a div with a class bb1 in the background building container, open your style .css file and give .bb1selector a width of10% height 70%

1 Like
7

Hello @bmalapane750 !

First it is asking us to nest (place between the opening and closing tags of the background buildings)
<div class="background-buildings"> place in here the new div with the class of bb1 </div>

Then, we need to access the CSS at the top of the instructions to create the .bb1 selector and make the changes.

I hope this helps clarify it for you better.

1 Like
8

where do I access the .bb1 before or after div

9

Good going @bmalapane750 !

I am happy to see that you were able to resolve the questions with @zuhameer6 helping you.

Smooth coding!

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.