Styling Our App

Dear Sciaku Learner you are not logged in or not enrolled in this course.

Please Click on login or enroll now button.

If you have any query feel free to chat us!

Happy Coding! Happy Learning!

Lecture 264:- Styling Our App

To style our app, we can add CSS to our HTML files. We can either write CSS directly in the HTML file or link an external CSS file. Linking an external CSS file is a more organized approach and makes it easier to make changes in the styling.

Here's how to link an external CSS file to our Express app:

Create a new folder named public in our project directory. This is where we will keep all our static files, including CSS, images, and client-side JavaScript files.
Inside the public folder, create another folder named css.
Create a new file named style.css inside the css folder. This is where we will write our CSS code.
Open the style.css file and add some CSS code. For example, we can set the background color of the body to blue:

cssCopy code

body { background-color: blue; }

In our Express app, add the following code after the app.use(express.urlencoded({ extended: true })) line:

javascriptCopy code

app.use(express.static(__dirname + '/public'));

This tells Express to serve static files from the public directory. The __dirname variable contains the absolute path of the current directory.

In our HTML file, add the following code inside the <head> tag:

htmlCopy code

<link rel="stylesheet" type="text/css" href="/css/style.css">

This tells the browser to load the style.css file from the css folder inside the public folder.

Save the changes and restart the server. The background color of the page should now be blue.

We can add more CSS rules to our style.css file to style other elements in our HTML file.

Styling Our App

Please Click on login or enroll now button.

Lecture 264:- Styling Our App

Comments: 2

Frequently Asked Questions (FAQs)