How to Use Custom Css to Personalize Your Github Pages Theme

by

GitHub Pages is a popular platform for hosting static websites directly from your GitHub repository. One of its great features is the ability to customize the appearance of your site using custom CSS. This allows you to personalize your theme and make your website unique.

Why Use Custom CSS on GitHub Pages?

Using custom CSS gives you full control over the look and feel of your website. You can change colors, fonts, layout, and add special effects that are not available through default themes. This helps your site stand out and better reflect your personal or brand identity.

Steps to Add Custom CSS

Follow these simple steps to add your own CSS to a GitHub Pages site:

  • Create a CSS file: Write your custom styles in a new file, for example, styles.css.
  • Upload the CSS file: Add the CSS file to your repository, ideally in a dedicated folder like assets.
  • Link the CSS file in your HTML: Edit your site’s _layouts or _includes files, or if using Jekyll, add a link tag in the _config.yml or directly in your HTML head.
  • Commit and push: Save your changes, commit, and push to GitHub. Your site will automatically update with the new styles.

Example: Adding Custom CSS

Suppose you want to change the background color and font style of your site. Here’s a simple example:

styles.css

body {

  background-color: #f0f0f0;

  font-family: ‘Arial’, sans-serif;

}

Then, link this CSS file in your index.html or equivalent layout file:

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

Tips for Effective Customization

Here are some tips to help you get the most out of custom CSS:

  • Use developer tools in your browser to inspect elements and identify CSS selectors.
  • Start with small changes and preview frequently to see how they affect your site.
  • Organize your CSS with comments and consistent formatting for easier maintenance.
  • Test your styles on different devices and screen sizes for responsiveness.

Conclusion

Adding custom CSS to your GitHub Pages site is a powerful way to personalize your web presence. With a little practice, you can create a unique and professional-looking website that truly reflects your style and interests.