Styling the Cooking Helper

Welcome back! In the last lesson, you built a reusable HTML layout for your Cooking Helper frontend using Flask. Now, it’s time to make your site look more appealing. This is where CSS comes in.

CSS stands for Cascading Style Sheets. It is a language used to describe how HTML elements should look on a web page. With CSS, you can change colors, fonts, spacing, and even the layout of your site. In this lesson, you will learn how to use CSS to style your Cooking Helper frontend and make it more user-friendly and visually attractive.

Before we dive into CSS, let’s quickly remind ourselves of what we have so far. In the previous lesson, you created an HTML layout template. This template includes a navigation bar at the top, a main content area, and a footer at the bottom. You also set up your project so that you can link a CSS file for styling.

Here’s the current look of the layout page

To style your web page, you need to connect a CSS file to your HTML. In Flask projects, static files like CSS are usually placed in a folder called static. Inside this folder, you can create a css folder and then add your styles.css file there.

Here’s how your project structure should look:

cooking_helper/
│
├── static/
│   └── css/
│       └── styles.css
└── templates/
    └── layout.html

In your HTML file, you already have this line:

<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

This tells the browser to load your CSS file and apply the styles to your page. On CodeSignal, the environment is already set up for you, so you don’t need to worry about installing anything. Just make sure your CSS file is in the right place.

Let’s start adding some style to your Cooking Helper frontend. We’ll do this step by step, focusing on the main parts of your layout: the body, container, navbar, and footer.