Adding custom css to default style.css (Underscores _S Wordpress theme)?

Question

I'm currently building a custom theme on top of the _S Underscores Wordpress theme. One of the things I immediately did was remove all the content in the style.css file, as I want to create my own styling (largely using Bootstrap).

However, I can't seem to get certain attributes in the style.css to make changes to the html. For example, I'm trying to set the following <h1> tag to red. But it will not change.

<h1 id="testOfContent">Test</h1>

CSS (in the style.css file provided by Underscores):

#testOfContent {
    color: red;
}

However, the font remains black. How do you manipulate a wordpress theme (especially _S Underscores which is meant to be customizable) to use your own css? Any ideas as to why it won't register my own CSS?

Here's my functions.php file and how I'm loading the script:

function tlas_css() {
    // Enqueue bootstrap css
    wp_register_style('bootstrap-css', get_template_directory_uri() . '/bootstrap-3.3.4/css/bootstrap.min.css');
    wp_enqueue_style('bootstrap-css');

    // Enqueue custom stylesheet
    wp_enqueue_style( 'tlas-custom-style', get_template_directory_uri() . '/css/tlas.css' );
    wp_enqueue_style( 'tlas-style', get_template_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'tlas_css' );

Answer 1

You can try this one:

   add_action( 'wp_enqueue_scripts', 'yourstyle' );
    function yourstyle() {
      wp_enqueue_style( 'yourstyle', get_template_directory_uri() . '/css/yourstyle.css', array(), PARENT_THEME_VERSION );
    }

Answer 2

The workflow I prefer to customize and add to the css for the _s theme is by editing the .scss Sass files. Be sure to select the Advanced Options so you can tick the _sassify! check box if using the _s theme Generator at https://underscores.me/#generator

Then you can import the Bootstrap Sass you want since Bootstrap 4 is written with Sass. If you prefer using Bootstrap 3, you can find it's Sass ports as well.

If you're not sure how to build the Sass, I put together a Webpack 4 development workflow for the Sassify option included with the underscores Wordpress starter theme. Hope this helps https://jimfrenette.com/2018/08/completely-blank-no-css-_s-wordpress-starter-theme/

Answer 3

If you are working with Chrome, try to clear cache (ctrl+F5).
Or Open Dev tools > settings > preferences > network > disable cache (when dev tool is open)

Answer 4

You should use wp_enqueue_style( 'your-style', get_stylesheet_uri() ); which retrieves the URI of the current theme stylesheet.

Read more on codex.wordpress.org