I'm trying to serve my CSS and HTML with server-side rendering in nodeJS. Right now, I used express static, and managed to create resets where set the padding to 0, margin to 0 and minimum font size. In this case, my CSS is working. But if I try to add another TAG in HTML or style an existing one, my CSS in the network tab is 304. Same with HTML....
My file structure is similar to MVC in nodeJS. Therefore, the CSS is located in the public file, and the HTML pages are in Views.
CSS:
* {
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-decoration: none;
list-style-type: none;
padding: 0;
margin: 0;
};
header {
padding: 12px;
background: red;
border: 2px solid black;
font-size: 2em;
}
.salami {
width: 100%;
height: 60px;
background-color: aqua;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/index.css">
<title>Grupomania</title>
</head>
<body>
<header>
header
</header>
<div class="salami">
salami
</div>
<h1>This is a index page</h1>
</body>
</html>
SERVER:
const express = require('express');
const app = express();
const cors = require('cors');
const connection = require('./connetion/db');
const path = require('path');
// CORS, static path for CSS
app.use(cors());
app.use(express.static(path.join(__dirname, 'public')))
// Import routes
const authentification = require('./routers/authentification');
// Home route
app.get('/', (req, res, next) => {
res.sendFile(path.join(__dirname, 'views', 'index.html'));
});
// Auth endpoints
app.use('/api', authentification);
app.use('/api', authentification);
// 404 route
app.use((req, res, next) => {
res.sendFile(path.join(__dirname, 'views', 'notFound.html'));
//res.status(404).send('<h1>Page not found!</h1>');
});
module.exports = app;
In the CSS file and HTML you can observe there is more Tags. I can give the body a background colour, and use the resets. but not working to work with the others.
How can I solve this? Thanks, Daniel
