Welcome back! So far, you have built the basic structure for your recipe detail page and learned how to display recipe information using JavaScript. Now, it’s time to make your page look more attractive and easier to use. In this lesson, you will learn how to use CSS (Cascading Style Sheets) to style your recipe view.
CSS is a language that controls how HTML elements look on the page. With CSS, you can change colors, fonts, spacing, and even the layout of your content. This is important because a well-designed page is easier to read and more enjoyable for users.
By the end of this lesson, you will know how to add a CSS file to your Flask project and use it to style your recipe detail page.
Before we dive into CSS, let’s quickly remind ourselves of what we have so far. In previous lessons, you created an HTML template for your recipe detail page and used JavaScript to fill in the recipe’s title, rating, ingredients, and steps.
Here’s a simple example of what your HTML might look like (you do not need to write this again, just remember):
Right now, this page probably looks very plain. All the elements are there, but there’s no color, spacing, or special styling. This is where CSS comes in!
To style your page, you need to create a CSS file and tell your HTML to use it. In Flask, static files like CSS are usually placed in a folder called static.
First, we will create a new file called recipe.css inside the cooking_helper/static/css/ folder. If you are using CodeSignal, this folder should already exist, and you do not need to install anything extra.
Next, you need to tell your HTML template to use this CSS file. You do this by adding a <link> tag inside the <head> section of your HTML template.
Here’s how you can do it in a Flask template:
- The
url_for('static', filename='css/recipe.css')part tells Flask to look for the CSS file in thestatic/cssfolder. - The
<link rel="stylesheet" ...>tag tells the browser to load and use this CSS file for styling.
Now, when you open your recipe detail page, the browser will load your CSS file and apply the styles to your HTML.
Let’s look at the CSS rules you will use to style your recipe page. We’ll go through each part step by step.
- This adds space inside the main container, so the content doesn’t touch the edges.
- This makes the recipe title larger and adds a little space below it.
- This makes the rating text a gray color and adds space below it.
- This adds space to the left of your ingredients and steps lists, and space below each item.
- The
.actionsclass moves the button to the right and adds space above it. - The
.start-btnclass makes the button green, adds padding, rounds the corners, and makes the text bold and white. - The
.start-btn:hoverrule changes the button color when you move your mouse over it.
When you add these styles, your recipe page will look much more organized and pleasant. The title will stand out, the lists will be easy to read, and the button will look like something you want to click.
In this lesson, you learned how to add and link a CSS file to your Flask project and how to use CSS rules to style your recipe detail page. You saw how each part of the CSS changes the look and feel of your page, making it more user-friendly and visually appealing.
Next, you will get a chance to practice applying and tweaking these styles yourself. You’ll see how small changes in CSS can make a big difference in how your app looks. When you’re ready, move on to the practice exercises to try it out!
