Welcome back! So far, you have built the main structure of your Cooking Helper landing page and made it interactive with JavaScript. Now, it’s time to make your page look more attractive and easier to use. This is where CSS (Cascading Style Sheets) comes in.
CSS is a language used to style and lay out web pages. With CSS, you can change colors, spacing, fonts, and much more. A well-styled page is not only more pleasant to look at, but it also helps users find what they need quickly and easily.
In this lesson, you will learn how to use CSS to improve the look and feel of your Cooking Helper landing page. By the end, your page will look more modern and professional.
Before we dive into styling your page, let’s quickly review what CSS is and how it works.
CSS stands for Cascading Style Sheets. It’s a language used to describe how HTML elements should look on a web page. With CSS, you can control things like:
- Colors: Change the background or text color.
- Spacing: Add space around or inside elements.
- Fonts: Choose different font styles and sizes.
- Layout: Arrange elements on the page.
CSS works by selecting HTML elements and applying rules to them. For example:
This rule makes all <h1> headings green and larger.
You will write CSS in a separate file and link it to your HTML. Once linked, any rules you add will change how your page looks, without changing the HTML structure itself.
To style your page, you need to add a CSS file to your Flask project and make sure your HTML knows where to find it.
In a Flask project, static files like CSS are usually placed in a folder called static. For example, your project might look like this:
Here, index.css is the file where you will write your CSS rules.
To use your CSS file, you need to link it in your HTML template. This is usually done in the <head> section of your HTML file.
- The
linktag tells the browser to load a stylesheet. {{ url_for('static', filename='css/index.css') }}is a Flask function that helps your app find the correct path to the CSS file.
Once you have done this, any CSS rules you add to index.css will affect your landing page.
Now, let’s look at some CSS rules you can use to style your Cooking Helper landing page. We’ll go step by step, starting with the main sections and moving to smaller details.
Let’s start by adding some space between the main sections of your page.
- This rule selects three sections by their class names.
margin-bottom: 2rem;adds space below each section, making the page less crowded.
Next, let’s make the search input box look better.
- This rule targets all text input fields.
width: 100%; max-width: 400px;makes the input stretch to fit the container, but not wider than 400px.paddingandmarginadd space inside and around the input.borderandborder-radiusgive the input a soft, rounded look.font-sizemakes the text easier to read.
Let’s make the buttons stand out and look clickable.
- The first rule styles all buttons with a green background, white text, and rounded corners.
cursor: pointer;changes the mouse cursor to a hand when hovering over the button.- The second rule (
button:hover) changes the button color when you hover over it, giving feedback to the user.
Let’s improve how recipe lists and random results look.
- The first rule removes the default bullet points from lists and removes left padding.
- The second rule adds space between list items and a light border below each one.
- The
.random-resultclass adds a light background and rounded corners to the random recipe result, making it stand out.
In this lesson, you learned how to add and link a CSS file in your Flask project and how to use CSS rules to style your Cooking Helper landing page. You saw how small changes in spacing, colors, and layout can make your page look much more professional and user-friendly.
Next, you will get a chance to practice these skills by customizing and experimenting with the CSS in your own project. Try changing colors, spacing, or even adding your own styles to see how they affect the look and feel of your page. Good luck, and have fun making your Cooking Helper app look great!
