As suggested by Matthew, I rebuilt my CSS file section by section and this has helped me a lot in understanding how it affects the site.
However, I still have a few questions. For the sake of clarity, I’ll consider one issue here and the others on subsequent topics.
On thing I can’t quite grasp, is the relationship between all the the__copy
statements. There are three in the main section and two more in the @media section. The last two affect the mobile view.
In the main group:
.the__copy {
font-size : 1rem;
line-height : 1.25rem;
margin-top : 10px;
padding : 25px 50px 50px 50px;
}
.the__copy > .content {
background-color : transparent;
padding : 0 0;
width : 100%;
max-width : 1440px;
text-align : justify;
}
.slug-about .the__copy {
background-color : #393939;
padding : 150px 250px 0 250px;
font-size : 1.25em;
text-align : justify;
}
What I think should occur is the two first ones relate to the general aspect of al the text on all the pages. The last one should affect the About page only.
But that .slug-about .the__copy section does almost nothing. The only setting that does anything is the background-color! This reflects any change I make, although I don’t want any.
Why can’t I set text-align to justify on the About page only?
look up “specificity” in any book or online css reference.
It could be that some of your selectors are more specific than others.
it could also have something to do with the order of the rules in your css file.
All things being equal, as far as specificity, the rule that comes last will be the one that’s applied
The CSS in Backlight is largely written to be override friendly. For example, I’ve written:
.the__copy { ...
… which is pretty weak in terms of specificity; intentionally so. A user should be able to use specificity to override that relatively easily. For example, try:
as a trial, I merged the__copy with .the__copy > .content and it seems that now, the .slug-about .the__copy is working fine and that the rest of the site is unaffected by the merge.
I don’t fully grasp the specificity of CSS, so I go trial and error, section by section until I see change. I am completely disregarding the mobile view for the moment.
The first is styling the parent div, and the second is styling its child. In most cases, you’re not going to be able to style the child by applying rules to its parent.
If you want to keep getting so deep into the weeds of customization, then I suggest you do some reading on how CSS actually works. It’s really not that difficult, and Rod has good books he can recommend.
In the meantime, you keep making the same problems for yourself over and over again, trying to implement customizations without understanding what you’re doing, and making more problems for yourself instead. Backlight is designed to prevent you having these problems unless you really go out of your way to create them, which is very much what you’re doing.
