/* element selector score=1 */

p {
    color: red;
    font-size: 50px;
}

/*font-size never changes because we don't overwrite it*/

/* element selector score also =1, but closer to the tag (closer to the HTML since CSS goes top to bottom) */

p {
    color: blue;
}


/* 2 elements - score =2 */

div p {
    color: green;
}

/* class - score = 10 */

.myclass {
    color: cyan;
}

/* element + class - score = 11 */

div .myclass {
    color: blueviolet;
}

/*id - score = 100 */

#myid {
    color: green;
}

/*who wins?*/
/* score = 101* */
div #myid {
    color: pink;
}

/*who wins?*/
/* score = 102 */
body div #myid {
    color: blue;
}

/*score = 113*/
body div #myid::first-line {
    color: brown;
}

/* What if we add a style to the tag itself? (Means inside the HTML) */
/* score = 1000 */

/*There is another! */
/*wins over everything else even over styles in HTML, still uses closer to HTML as the tiebreaker*/
p {
    color: darkmagenta !important;
}