Bugl — Daily coding puzzles and drills

Look at the following examples:

Formula

Here, we have specified a red color for < p > elements.

p {color: red;}

</style> </head> <body>

Formula

< p > Hello World!</p >

</body> </html> Now, look at next example:

Here, we have added a class selector (named "test"), and specified a green color for this class.

The text will be green, because the class selector has higher specificity: <html> <head>

<style>.test {color: green;}
p {color: red;}

</style> </head> <body> <p class="test">Hello World!</p> </body> </html> Now, look at next example:

Here, we have added the id selector (named "demo").

The text will be blue, because the id selector has higher specificity: <html> <head> <style>

#demo {color: blue;}.test {color: green;}
p {color: red;}

</style> </head> <body> <p id="demo" class="test">Hello World!</p> </body> </html> Now, look at next example:

Formula

Here, we have added an inline style for the < p > element.

The text will be pink, because the inline style has the highest specificity: <html> <head> <style>

#demo {color: blue;}.test {color: green;}
p {color: red;}

</style> </head> <body> <p id="demo" class="test"

style="color: pink;">Hello World!</p>

</body> </html>