You develop an HTML5 webpage with custom CSS. You have the following HTML markup:
<
div class=-new- Item-
>
…
<
/div
>
You have the following requirements:
In addition to your CSS, you must use a corporate branded stylesheet named corporate.css.
The corporate.css file contains the style rule that must be used for .newsItem.
You must use the corporate.cssfile to ensure that the webpage changes when the brand changes.
You must add additional style rules to the webpage.
You cannot modify the corporate.css file.
You need to apply the appropriate CSS rules to meet the requirements.
What should you do?
A. Add a CSS class named .newsItemUpdates to the webpage, add only the new styles to this class, and update the class attribute of the HTML markup:
<
div class=nnewsltem newsItemUpdates-
>
..,
<
/div
>
B. Update the corporate.css file to include! important for eachrule for the .newsItem. class, and add the new CSS rules to the webpage by using the CSS class .newsItem.
C. Add a CSS class named .newsitemUpdates to the webpage, add the new styles to this class, and update the HTML markup to replace the .newsItem classwith this new class:
<
div class*-newsItemOpdates-
>
…
<
/div
>
D. Add the new CSS rules to the webpage by using the CSS class .newsItem, and add! important to each rule.
Explanation:
CSS attempts to create a balance of power between author and user style sheets. By default, rules in an authors style sheet override those in a users style sheet.
However, for balance, an -!important- declaration (the delimiter token -!- and keyword -important- follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain -!important- declarations, and user -!important- rules override author -!important- rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts,color combinations, etc.) control over presentation.
Reference: Assigning property values, Cascading, and Inheritance, !important rules