Login Required

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.

Enroll now

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:

  1. 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.
  2. Inside the public folder, create another folder named css.
  3. Create a new file named style.css inside the css folder. This is where we will write our CSS code.
  4. 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; }

  1. 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.

  1. 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.

  1. 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.

30 My First Express App - Continued
🎬 13 videos

Course Certificate

Complete 100% to unlock your certificate

Sponsored

Course Discussion

2 Comments

@niteshguptav63
niteshguptav63 Nov 17, 2024 at 8:09 AM

I am not able to access videos from second class and further. I have already completed first class

@niteshguptav63
niteshguptav63 Nov 16, 2024 at 5:26 AM

When will I get my course?

@admin79
admin79 Nov 17, 2024 at 7:59 AM

Now, Your query was resolved.

Frequently Asked Questions About Sciaku Courses & Services

Quick answers to common questions about our courses, quizzes, and learning platform

Didn't find what you're looking for?

help_center Contact Support