Custom CSS

Now comes the section that is really fun. We get to make our site feel the way we want. We get to choose colors and fonts and styles to match our personality.

CSS is a language made specifically for styling HTML elements to look the way we want.

Properties

There are over a hundred different CSS properties available, meaning the combination of styles is nearly infinite. We can create combinations of styles that have never been done before - allowing our site to be unique.

Some popular properties are:

margin: The blank space around an element.
font-family: The font used for text.
font-size: The size of the font.
font-weight: The thickness of the font.
color: The color of text.
background: The color of the background, or an image as a background.
border: Outline an element with a line of a specific color and width.
text-align: Used for deciding if text is left aligned, centered or right aligned.
height: How tall an element should be.
width: How wide an element should be.

These are just a few of the basic properties, but there are so many that it would take too long to write them all here, instead check out this reference for all properties available.

Selectors

There are a few different ways we can apply our styles to our HTML elements, style tags, class names, or ids.

Style Tag

The fastest way to start experimenting with CSS is to write a style attribute on your HTML element that you would like to style.

If we had some text that we wanted to be white with a black background we would do this:

<p style="color: white; background: black;">I am some text</p>

In style tags, we separate each style with a semicolon ;. Each style has two parts: the property name, like color or background, and the value, like white, black, blue, or #4287f5.

The downside of using style tags is that we must write the same styles over and over again and there is no way to reuse them. To reuse styles we use class names.

Class Names

Class names allow us to create a <style> tag inside of our HTML document and write our styles inside there instead of inside every element.

<style>
  .some-text {
    color: blue;
    font-size: 24px;
  }

  .box {
    border: 1px solid red;
    padding: 30px;
    height: 45px;
    width: 45px;
    text-align: center;
  }
</style>

<p class="some-text">I am text</p>
<div class="box">I am a box</div>

As we can see, we write classes inside our style tag, then we can reuse that same style many times throughout the HTML document, allowing us not to repeat ourselves.

Furthermore, we can also write our class styles in a separate file completely and give it a .css extension.

Style our site

Create a file called styles.css and place it your static folder.

Your folder structure should now look like this:

my-blog
├── archetypes
|   └── default.md
├── content
|   └── posts
|       └── my-first-post.md
├── data
├── layouts
|   ├── _default
|   |   ├── summary.html
|   |   ├── single.html
|   |   ├── list.html
|   |   └── baseof.html
|   ├── partials
|   |   ├── footer.html
|   |   └── navbar.html
|   ├── 404.html
|   └── index.html
├── static
|   └── styles.css
├── themes
└── config.toml

Open the new styles.css file in VS Code and paste the following:

body {
  background: blue;
}

This will automatically apply a blue background to the <body> tag on our page.

To get this to work, we need to add a reference to this file inside our pages.

Open our baseof.html template and add this line inside of our <head> tag (remember <head> is for metadata): <link rel="stylesheet" href="/styles.css">.

Our baseof.html should look like this now:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/styles.css">
  <title>{{ block "title" . }}
    {{ .Site.Title }}
    {{ end }}</title>
</head>

<body>
  {{ partial "navbar.html" . }}
  {{ block "main" . }}
  <!-- The part of the page that begins to differ between templates -->
  {{ end }}
  {{ partial "footer.html" . }}
</body>

</html>

Now if we go in our browser to visit our local development server, we should see a blue background on all pages.

It is probably very harsh to look at, so we will remove that style from our styles.css file and in the next section go over Bulma to help us write CSS faster.