'Including CSS stylesheets in Jekyll pages

I have been playing around with Jekyll for a couple of weeks now and I am trying to create a default style for each of my blog posts, but I'm not exactly sure where and how it's supposed to be done. My main index page works fine in terms of styling but my posts have no CSS being passed to them whatsoever despite trying various methods.

Is the CSS for blog posts supposed to be written in _layouts/default.html or _layouts/posts.html, and do I have to specify which stylesheets I want to use in the YAML, by using {% include ...%}, or by writing 

{% if page.style %}
    <link rel="stylesheet" href="{{ page.style }}">
{% endif %}

I wasn't able to find information that gave a clear cut answer.

htmlcssjekyll


Solution 1:[1]

When I want a quick and dirty way to add some CSS into a post, I'll just add a <style> tag in the body of my post. 

---
layout: post
title: "quick and dirty CSS in jekyll posts"
date: 2016-04-08 13:04:00
---

<style type="text/css">
  p {
    border: 1px solid black;
  }
</style>

whoa this paragraph has a border around it, such magic

Solution 2:[2]

You can get really crazy with includes and no doubt the code ends up looking well factored and cool. However, productivity can take a hit. Especially initially, when you may be doing most of your work with a 'Live Preview' tool like Brackets.io. Early on you may not be ready to start your 'jekyll serve' workflow pattern. I suspect part of your issue is not including the 'baseurl' config parameter.

A happy medium solution that works for me is to conditionally include header links.

{% if site.baseurl %}
  {% include links.html %}
{% else %}
  <link rel="stylesheet" href="/solarized-dark.css">
  <link rel="stylesheet" href="/site.css">
{% endif %}

This handles all workflows: live preview, jekyll server and production.

If you are testing locally with jekyll you can pass an empty baseurl parameter.

jekyll serve --baseurl ''

http://jekyllrb.com/docs/github-pages/#project-page-url-structure

Solution 3:[3]

Simple solution is create in your _includes/a head.html (will replace the head that you use in your index c:) file that includes the import from your css. So you can include it anywhere, but you must put the ../css/main.css, the key here are the 2 dots.

<link rel="stylesheet" href="../css/main.css">

Now it works. At least it solves the 404 non-style error and the url like myUrl:4000/categories.

Hope it helps you :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kayce Basques
Solution 2 Christopher Markus
Solution 3 Kartanus

Related Questions