Static Main Page | CSS

Static Main Page | CSS

26/09/2026

Create a public directory and then a css folder inside of it. Inside the css folder, create the index.css file with the following code:

* {
  margin: 0; /* External space */
  padding: 0; /* Internal space */
  box-sizing: border-box;
}


The index.css file will be used in every HTML file in the project and will contain common styles. The margin and padding properties define the spacing around and inside an element, respectively. The box-sizing property with the border-box value makes the element's specified width and height include its padding and border.

To apply the styles, open app.js and insert the following line of code. It allows users to access the static files contained in the public directory:

const express = require('express') // Import Express
const app = express() // Web application

app.use(express.static('public')) // <--- Here
// ... other code


Then open the about.html file and insert the following line in the <head> tag:

<head>
  <!-- ... other code -->
  <link rel="stylesheet" href="/css/index.css">
</head>


Refresh the page and you will see that all the default spacing has disappeared. This allows us to define our own spacing.

Let's adjust some background and font colors, and also set the font size. In index.css:

/* ... other code */
body {
  background-color: rgb(251, 247, 238);
  color: rgb(31, 36, 40); /* Font color */
  font-size: 27px;
}


I chose these colors because I think they are cozy and pleasant to the eye. Next, let's choose a font. I want to use a non-standard font that is not installed on my system by default, so I will need to download it from outside. A good source for fonts is Google Fonts. I chose the "IBM Plex Mono" font:

After finding a font, you will see several choices: you can download it, or use lines of code to load it directly from the web.

I prefer to download it, so press "Download all" and you will get a ZIP archive. In the public directory, create the fonts folder. Unzip the archive to this folder.

You will see a large number of .ttf files that represent different fonts and their variations. I don't need most of them, only Regular, Italic, Bold, and Bold Italic, so I feel free to delete the other files. The OFL.txt file contains the license for the font.

To apply this font and its variations, insert this at the top of index.css:

/* Regular */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf');
}

/* Bold */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf');
  font-weight: 700;
  font-style: normal;
}

/* Italic */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf');
  font-weight: 400;
  font-style: italic;
}

/* Bold Italic */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf');
  font-weight: 700;
  font-style: italic;
}

/* ... other code */


Then, in the body selector in index.css:

body {
  /* ... other code */
  font-family: 'IBM Plex Mono', monospace;
}


The monospace font family is used as a fallback in case IBM Plex Mono isn't available for some reason on some devices. These two fonts look almost the same.

I wrapped all the content from about.html into a <main> tag because I need to center it on the page and I will need to do the same with other pages. I also added a link to the page dedicated to this project with the <a> tag:

<!-- other code -->

<body>
  <main>
    <!-- Header -->
    <h1>About</h1>

    <!-- Paragraphs -->
    <!-- other code -->
    <p>
      This website is still in development and will keep improving
      step by step over time. You can
      <a href="https://sichen.dev/projects/this-blog">read more about it and follow its progress and updates.</a>
    </p>
  </main>
</body>


Then, in index.css, apply these styles to the new <main> and <a> tags, and to the existing <h1> and <p> tags.

/* ... other code */

main {
  /* The element can't be wider than the value */
  max-width: 80ch; /* ch means the approximate width of the "0" character */
  margin: 0 auto; /* Center the element */
  padding: 0 40px; /* Inner space on the left and right sides */
}

h1, p {
  margin-bottom: 15px; /* Distance from the element below */
  line-height: 1.6; /* Space between lines of text */
}

a {
  text-decoration: none; /* Removes default underlines */
  color: rgb(0, 113, 114);
}


The result:

Links:

1. Google Fonts: https://fonts.google.com/

2. IBM Plex Mono Font: https://fonts.google.com/specimen/IBM+Plex+Mono