Multiple Buttons Problem

I play with various buttons. Here is my Codepen snippet.

Everything works here, but when I use the same code locally, the color property on the .btn–primary doesn’t get applied. When I open inspector, I see that both color properties are striked-through.

I can’t find what’s causing the problem. I don’t see any specificity issue.

That’s the code we need to see as the code you posted does not exhibit this problem even when copied locally:).

It could a typo in the html or css, the code in wrong order or you have linked to other css files on the page.

It will be impossible for us to guess unless we see the exact same code as you are looking at.

1 Like

I published my CSS practices here: http://pixelinspired.com/lab/html/styleguide.html The buttons section is the last one.

If you looked further up the web inspector you would see that your rule for a:link is winning out. When you use :link and visited: to style anchors then you need to use the same when you over-ride them with classes.

e.g.
.btn:link{color:red}
1 Like

That removal of :link fixed it.

Just by wanting to go by the book as per the W3 Schools advices, I run intro trouble, while in the past I’ve always used only a, and never a:link.

In spite of your present difficulties, following the W3C’s guidelines is the preferred way to go.

Properties that apply to all "a"s regardless of their state, such as padding, can be applied to the anchor tag alone without a pseudo-class.

Properties that are changed by the “a” element’s pseudo-classes,:visited, :hover, :focus, :active) should be applied to the “a:link” tag and to the tag with the pseudo-class that changes it. These properties may include color, underline, border, background-color or anything that is changed by the pseudo-classes. The pseudo-classes establish the semantic relationship of the events.

1 Like

FYI, the link that you posted points to W3 Schools, not to the W3Consortium. W3Schools is a private business and is not related to the W3C.

1 Like

Thanks for pointing that out. Fixed it.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.