Prevent CSS from inheriting parent CSS in a PHP script included in WordPress

0 Views

I have written a little PHP script that I have included via short-code into a WordPress page. Is it possible to only use a custom css file in the PHP script without it inheriting CSS elements from the WordPress theme?

If yes than how ?

Post Views: 0

Related posts

Leave a Reply

4 comments

  1. Any styles included after the original stylesheet will override the previous styles (as long as they are qualified to the same level).

    A better way of overriding styles would be to give your new page an ID and then in your new stylesheet you can use #NewID .cssSelectorToOverride {*new styles*}

    This is a good article that can teach you about css selectors and precedence: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

  2. Generally if the new style file is called after the previous file it will be over wridden, or else specify the style in the tag it self if its critical in some manner.

    I hope this will do, if want more assistance provide example with your work.

    thank you

  3. open function.php file inside your root directory of WordPress theme. and just insert this function PFB, just change the directory, for js you don’t need to connect a separate file because you can use footer.php and insert your js code in script tag it will work accurately.

    add_action( 'wp_enqueue_scripts', 'radliv_child_enqueue_styles' ); function radliv_child_enqueue_styles() {     wp_enqueue_style( 'custom-css-style', get_template_directory_uri() . '/inc/assets/css/custom.css' ); } ;

  4. You have to do two things:

    1. give your snippet a parent div id, say “#mySnippet”
    2. At the bottom of your css file, ad a section for #mySnippet elements. It is important to be at the bottom so it can override other properties if you must

    A custom CSS files won’t always work with wordpress because the platform requires a certain file structure, and if I’m not mistaken, all your css code has to be in style.css. This is why your snippet code has to be in style.css at the bottom (preferably well isolated from the rest with a comment line).

    Now all the elements that you need to change would simply be preceded by #mySnippet. For example, your P tags in the snippet should be targeted as such:

    #mySnippet p {
property:value;
}

    This should take care of it..