how to set css in hbs in express

To set CSS in HBS (Handlebars) in Express, you need to follow these steps:

  1. Create a CSS file: First, create a CSS file where you will write your CSS styles. You can name it something like "styles.css".

  2. Link the CSS file in your HTML template: In your HBS file, add a link tag inside the head section to link the CSS file. The link tag should have the "rel" attribute set to "stylesheet" and the "href" attribute pointing to the location of your CSS file. For example:

<link rel="stylesheet" href="/styles.css">
  1. Serve static files: In your Express application, you need to configure it to serve static files, including CSS files. To do this, use the express.static middleware and specify the directory where your CSS file is located. For example:
app.use(express.static('public'));

In this example, the CSS file should be located inside a "public" directory in your project.

  1. Verify the CSS is working: Start your Express server and open your web page in a browser. Inspect the page and make sure that the CSS styles are being applied correctly.

By following these steps, you can set CSS in HBS in Express and apply styles to your HTML templates.