Background: All of us must be aware that CSS styling are applied by the browser as and when they are read by the browser, hence the ‘C’ for Cascading in CSS. Now when we define a style for an element in say head tag of your page, and then provide the same style as inline while defining the element, we know that the styling done as inline would override the styling done in head tag. See the snippet below:
<head runat="server">
<title>Precedence Test</title>
<style type="text/css">
p{ color:green;}
</style>
</head>
<body>
<p style="color:Red;">Which color do I render in?</p>
</body>
Yes, you know the answer, its Red color.
Problem: Now here is a situation, I always want to ensure that the content inside p tag is rendered in green color and must not consider any other styling related to color. Can this be done? Why / How?
Solution: Yes, there is a way to override the default precedence. See the below code snippet
<head runat="server">
<title>Precedence Test</title>
<style type="text/css">
p{ color:green !Important;}
</style>
</head>
<body>
<p style="color:Red;">Which color do I render in?</p>
</body>
This time the text renders in Green color. The “!Important” attribute makes sure that this style always has precedence against its counterparts.
Test your understanding: Guess the Color of the rendered text?
<head runat="server">
<title>Precedence Test</title>
<style type="text/css">
p{ color:green !Important;}
</style>
</head>
<body>
<p style="color:Red !Important;">Which color do I render in?</p>
</body>
Thanks & Regards,
Arun Manglick
SMTS || Microsoft Technology Practice || Bridgestone - Tyre Link || Persistent Systems || 3023-6258
DISCLAIMER ========== This e-mail may contain privileged and confidential information which is the property of Persistent Systems Pvt. Ltd. It is intended only for the use of the individual or entity to which it is addressed. If you are not the intended recipient, you are not authorized to read, retain, copy, print, distribute or use this message. If you have received this communication in error, please notify the sender and delete all copies of this message. Persistent Systems Pvt. Ltd. does not accept any liability for virus infected mails.
No comments:
Post a Comment