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

Question

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}

Answer 1 · 2015-05-09T17:05:26Z

May 9, 2015 5:05pm

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.

Answer 2 · 2015-05-09T17:07:16Z

May 9, 2015 5:07pm

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

Answer 3 · 2015-05-09T17:11:03Z

May 9, 2015 5:11pm

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

Welcome to the Treehouse Community

Looking to learn something new?

israelmaykut

israelmaykut

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

3 Answers

Herb Bresnan

Herb Bresnan

Ryan Field

Ryan Field

Felix Yakubov

Felix Yakubov