Title: Inline CSS / Specificity Last modified: January 27, 2021 --- # Inline CSS / Specificity * Resolved [aqziany](https://wordpress.org/support/users/aqziany/) * (@aqziany) * [5 years, 4 months ago](https://wordpress.org/support/topic/inline-css-specificity/) * Hello, * Thank you for your time on this! * I have a question and no real resource found on this topic. * It’s about the inline css that Kadence creates from using the Customizer. * Is there a way to move that CSS into an external file or swap the kadence-child/ style.css file under that inline css since I don’t want to use long id’s and classes and !important to overwrite the styles that are created by the theme and put them inline in the
tag. * I’ve found this: [https://www.kadencewp.com/support-forums/topic/inline-external-css/](https://www.kadencewp.com/support-forums/topic/inline-external-css/)– but my concern is mostly about how css is written then page speed… but those are 2 problems that I see regarding this. * Thank you! Viewing 4 replies - 1 through 4 (of 4 total) * [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/) * (@britner) * [5 years, 3 months ago](https://wordpress.org/support/topic/inline-css-specificity/#post-13967336) * Hey, An option to build a CSS file is something I’m considering. At the moment though there is no built-in setting for this. * You can unhook the themes customizer CSS output and either build your own or copy the HTML from the source, add it to a CSS file and then unhook the theme from building any CSS but that would cause issues if you ever make changes in the customizer. Also, there are parts of that CSS that are loaded only for specific pages so to be clear I do not suggest you do this, just trying to relay that you can. * In terms of specificity, you can change the time at which your css loads in the head, for example, move your child css lower in the head after the custom css and your child will override the customizer css. But I should be clear generally a child theme wouldn’t overide settings if you wanted to override settings you can just change the setting if that makes sense. * Is that a clear response, I’m not entirely sure what specific css you are referring to but with details I would be happy to offer some suggestions, you certainly don’t need to use !important to have your child theme css apply. * Ben * Thread Starter [aqziany](https://wordpress.org/support/users/aqziany/) * (@aqziany) * [5 years, 3 months ago](https://wordpress.org/support/topic/inline-css-specificity/#post-13969130) * Hello Ben, * Thank you for reaching out. * Since I can’t put here screenshots, please check this facebook group post: [https://www.facebook.com/groups/webcreatorcommunity/permalink/2741245539428984](https://www.facebook.com/groups/webcreatorcommunity/permalink/2741245539428984). * There you can see some details. * I’ve moved the child theme css file to be the last in the header with this: * /** * Enqueue child styles. **/ function child_enqueue_styles() { wp_enqueue_style(‘ child-theme’, get_stylesheet_directory_uri() . ‘/style.css’, array() ); } add_action(‘ wp_enqueue_scripts’, ‘child_enqueue_styles’ , 1000 ); * The problem with the inline head css styles is for example if I want to override this line: * .transparent-header .header-navigation .header-menu-container > ul > li > a * I will need to add another class, id or html tag to that line to override it or use !important. * If my css file will be the last that loads on the page or if the css will not be in the head as inline css and I can control a little those things, then it’s enough to use that line: .transparent-header .header-navigation .header-menu- container > ul > li > a * and just override what I need. * Hope I explained well. * [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/) * (@britner) * [5 years, 3 months ago](https://wordpress.org/support/topic/inline-css-specificity/#post-13973139) * Hey, Well let me try and explain why, usually if you want to override the transparent header navigation colors, font, etc you would do it from the theme customizer options. If your main theme or child theme CSS overrode it you would prevent the theme customizer options from working and that would appear like things are broken. * So hopefully that makes sense why out of the box this doesn’t work the way you want. * However you can certainly enqueue your child theme later in the head. * For example, change your function to this: * ``` /** * Enqueue child styles. **/ function child_enqueue_styles() { wp_enqueue_style( 'child-theme', get_stylesheet_directory_uri() . '/style.css', array() ); wp_print_styles( 'child-theme' ); } add_action( 'wp_head', 'child_enqueue_styles', 90 ); ``` * I hope that helps! * Ben - This reply was modified 5 years, 3 months ago by [Ben Ritner - Kadence WP](https://wordpress.org/support/users/britner/). Reason: Fix, add print styles * Thread Starter [aqziany](https://wordpress.org/support/users/aqziany/) * (@aqziany) * [5 years, 3 months ago](https://wordpress.org/support/topic/inline-css-specificity/#post-13973946) * Hello Ben, * Thank you again for your response! * There are many things that in customizer I can’t do, that’s why I need to write CSS. I solved it somehow by moving my css file later in the head, that way, I don’t have specificity problems anymore. * But it will also be a good thing for the theme to not “create” css, only in an external css. * Anyway, thank you for you time and effort. * BTW, good job on the product = Kadence! Viewing 4 replies - 1 through 4 (of 4 total) The topic ‘Inline CSS / Specificity’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/kadence/1.5.0/screenshot.png) * Kadence * [Support Threads](https://wordpress.org/support/theme/kadence/) * [Active Topics](https://wordpress.org/support/theme/kadence/active/) * [Unresolved Topics](https://wordpress.org/support/theme/kadence/unresolved/) * [Reviews](https://wordpress.org/support/theme/kadence/reviews/) ## Tags * [css inline](https://wordpress.org/support/topic-tag/css-inline/) * 4 replies * 2 participants * Last reply from: [aqziany](https://wordpress.org/support/users/aqziany/) * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/inline-css-specificity/#post-13973946) * Status: resolved