some of css stylesheet is not loading

Question

My CSS stylesheet loads almost all the contents but it is not loading my CSS for button . It's strange because all other things are working fine. I use opera . I have posted the CSS below which is not loading, also how I load the CSS.

<link rel="stylesheet" type="text/css" href="/style.css">

    .button {
        background-color: #22a4a3b5;
        border: none;
        color: white;
        padding: 4px 14px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 17px;
        margin: 0px 2px;
        cursor: pointer;
    }

JS fiddle https://jsfiddle.net/hpsj2e0L/

It works fine in the fiddle but not in my site.

Answer 1

make sure you put your css in style tag or in css file

<style>
.button, button {
    background-color: #22a4a3b5;
    border: none;
    color: white;
    padding: 4px 14px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
    margin: 0px 2px;
    cursor: pointer;
}

</style>

also check if you have .button class in your html or maybe its button tag

Answer 2

The problem with your code is that you are writing CSS inside your HTML file without wrapping it into a <style> tag. Like this:

    <style>
        .button, button {
            background-color: #22a4a3b5;
            border: none;
            color: white;
            padding: 4px 14px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 17px;
            margin: 0px 2px;
            cursor: pointer;
    }
    </style>

also, you don't need both selectors if you are applying the style to a <button> you can just use button . .button is only necessary if you are going to apply it as a class like in <div class="button"></div>

Answer 3

Check other style files to button class. Try give the different class name or load your style file later than others.