title: Customize CSS styling in a Jekyll template
body: <p>I'm using Jekyll for the first time to build a portfolio site. I had no trouble with customizing the HTML but when I follow instructions on customizing the CSS, the changes I make are not applied after I do <code>bundle exec jekyll serve</code>. Here's what I've tried following instructions from this <a href="https://help.github.com/articles/customizing-css-and-html-in-your-jekyll-theme/" rel="nofollow noreferrer">github help link</a>:
  I created a CSS file (assets/css/style.css) and at the top of it I put this block of code:</p>
  
  <pre><code>--- 
  ---
  @import "{{ site.theme }};
  
  /* sample code to test it */
  
  .button {
  background-color: red;
  }
  </code></pre>
  
  <p>Then, in the head.html file, I made sure to link this newly created stylesheet by adding this:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="{{- 'assets/css/style.css' | relative_url -}}" /&gt;
  &lt;link rel="stylesheet" href="{{- 'assets/css/main.css' | relative_url -}}" /&gt;
  </code></pre>
  
  <p>Note that the main.css is the original CSS file  that comes with the template.
  Afterward, when I refresh the page, the button has not changed. I'd appreciate any tips on what I should be doing differently. Thanks </p>