Learn Intermediate CSS by Building a Cat Painting - Step 8

HTML-CSS
1

directions are to " To see the cat-head element, give it a linear gradient background with #5e5e5e at 85% and #45454f at 100% ." I’m not sure where my issue is.

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fCC Cat Painting</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
      <div class="cat-head"></div>
    </main>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  background-color: #c9d2fc;
}


/* User Editable Region */

.cat-head {
  width: 205px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 46%;
background: linear-gradient (#5e5e5e 85%, #45454f 100%);
}

/* User Editable Region */
2

linear-gradient 与 小括号之间不能有空格，应该这样写
Mod edit: removed

1 Like
3

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

3 Likes
4

I’ll give it to you as a series of hints to see if you can figure it out yourself.

Hint 1

You have made a small but important formatting error

Hint 2

Check where you have put your spaces.

Hint 3

From CSS Tricks css-basics-syntax-matters-syntax-doesnt:

You can’t put spaces in properties, function names, or anywhere you name things. Adding spaces in those situations effectively changes the names, breaking them.

Graphic from CSS Tricks
Graphic from CSS Tricks501×630 45.7 KB

MDN gives the syntax spec if you search for “CSS Functions”

The value syntax starts with the name of the function, followed by a left parenthesis (. Next up are the argument(s), and the function is finished off with a closing parenthesis ).

Hint 4 (i.e. the answer)

In CSS everything after the first character in the function name right up to the opening bracket for the function’s parameters is considered part of the function name, including any spaces.

You have put a space between linear-gradient and its proceeding brackets (containing the parameters). Therefore the function the CSS is “looking” for is "linear-gradient ", i.e. including the space at the end:

  1. "linear-gradient" != "linear-gradient " so if it did exist, you’d end up using the wrong function
  2. "linear-gradient " cannot exist because CSS does not allow any whitespace in function names!

So this is incorrect either way and therefore the browser ignores the background style rule.
It’s a simple fix, just remove that space and everything should work fine:
Mod edit: removed

PS: For future reference, it would have been useful if you described fully what you expected to happen and contrasted it with what actually happened when you tried to solve this particular problem.

2 Likes
5

@andrewsherman

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. I have removed the answer from your post

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

6

Hello!

Suggestion: Check the spacing. I do not think that functions () should not have a space prior to the parenthesis.

Keep up the good progress.

7

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