This website has ‘major’ and ‘minor’ page types that have their own unique styling. Both use the same style sheet: styles.css
My problem has to do with a new minor webpage. This is the page in question.
If you can view the page with your page inspector, take a look at lines 85 (TOOL TITLE) and 107 (Color this text blue). Both have the same styling applied to them: class=“margin-adjustment”. This styling - changing the font color, only works on the line 107 markup. I would like it to work on the h4 tag as well.
I would not be surprised if my issue has to do with the CSS cascade, but I cannot figure it out.
.minorContent h4 { font-family: 'Poppins', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.4em;
margin-left: 13.1111111%;
margin-top: 2em; /* changed from 2em */
margin-bottom: 1em; /* NEW 5 AUG 2020 */
color: orange; /* changed from orange for testing purposes */
/* Note 5AUoG20
In designing the Tool Inventory minor pages the following style causes problems.
Do not know how much ripple trouble this is going to cause.
Will know more later.
*/
7margin-bottom: -10px; /* reduce space between <h4> title and <p> elements */
text-transform: uppercase;
/* border: 3px solid rgb(169,169,169);*/ /* testing only */
}
It would need to be like this to win out in the specificity wars.
.minorContent h4.margin-adjustment {etc... }
The links @coothead posted will provide the long answer
BTW a class name of margin-adjustment is not really a good idea and your classname should not really refer to a specific css property (unless it was part of a documented set of utility classes). What happens if you want to change the padding on that element? Are you then going to add a padding-adjustment class or use the already in place margin-adjustment class? That approach very soon turns into spaghetti code.
Use class names that have a meaning for the context they are applied to. e.g. If you added a red colour to an element would you call it .red-adjustment? and if so what happens if you then decided bright orange was a better colour. It would have been better to use a class like .warning assuming that the red text was supposed to be a warning of some sort. In that way you are not tied to some specific css property and allows you to make adjustments without changing the classname.
The number of times I’ve seen people use left-column but then decided to put the column on the right Sidebar would have been a better description.
I was quite certain that my problem was a CSS cascade conflict. I tried something similar to what you suggested:
.minorContent h4.margin-adjustment {etc… }
But whatever I tried did not work.
I appreciate your advice on my class name. When I am ‘testing’ a new style I am not particularly concerned about the name that I choose at that moment. But I wholeheartedly agree with all of your logic on this matter. Thank you for that astute advice.
Last evening I used ‘!important’ to solve my issue, and while it worked I felt that I was ‘burning the barn to roast the pig’, so to speak. Total and complete overkill. I was hoping to find a more appropriate solution.
Your suggestion worked perfectly.
My issue has been solved. I am reading all that I can to avoid having another specificity issue such as this.
Yes there are very few good use cases for !important so it’s best to avoid using it 99% of the time
Yes once you understand the rules you won’t have that issue again. We all went through the same learning curve and indeed its one of the ways that you learn more when things go wrong.
You have been exremely helpful to me. I am not a ‘full time’ web coder and must keep a detailed log else I fall into the abyss of forgetfulness. This log has saved my ‘bacon’ more than once. The lesson learned from this specificity issue being an important case in point. The problems never end, but realistic and workable solutions are a welcome relief.
