Note that there are some explanatory texts on larger screens.

plurals
  1. POHow Are These Styles Cascading?
    primarykey
    data
    text
    <p>Problem is viewable at this link. <a href="http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForward.html" rel="nofollow">http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForward.html</a></p> <p>The three boxes need to have green backgrounds, but another style is taking precedence. I thought styles were supposed to take precedence based on where they appear in the style sheets, with styles lower in the style sheet cascading (taking precedence) over styles higher in the style sheet. I guess that is wrong, because the style sheet for the background colors of those boxes is here:</p> <pre><code> #maincontent .col { background: #ccc; background: rgba(204, 204, 204, 0.85); } #callout1 { background-color: #00B300; text-align:center; } #callout2 { background-color: #00CC00; text-align:center; } #callout3 { background-color: #00E600; text-align:center; } </code></pre> <p>When the style for "#maincontent .col" is removed, the green shows up (link)<a href="http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForwardGreen.html" rel="nofollow">http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForwardGreen.html</a>, but I thought the green should show up because it is after the gray color specified higher up.</p> <p>I am finding a way to get what I need, but it would really make it a lot easier if I understood why the backgrounds are gray, instead of green.</p> <p>Any assistance would be extremely much appreciated. Thank you.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload