why css is not applied?

Question

here's html in which the 4 elements (two inputs two labels) are being indent to the right by applying class="tmIndent".

<html>
    <head>
   
    </head>
    <style>
        div{
            background-color: burlywood;
        }

        .tmIndent{
            position: relative;
            left: 30px;
        }

        
    </style>
    
    <body>
        <div>
        <input type="text" id="txtInput" class="tmIndent" name="txtInput">
        <label for="txtInput" class="tmIndent">txt label</label><br>
        <input type="checkbox" name="cb" id="cb" class="tmIndent">
        <label for="cb" class="tmIndent">CheckBox label</label>
        </div>
    </body>
</html>

As this this part of Google side bar, the google css package is imported as well, using link tag within the head . When doing so the checkbox "loses" its indentation.

<html>
    <head>
   <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    </head>
    <style>
        div{
            background-color: burlywood;
        }

        .tmIndent{
            position: relative;
            left: 30px;
        }

        /* #cb{
            position: relative;
            left: 30px;
        } */
    </style>

    <body>
        <div>
        <input type="text" id="txtInput" class="tmIndent" name="txtInput">
        <label for="txtInput" class="tmIndent">txt label</label><br>
        <input type="checkbox" name="cb" id="cb" class="tmIndent">
        <label for="cb" class="tmIndent">CheckBox label</label>
        </div>
    </body>
</html>

applying additional css selector by check box ID, just below the tmIndent holding solves this.

<html>
    <head>
   <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    </head>
    <style>
        div{
            background-color: burlywood;
        }

        .tmIdent{
            position: relative;
            left: 30px;
        }

        /* check box id css */
        #cb{
            position: relative;
            left: 30px;
        }
    </style>

    <body>
        <div>
        <input type="text" id="txtInput" class="tmIdent" name="txtInput">
        <label for="txtInput" class="tmIdent">txt label</label><br>
        <input type="checkbox" name="cb" id="cb" class="tmIdent">
        <label for="cb" class="tmIdent">CheckBox label</label>
        </div>
    </body>
</html>

Don't have much exprience with web dev, but what I do learn from that is that class selector has lower priority than what I would call "more general selectors" e.g. input type="checkbox" that are probably used with in the external css source (google's in this case).

Is that true? And if yes, what is the way (if any) to applied global settings for elements without class, and without defining css by id for all relevant elements

why css is not applied?

0 Answers0