Styling Your Project With CSS

00:00 Now that you have the structure of your message board in place, let’s enhance the user interface by adding some styling with CSS. In the style.css file that you created earlier, let’s add some basic styles to improve the look and feel of your message board.

00:16 This

00:22 CSS applies some basic styling to the body element, fonts, centers the content, and adds a background color and a text color for better readability.

00:32 The styling creates a clean and user-friendly layout by customizing the navigation bar, main content area, and headings. The main content area is centered and padded for readability, while headings are styled in a darker blue to establish clear visual hierarchy.

00:48 If you want to learn more about styling your Python project using HTML and CSS, I have included a link to Real Python’s comprehensive tutorial on HTML and CSS styling in the last section.

01:01 Feel free to check it out and learn more about styling. As you have already included the style.css file in the base template, it should be automatically applied to all the child pages that inherit from the base template.

01:14 Let’s run your Flask project and see the changes in action.

01:32 As you can see, the message board looks better now. The content is centered, and the font and styles are applied to our page. Later on, you can add more styles, JavaScripts, and add those files inside the static folders, and they’ll be applied to all your pages once you include them in your base template.