JavaScript CSS Selectors Quickstart CSS Selector Basics Attribute Selectors Challenge

Renato Guimaraes Nunes
Renato Guimaraes Nunes
Full Stack JavaScript Techdegree Graduate 18,781 Points

Not sure why it doesn't work.

Am I doing something wrong here? My code looks right...

style.css
/* Complete the challenge by writing CSS below */
img[title="avatar"] {
    border-radius: 50%;
};

input[type="password"] {
    color: #CCC
};
index.html
<!DOCTYPE html>
<html>
<head>
    <title>Attribute Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <form class="form-contact">
        <img src="avatar.png" title="avatar" alt="user">

          <label for="un">Username:</label> 
          <input type="text" id="un">

        <label for="pw">Password:</label>
            <input type="password" id="pw">

          <input type="submit" value="Sign up">
            <input type="reset" value="Reset">
        </form>
    </div>
</body>
</html>

3 Answers

Steven Parker
Steven Parker
207,988 Points

The semicolon that is there after the closing brace of the previous rule is not correct syntax and is causing the issue. It should be removed (and the one after the new rule).

Also, it is a "best practice" to place a semicolon at the end of a property/value line; but it's not technically necessary if it's the last one in the rule.

You're right. I missed the last semicolon. Feeling goofy.

semicolon at the end?

/* Complete the challenge by writing CSS below */

img[title="avatar"] {

border-radius: 50%; }

input[type="password"] {

color: #ccc; }