Need some CSS styling help

[santafe]

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.

Thanks for any help provided,
Phillip

[coothead]

Hi there santafe,

in your styles.css file find this on line #712…

.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 */
  }

…and change

    color: orange;

…to this…

    color: #00f;

coothead

[santafe]

@coothead

Fair enough.

Thank you for that, but can you tell me why the styling

.margin-adjustment { color: blue;
text-transform: uppercase;
margin-left: 35%;}

does not work on that particular h4 tag?

Thank you.

[coothead]

Hi there santafe,

it’s all about CSS specificity…

1. Specifics on CSS Specificity
2. MDN - Specificity

…and lots of practice, of course.

coothead

[santafe]

@coothead

Thank you, sir! I will take a hard look at both of the links you so kindly provided.

I will report back and see if these articles will help solve this issue.

Much appreciated.

[PaulOB]

@santafe

does not work on that particular h4 tag?

Quick answer

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.

[santafe]

@PaulOB

Thanks so much for your post.

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.

Thank you for all of help.

[PaulOB]

@santafe

it worked I felt that I was ‘burning the barn to roast the pig’, so to speak

Ha ha good analogy

Yes there are very few good use cases for !important so it’s best to avoid using it 99% of the time

@santafe

I am reading all that I can to avoid having another specificity issue such as this.

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.

[santafe]

Amen!, to all that you noted.

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.

Thank you