A Beginner's Guide to Styling Recipe Cards

Today’s post is where you are going to get into the styling of your recipe cards. The goals of this post are to add your recipe images to the site and begin styling your recipe card website. At the end of the post, your site will look like this in the browser.

It won’t look quite like a recipe card yet, but you can see how the image and recipe text look similar to the design comp. To get your recipe cards and images on the page, you’ll be using lots of CSS properties to get the size and spacing just right. Here’s a list of some of the properties we will be using below.

• Margin
• Padding
• Width
• Height
• Float
• Overflow

If you need to review any of these properties, revisit all the CSS posts in the Skillcrush 101 series or the 4 Concepts You Need to Know for the Skillcrush Recipe Card Project post. Now open your text editor and get your files ready. You will only use the style.css file throughout this post, but I recommend all developers have the index.html and the style guide open so you can reference them as you code.

Skillcrush students can keep the style guide file open in another tab in their text editor. If you don’t have the style-guide.md file, you can keep my post How to Set Up Recipe Cards HTML File open in your browser.

Recipe Cards

1. Let’s create our recipe cards first. Inside your style.css file, create a selector for your card class. Skillcrush wants the top and bottom margins to be set.

You can do this by setting separate properties for the top and bottom margins. Both of these properties will be set to 25px.

.card {
     margin-top: 25px;
     margin-bottom: 25px;
}

You can also set the margins with less by code by using the margin property. Set the margin to 25px 0. This will set the top and bottom margins to 25px while 0 ensures the left and right margins stay the same. In this post, I will use the 25px 0 for this project.

.card {
     margin: 25px 0;
}

2.Create a selector for your image class. You will need three properties inside our image class. First, add the float property. Set the property to the left.

Underneath the float, property, add width and height properties. The width property needs to be set to 500px while the height will be set to 550px.

3.Make a selector for the recipe class. Inside the recipe selector, put the float and padding properties. Set the float property to the left. Set the padding to 20px.

4.Skillcrush wants the recipe class to match the image class in width and height. So add the width and height properties to your recipe class. Set the width to 500px and the height to 550px.

5.Add background and box-sizing properties to the recipe selector. Set the value of the background color to white. Set the box-sizing property to border-box.

6.Go back to the card selector. Add the overflow property. Set the overflow property to auto.

Auto will clear the floats for the card class without changing the floats for the recipe divs and images.

7.Save your style.css file then check how your website looks in the browser. Your recipe cards aren’t going to look like recipe cards quite yet. You will see blank areas next to each of the cards.

That’s ok for now since we’ll be adding images next. What you will need to see is that the cards are floated left and there’s some spacing between the recipes. If you don’t see this, Skillcrush recommends adding float, width, and height properties to the image and recipe selectors.

.card {
    margin: 25px 0;
    overflow: auto;
}

.image {
    float: left;
    width: 500px;
    height: 550px;
}

.recipe {
    float: left;
    padding: 20px;
    width: 500px;
    height: 550px;
    background: #FFFFFF;
    box-sizing: border-box;
}

Recipe Images

You are going to need three recipe images for this tutorial. In this guide, I’m going to walk you through the steps to add the image of the cookie to the site. Once you are done adding one recipe image to the site, you can copy-paste the code to create the other two images in your style.css and make changes.

Make sure your index.html file is open in another tag so you can see the article tags and the ids you set for each of the elements. You will be using these ids in this portion to help get our images in the right place on your recipe card site.

1. We are going to create a selector that focuses on the first recipe image. This selector needs to be the id in your article tag and img. In this example, I want to select the image for the cookies id. So my selector is going to be the #cookies img.

2.The recipe cards use background images. Inside your new selector, add the background-image property. The value needs to be a URL with the link to the image in the parentheses.

The Skillcrush starter has the images in the img file, but you can have your images located on a different file or use ones you found online. Make sure you wrap the link with quotation marks.

3.Underneath the background-image property, add the background-size property. Set this property to cover.

4.Save your style.css then preview your recipe card website in the browser. Your image should now be on the first recipe card. If you aren’t seeing an image, double-check your URL for the background-image property.

As you review your site, you can see images at the top of each card and text overflowing from the cards. Don’t worry about this since that is coming up in the next lesson in this series.

#cookies .image {
    background-image: url("../img/gluten-free-sugar-cookies.jpg");
    background-size: cover;
}

5.Repeat steps 1-3 for the other two recipe cards. You can copy-paste the code you wrote for your first selector then change the ids being used for your selectors. Save your file then double-check your site in the browser.

Conclusion

Mission accomplished! At this point, your recipe card site should look similar to the image at the top of this post. The recipe image and text are floating on the page.

Although they are underneath the image instead of right next to it, that is something we will fix in the next post. Also on the agenda for the next post is adding the box for the times. The prep, cook, and total times will be in a little table underneath your recipe title.

We’ll be using CSS to make the boxes the times will be inside. You will use CSS properties such as width, height, margin, and padding as well as float and vertical align to get these boxes to match the ones in the design comp.

This post was originally published on August 3, 2021 on CodeNewbie. I made minor changes to the original post to work here on DEV