Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by William J. Terrell
William J. Terrell
17,403 Points

Over-riding Inline Styles for Print

Our applications developer has built a system using C#, which writes to the browser. The purpose of this portal is to show the status of campus visitors. It shows a table, and if the visitor's status is "pending", a yellow background is applied to the row containing that visitor's information:

<tr style="background-color:Yellow;">

This is fine for viewing in the browser, but our Admissions reps would like to be able to print out physical copies, and I'm assuming that the printers they have are black and white (at least the most used ones are at least).

I thought I might be able to over-ride the styles like this:

tr[style="background-color:Yellow;"] {
  background-color: darkgrey !important;
}

but it doesn't seem to be working (and I also know that it is typically considered poor practice to use "!important", as it can cause "I'm more important!", "No, I am!", "No, Me!" issues down the line).

Is there a certain "override" keyword or something that I am missing? Or will it even be possible to over-ride it, since it's a style defined at the page level?

Any assistance would be appreciated. Guil Hernandez , feel free to offer your expert insight as well :) (Enjoying the Bootstrap course, by the way. Wish I had found it earlier!)

Thanks!

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

You're right, or at least close. It does work, as long as the CSS attribute selector is exactly the same as the html attribute, caps and all.

Is the rule in an @media print { } query?

Check out this demo: http://codepen.io/kevink/pen/MwMzrw

William J. Terrell
William J. Terrell
17,403 Points

I have the general print styles defined in an @print, and they seem to be applying just fine.

I tried that, though:

@media print {
            tr[style="background-color:Yellow;"] {
            background-color: darkgrey !important;
        }
        }

And it doesn't seem to have applied the style.

At the same time, I'm only using Print Preview right now, so I can't completely say for sure (although I assume it should apply in the Preview, correct?).

Thanks!