Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Including CSS stylesheets in Jekyll pages

Tags:

html

css

jekyll

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.

like image 812
gabed123 Avatar asked Sep 22 '15 17:09

gabed123


People also ask

Where do I put css in Jekyll?

Using CSS, JS, images and other assets is straightforward with Jekyll. Place them in your site folder and they'll copy across to the built site. Jekyll sites often use this structure to keep assets organized: .

Can you use css in markdown?

Markdown does not support CSS styles. Since Markdown converts to HTML, Any valid HTML works. CSS styles are added with inline or style tags in HTML.

How do I include all css files in HTML?

CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.

Can you use the same css file for multiple pages?

Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file.


2 Answers

The Jekyll way to do this is to take whichever layout you are going to use for the final page (for example _layouts/posts.html) and create your HTML document skeleton there (i.e. html, head, and body tags). In the head of the layout HTML, put {% include blog-head.html %}. This blog-head.html file is where we are going to include all of the CSS, JS, etc. that is required for every blog page.

Then in your blog-head.html, you can just write the CSS file include for a custom CSS file:

<link rel="stylesheet" href="blogposts.css"> 

This way, you can easily include the same head section in all of your blog post pages, and you can easily update that head section (adding, removing, or changing CSS/JS) and it will automatically take effect across all of your blog posts.

The following link provides general steps on overriding theme defaults: Jekyll: Overriding Theme Defaults. The page provides instructions for getting a copy of the html base layout file (from your theme) that you will need to modify with the new CSS link.

Please follow up if you would like me to clarify anything!

like image 164
Maximillian Laumeister Avatar answered Oct 23 '22 23:10

Maximillian Laumeister


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 
like image 21
Kayce Basques Avatar answered Oct 23 '22 22:10

Kayce Basques