Stuck with Enqueue Styles for multiple css files in a child theme

by

The following code in your functions.php should load first the parent and than the child CSS file. What it actually does: Loading the parent style sheet and then it will load your child style sheet and at last it will load your form.css.
You must keep style.css in your child theme else WordPress will not recognize it as it!

As already mentioned by yourself the child style.css will/should overwrite the parent style.css when made changes in the style-sheet.
By creating a child-theme we keep the parent-theme as it is and when it needs to be upgraded (only the parent theme will be upgraded in that case) all your changes made in the child-theme will still exist.

Keep in mind that such is also for other theme files. (e.g. changes which you want to make in the single.php you should make in a child-theme file,by copying the original single.php from the parent theme into your child themefolder. And there you make those changes.)

Take a look here for detailed explanations.

Note: Please make always a backup before you edit/add some in a file.

Updated after comment from OP
(because I am blind and not reading complete question)

function wpse220011_theme_enqueue_styles() {

    $parent_style="parent-style";

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) );
    // Load extra styling for Form pages
    if( is_page( 'form' ) ) {
        wp_enqueue_style( 'form-style', get_stylesheet_directory_uri() . 'style-form.css', array() );
    }
    // Load extra styling for single posts
    if( is_single() ) {
        wp_enqueue_style( 'single-post-style', get_stylesheet_directory_uri() . 'style-single.css', array() );
    }

}
add_action( 'wp_enqueue_scripts', 'wpse220011_theme_enqueue_styles' );

Above is just an example!

  • Realize that the extra style sheets as used in the code are loading
    on top of the existing style.css so it is extra code.
  • Or you have to copy from the style.css file, code which you want to
    change/hide and make in that (lets say as used in example)
    style-form.css your changes.
  • You can use display: none; which will display as if the element is
    not there at all, or visibility: hidden; however, the element will
    still take up the same space as before.

I did not add if( is_page( 'home') because your example shows that it is using the (basic) styles.css already so why loading it again?!