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 Layout Techniques Display Modes Display Modes Challenge

Posted by israelmaykut
israelmaykut
8,730 Points

.col class does not exist in html yet calling it works in css

I guess i can not show both the html and the css code at the same time in this post. However in this CSS Layout Techniques Challenge Task 4 of 5, there is no class "col" yet the solution in css is to call .col and set it to display inline-block. How is this possible?

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Display Modes</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-wrapper">  
        <header class="main-header">
            <h1 class="main-logo"><a href="#">My Work</a></h1>
            <ul class="main-nav">
                <li><a href="#">Design</a></li>
                <li><a href="#">Coding</a></li>
                <li><a href="#">Writing</a></li>
                <li><a href="#">Hire Me!</a></li>
            </ul>
        </header>
        <div class="primary col">
            <h1>I'm a Front-end Designer</h1>
            <p>I design beautiful user interfaces, then bring them to life with HTML, CSS, and JavaScript. I love including personal photographs of nature, people and everyday things in my designs.</p>
            <p>If you need a front-end designer for your next project, <a href="#">take a look at my work</a>, then <a href="#">get in touch</a>!</p>
        </div>
        <div class="secondary col">
            <h2>I Also Write</h2>
            <p>I like teaching others about the latest in web technology. So when I'm not designing or coding websites &amp; apps, you'll find me writing <a href="#">articles for my blog</a>.</p>
        </div>
    </div>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */

.main-header{padding-right:5px;padding-bottom: 5px;padding-top: 5px;padding-left: 5px}
.main-logo,.main-nav,.main-nav li{display: inline-block}
.col {display: inline-block}

3 Answers

Herb Bresnan
Herb Bresnan
10,658 Points
Herb Bresnan
Herb Bresnan
10,658 Points

Hi Israel, You actually have 2 .col classes. First is Primary, the other is Secondary. The class attribute allows you to use it several times in your code. In this case, it allows you to call on Primary and Secondary at the same time. If you wanted to be more specific and just call on Primary, you would then call as .primary col.

Remember that classes can be used multiple times throughout the same file. ID, however, can only be used once.

Hope this helped you.

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, Israel. There are actually two divs with the class col underneath the nav menu.

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

While I was searching for the challenge someone answered you huh =)