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.ess.
The corporate.ess file contains the style rule that must be used for .newsItem.
You must use the corporate.ess file to ensure that the webpage changes when the brand changes.
You must add additional style rules to the webpage.
You cannot modify the corporate.ess 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.ess file to include! important for each rule 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 class with 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.
Somehow I have a feeling that this was a very simple question, however reading it (over and over) did not help me understand at all what was being asked here. Besides the fact that it’s all riddled with typos, what brand changes? What’s the construction <div class=”new” Item”> supposed to resemble? And if you can’t change the corporate.ess file (ess, really?), then why offer us option B at all.
I think tecnically A and D are correct, but I would go with D.
I think the correct is A. We cannot make important for each rule because of this sentence “You must use the corporate.ess file to ensure that the webpage changes when the brand changes.”.
I think this bloke is right.
However: where is the new style placed? Before or after the included css file? I think after. Than this goes:
“Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:
Content
This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.
CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.
If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.
So, if you had styles like this:
.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.”
http://stackoverflow.com/questions/12258596/class-overrule-when-two-classes-assigned-to-one-div