Child Theme not loading parent CSS

I’m using the MyStile theme for a new site. I’m trying to create a child theme so I can modify the theme and not have my changes overwritten, however once I activate my child theme, the whole styling seems to go from the website all together.
I’m guessing the issue here lies somewhere when it’s calling the parent style.css file.

Here’s what I have in my child theme’s style.css.

   /*
 Theme Name:   Blurred Edge Apparel
 Theme URI:    http://www.blurrededgeapparel.com
 Description:  MyStile Child Theme
 Author:       Blurred Edge Apparel
 Author URI:   http://www.blurrededgeapparel.com
 Template:     mystile
 Version:      1.0.0
*/


@import url("../mystile/style.css");

I have also copied across header.php and footer.php from the parents theme directory, however still no joy.
Am I missing something here?

Take a look at How to create a Child Theme and you’ll see that:

the previous method to enqueue the parent stylesheet was to import the parent theme stylesheet using @import: this is no longer best practice. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.

Here’s the example provided:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}