CODEWITHSUNDEEP
css
user3789200
user3789200

Reputation: 1186

CSS rules are not working

Hi I'm trying to learn css. But for my page , the used styles are not working. Here below shows the script I used. Can some one please let me know the issue that I had made.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>

<style type="text/css">

    button{

        .big{
            font-size:8px;
        }


        .small{
            font-size:8px;
        }

        #green{
            color:green;
        }       

    }

</style>

</head>

<body>
<button class="big">Button 1</button>
<button id="green" class="small">Button 2</button>
</body>
</html>

Upvotes: 0

Views: 48

Answers (4)

LearnHey
LearnHey

Reputation: 31

You can remove the button in the style tag. Also remove the corresponding parentheses. So you should be left with the below code in the style tag.

    .big{
        font-size:8px;
    }


    .small{
        font-size:8px;
    }

    #green{
        color:green;
    }

Upvotes: 1

Rafiqul Islam
Rafiqul Islam

Reputation: 961

Try This:

      .big{
         font-size:8px;
       }
        .small{
            font-size:8px;
        }

        #green{
            color:green;
        }  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
</head>
<body>
<button class="big">Button 1</button>
<button id="green" class="small">Button 2</button>
</body>
</html>

Upvotes: 0

Ehsan
Ehsan

Reputation: 12951

Try this:

.big, .small {
    font-size:8px;
}

#green{
     color:green;
}
<button class="big">Button 1</button>
<button id="green" class="small">Button 2</button>

Upvotes: 2

Chandrasekhar Raman
Chandrasekhar Raman

Reputation: 696

You have enclosed the whole CSS in the button { } which is not required and is not the proper syntax. Remove the outer button { } from your CSS. Hope it helps

Upvotes: 1

Related Questions