CSS styling keeps telling me I am wrong:


#1

Can someone please help. I have copied code, but this is the message I keep getting: Oops, try again. Set the color of the p element inside <div class="jumbotron">..</div> to #fff . Thanks.

.nav a {
    color: #5a5a5a;
    font-size: 11px;
    font-weight: bold;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase
}

.jumbotron {
    background-image: url('https://goo.gl/04j7Nn');
    height: 500px;

.h1 {
    color: #fff;
    font-size: 48px;
    font-weight: bold;
}

.jumbotron p {
    color: #fff;
    font-size: 20px;
}

#2

Hello!

Are you sure that in your HTML there's nothing between the jumbotron div and the p tag?
Also, try refreshing the page. Sometimes it doesn't compute. (ctrl c first).
It should be working indeed...


#3

It seems an odd error message for this problem, but that selector is not right. You only prefix a selector with a . if it is a class name, not an element. h1 is an element so no .

That leaves us with

h1 {

but you only want the h1 elements that are in the jumbotron div. jumbotron is a class name so now you can use a .

Like this

.jumbotron h1 {

See if that fixes the problem.


#4

Thanks for all the suggestions. I have logged out, cleared browser history, re-typed it in each of the suggested ways. Unfortunately, the computer is still giving me the same error. I then found out that I could look at the next page and found the following, so I copied and pasted to see what would happen, and it is also giving the same error message. For a so-called beginner's level example, it really is quite a problem.

.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase
}
.jumbotron {
background-image: url('https://goo.gl/04j7Nn');
height: 500px;
.p {
color: #fff;
font-size: 20px;
}


#5

Your .jumbotron { ... is missing its closing curly brace.

That is nor a valid selector, for the same reasons as I explained earlier when you tried to use .h1 as a selector.


#6

Thanks, but it is not clear where the curly brace is meant to go. The instructions of code academy does not make it clear, and the answer you have provided is all well and good for someone who is experienced in coding - not for an absolute beginner. It is almost the equivalent of telling someone learning the English alphabet for the first time that "m" is somewhere in the middle. It is partly accurate, but not useful.

Second, to say that ".p {" is not valid is also fairly unhelpful. I have copied below the direct answer that code academy shows for the next page - and guess what - it uses exactly what you say is wrong. So, although I appreciate feedback and suggestions, it does not make sense when the developers of the course say one thing and you are saying something else.

.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase
}
.jumbotron {
background-image: url('https://goo.gl/04j7Nn');
height: 500px;
.p {
color: #fff;
font-size: 20px;
.jumbotron h1 {
font-family: 'Shift', sans-serif;
}


#7

Let's start with that part. Every CSS rule must look like this:

selector {  // a selector and an opening brace
    // one or more property/values here
} // a closing brace

Your jumbotron rule, this one here:

.jumbotron {
background-image: url('https://goo.gl/04j7Nn');
height: 500px;

is missing a closing }. It should be added at the end, after the height: 500px; line.

Now, let's look at this next concern.

I can't find where in the exercises that it is suggesting that we should use .p as a selector. Could you give me a link so that can be reported as a bug. Thanks!