CodeCom | CSS | How CSS Overwrites

1, CSS overwrites properties when you write a property after another. For example, if you write color: red; and on the next line color: blue, CSS will make the element's color blue not red, because blue is written after red.
Full code:

<html>
    <head>
        <style>
            .my-text {
                color: red;
                color: blue;
            }
        </style>
    </head>
    <body>
        <p class=“my-text”>Hello</p>
    </body>
</html>

2, CSS overwrites properties of the class, when we write a property with a class and id for an element, and then applies the properties of the id.
For example:

<html>
    <head>
        <style>
            #my-text-id {
                color: green;
            }
            .my-text {
                color: red;
                color: blue;
            }
        </style>
    </head>
    <body>
        <p class=“my-text” id=“my-text-id”>Hello</p>
    </body>
</html>

⭐ In this case the color will be green not blue, because of our id.

🌟 But CSS overwrites the properties when they are the same. But if there are different properties written in the class, the id doesn't care.
For eg:

<html>
    <head>
        <style>
            #my-text-id {
                color: green;
            }
            .my-text {
                color: red;
                color: blue;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <p class=“my-text” id=“my-text-id”>Hello</p>
    </body>
</html>

In this case the element will have a color of green (from the id) and a background-color of pink (from the class).

3, And beyond all the element selector comes. It overwrites id and classes.
For example:

<html>
    <head>
        <style>
            p {
                color: purple;
            }
            #my-text-id {
                color: green;
            }
            .my-text {
                color: red;
                color: blue;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <p class=“my-text” id=“my-text-id”>Hello</p>
    </body>
</html>

Now the color will be purple (from the element selector) and the background-color would be pink (from the class).