Difference between using custom css in the theme options and adding css to child

Can you be more specific on those snippets as that shouldn’t be an issue and I’ve not heard that over the past 12 months. Since the extensions were introduced, some of the snippets may be compromised. We fix them as we find out issues.

My advice would be to use Custom CSS to experiment and see instant results. Then when satisfied, move the code over to the child theme style sheet.

Child Theme protects your code as Czr updates are applied, though there is always a possibility that something changes as the Theme matures. (I can only remember one instance of that happening). Keep an eye on the Changelog to understand what has changed in each release.

@rdellconsulting – That was my understanding as well and that is how I usually work. Here are 2 examples of CSS that only works for me in the Custom CSS field and not in the child stylesheet:

/* slider caption background opacity */
.carousel-caption {
 background: rgba(0, 0, 0, 0.4);
}

/* slider caption background size  Up,Right,Down,Left*/
.carousel-caption {
    margin: 11%;
    padding: 3% 3% 3% 3%;
}

I just inspected your website and and ran into the following error:

Failed to load resource: the server responded with a status of 404 (Not Found):
https://mcasien.com/wp-content/themes/Customizer-child/www/wp/wp-content/themes/customizr/style.css

That’s why your css doesn’t apply. Remove line 13 from your child theme’s style.css:

@import url('www/wp/wp-content/themes/customizr/style.css');

Apart from other themes, Customizr already loads the parent theme css, so you don’t need to load it yourself. Besides, the proper path for that would be:

@import url('../customizr/style.css');

@acub Oo Thanks!

I don’t think that line 13 was the issue. Removed it and the snippet still didn’t work and https://mcasien.com/wp-content/themes/Customizer-child/www/wp/wp-content/themes/customizr/style.css still doesn’t load.
https://mcasien.com/wp-content/themes/Customizer-child/style.css does however.
Moving the snippet to the end of all the other snippets (that always worked) in the stylesheet made it work. I suppose this means that there is a conflict in my snippets.

It means one thing: somewhere in your snippets you have a selector of exact same specificity. If you add the same rule multiple times, with different values the last value always gets applied.
If you make your selector more specific (more powerful):

.item .carousel-caption {
    margin: 11%;
    padding: 3% 3% 3% 3%;
}

it will apply even if you place it before the

.carousel-caption {/* whatever */};

from the rest of the snippets.

@acub great, that clears it up, thanks ??
Then I suppose that the answer to my original question would be that the custom CSS from the customizr gets applied after the stylesheet, thus explaining why the snippet worked from there?

Yes, that’s correct. Custom CSS has highest specificity