WordPress – CSS importing is not working for me

1 Views

I’m a WordPress n00b. I can’t seem to get simple CSS imported into my page.

This is my that I’ve tried:

Read More

index.php 

<link href="style.css" rel="stylesheet" type="text/css">

style.css 

/* External */
@import: url('http://fonts.googleapis.com/css?family=Varela');
@import: url('https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');

/* Internal */
@import: url('css/bootstrap.css');
@import: url('css/custom-styles.css');

I’ve also tried:

index.php: 

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css">

and this just to be double sure: 

<link href="<?php bloginfo('style.css'); ?>" rel="stylesheet" type="text/css">

I’ve done researching but I can’t find anything other than what I’ve tried above. So I appologize if this is a repeat.

EDIT:

This doesn’t work within WordPress within the index.php: 

<link href="style.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Varela" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link href="css/custom-styles.css" rel="stylesheet" type="text/css">
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. You’re doing this the wrong way for wordpress. You should be enqueing your stylesheet. THe following should go in your functions.php file. 

    function enqueue_styles() {
    wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/style.css');
}

    If you are using hard coded links as in your example, these should be added to header.php, however this is bad practice as WordPress has it’s own way to handle dependencies and conflicts.

    Check out the Codex

    Also, as already mentioned, it’s generally bad practice to use @import to load multiple style sheets. You can use enqueue to load in all these scripts, just make sure the scripts you need to have precendence are loaded last: 

        function enqueue_styles() {
 wp_enqueue_style( 'stylesheet', 'netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
 wp_enqueue_style( 'stylesheet', 'http://fonts.googleapis.com/css?family=Varela');
 wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css', array() );
 wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/style.css');
 wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/css/custom-styles.css');
    }

    And hook it like so:

    add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

  2. You should not have a colon after your import statement:

    @import url("css/bootstrap.css");

    That being said, what you are doing is typically rendered as bad practice. CSS files should never import other CSS if they can help it as it requires you to download the files synchronously:

    I download styles.css

    —->Then download bootstrap.css because it is imported.

    It is much better to import both directly in the HTML document:

    <link rel="stylesheet" href="styles.css"/>
<link rel="stylesheet" href="bootstrap.css"/>

    See this question for more info.