HTML class not available in CSS

Curriculum Help
1

Hi,

I’m learning HTML and CSS.
My problem here is that he latest HTML classes I made can’t be found in CSS. All other classes work just fine.
The classes that I can’t find in CSS are “center-column” ; “links-wrapper” and “right-column”.

The HTML-code is as follows:

        <div class="center-column">
            <div class="links-wrapper">              
                <div class="banner-image">
                    <img src="images/logos/decamp-fantastic-fries-logo-white.png" alt="Logo">
                <div class="nav-link">
                    <a href="index.html">Home</a>
                </div>

                <div class="nav-link">
                    <a href="about.html">About</a>
                </div>

                <div class="nav-link">
                    <a href="menu.html">Menu</a>
                </div>
                
                <div class="nav-link">
                    <a href="contact.html">Contact</a>
                </div> 
                </div>
            </div>
        </div>

        <div class="right-column">
            <div class="adress-wrapper">
                <i class="fa fa-map-marker"></i>

                123 Any street
                Scottsdale, AZ, 85251
            </div>
        </div>

So, I can type it in CSS, but it is flagged as a problem code and it doesn’t work.
Visual Studio Code normally gives autocomplete suggestions while typing. But the suggestions for those 3 class items don’t appear in CSS.

Does anybody have an idea of what goes wrong?

2

Hi there!
Welcome to the FCC forum.Please post your CSS code here also.
@jensvl92

3

It’s currently not implemented in CSS anymore. But I will quickly apply it in the way I want and then copy paste the code here.

4

Okay, now it suddenly does work. CSS finds the code without problems now.
Only a very weird thing. It doesn’t find “nav-link” anymore.
So now it finds the other 3 things perfectly fine, but doesn’t find nav-link, which it found without a problem before.

.center-column > .links-wrapper > .nav-link {
    font-family: "Ubuntu Condensed", sans-serif;
    font-size: small;
    color: blue;
}
5

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Share your full CSS please

6

Thank you, I will do that next time

7

Full CSS code below

/* common styles */
body{
    margin: 0px;
    font-family: "Roboto", sans-serif;
}
/* Common nav styles */
.navigation-wrapper {
    height: 190px;
    background-color: #11122b;
    color: #cbcbcb;
    /* Flexbox container */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 100px;

}

.navigation-wrapper > .left-column{
    display: flex;
    align-items: center;
}

.navigation-wrapper > .left-column > .icon {
    margin-right: 15px;
}

.navigation-wrapper > .left-column > .icon i {
    font-size: 2em;
}

.navigation-wrapper > .left-column > .contact-hours-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}

.navigation-wrapper > .left-column > .contact-hours-wrapper > .hours {
    font-family: "Ubuntu Condensed", sans-serif;
    font-size: x-small;
}

.center-column > .links-wrapper > .nav-link {
    font-family: "Ubuntu Condensed", sans-serif;
    font-size: small;
    color: blue;
}

.adress-wrapper {
    display: flex;
    font-family: "Ubuntu Condensed", sans-serif;
    font-size: small;
}

.banner-image img {
    width: 216px;
    height: 100%;
}

.right-column {
 color: blue;
}
8

Thanks, backticks are these symbols ( ``` )

9

Ah sorry, used the wrong ones

10

Well, also please share your full HTML

11

Full HTML below

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Homepage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.googleapis.com">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <div class="navigation-wrapper">

        <div class="left-column">
            <div class="icon">
                <i class="fa fa-phone"></i>
            </div>

            <div class="contact-hours-wrapper">
                <div class="phone">
                    555 555 5555
                </div>
                <div class="hours">
                    10 AM - MIDNIGHT
                </div>
            </div>
        </div>

        <!-- link wrapper -->
        <div class="center-column">
            <div class="links-wrapper">              
                <div class="banner-image">
                    <img src="images/logos/decamp-fantastic-fries-logo-white.png" alt="Logo">
                <div class="nav-link">
                    <a href="index.html">Home</a>
                </div>

                <div class="nav-link">
                    <a href="about.html">About</a>
                </div>

                <div class="nav-link">
                    <a href="menu.html">Menu</a>
                </div>
                
                <div class="nav-link">
                    <a href="contact.html">Contact</a>
                </div> 
                </div>
            </div>
        </div>

        <div class="right-column">
            <div class="adress-wrapper">
                <i class="fa fa-map-marker"></i>

                123 Any street
                Scottsdale, AZ, 85251
            </div>
        </div>
        
    </div>
</body>
</html>
12

Well, your .nav-link elements are not a direct descendants of .links-wrapper.
Change this line
.center-column > .links-wrapper > .nav-link
to
.nav-link and it will work.

And this is not a good idea at all to use such constructions to access your HTML.
What’s the reason behind it?
You have div element with nav-link class, so use .nav-link and so on.
This will prevent similar problems and your CSS will be readable.

13

I do it because I’m following an online course and the person who made that course said that you might want to style different nav links on different pages in a different way.
He wants to show what to do when you deal with a very complex website.

But thank you for your answer.
I will change it to .nav-link.

Just one question, I thought it was a direct descendant of .links-wrapper.
What am I interpreting wrong?

14

You have this structure:

<div class="links-wrapper">              
  <div class="banner-image">
    <div class="nav-link">

nav-link is a child of banner-image, not links-wrapper

You can learn about combinators more here:

15

Thank you for your answer. Now I see it indeed.

Thanks for the link, I’ll check it out.

16

first, make sure that your css slector is specific enough to target the elements you wnat to style. if there are other css rules that have higher specificity or are being applied later in your stylesheet, they might override your styles.
secondly, make sure that the “Ubuntu Condensed” font is correctly installed on your system or is being loaded from a remote source. if the font is not available, the browser will use a fallback font, which might not match your expextations.
@jensvl92

17

or sometimes, changes to your css file may not be reflacted immediatly due to browser caching. try clearing your browser cache or using a hard refresh (Ctrl + F5 or Cmd + Shift + R) to ensure that you are seeing the latest version of your styles.