How to Use CSS to Create a Recipe Timetable

We are ready to add more styles to the recipe card website. Today’s agenda involves fixing the style issues that appeared in our last lesson. We will address the text overflowing in the cars and get the images next to the text so it looks like a recipe card.

However, the main focus of this post is creating the table for the recipe cards. Underneath the recipe title, you will create a mini-table where the different time information will sit. At the end of this post, your recipe card website will look like this.

We’ll be using margin and padding to help get the spacing just right inside our mini table. However, we will use some of the newer CSS properties such as vertical-align and box-sizing. If you need to review these properties, you will want to revisit this post to read more about how these properties work in CSS and see examples.

4 CSS Concepts You Need to Know for Skillcrush Recipe Card Project

Sarah Dye ・ Jan 13

#skillcrush #css

Now open your text editor and get your style.css file open. Make sure you keep the index.html file and style guide open too so you can refer back to them throughout this post. Skillcrush students can keep the style-guide.md file open in your text editor if you like or you can use the documentation in the post How to Set Up Recipe Cards HTML file.

Objective 1: Style the Recipe Title

1. Let’s start with adding some style to all the recipe titles. In your style.css file, create a brand new selector. We want to select the h2 element in the recipe class so you will want your selector to be .recipe h2.

2. Inside the .recipe h2 selector, we are going to add three properties. These properties are color, font size, and font family. Set these values with the ones Skillcrush lists in the style guide documentation.

3. Let’s make the h2 headline bold and uppercase. Add the text-transform and font-weight properties inside the .recipe h2 selector. Set the font weight to bold. The text-transform property needs to be set to uppercase.

4. Save your style.css file and double-check your recipe card website in the browser. The recipe titles will now have the same font and color as the design comp. The title will also be bold and uppercase.

.recipe h2 {
    margin-top: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 29px;
    color: #F16059;
}

Objective 2: Create the timetable

1.We are going to start creating the mini-table the time information will be in. To do this we are going to add styles to the div with the time class. In your style.css file, create a new selector. Call this new selector .time so we can select the time class.

2.Now we can start adding the CSS properties. Inside the .time selector, add the margin-bottom property. We want to add some margin to the bottom of the table so set the value of the margin-bottom property to 20px.

3.Let’s add a border to the mini-table. Skillcrush wants a thin, dark gray border around the time information. Inside your .time selector, you will want to add the border properties you will need.

You can find the border-color hex code in the style guide while Skillcrush wants the border width to be set to 1px and have a solid border style. There are two ways to add a border to a website so pick one of these methods to use on your site. First, you can individually set each of the border properties inside your .time selector.

In the Skillcrush solution code, they encourage students to set the border styles using the border-width, border-style, and border-color properties. If you want to use this method, add these properties inside your .time selector.

.time {
    margin-bottom: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #3B3B3B;
}

The other method you can use is the border property. All you need to do is use the border property inside your selector and set all the border styles as the value. If you want to use this method, add the border property then set the value with the border-width, border-style, and border-color. Put these values in this exact order.

.time {
   border: 1px solid #3B3B3B;
}

4.The last thing we need to do is make sure to clear all the floated elements the timetable will eventually have. Inside your .time selector, you want to add the overflow property. Set the overflow property to auto.

5.Save your file and double-check your website in the browser. The time box will now have a gray border around the time elements.

.time {
    margin-bottom: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #3B3B3B;
    overflow: auto;
}

Objective 3: Select and style all the divs in the time class

1.Now we are going to turn our attention to the div tags inside the time class. Inside the style.css file, make a new selector called .time div. We are going to start adding CSS properties.

Inside the .time div selector, add padding-left, width, and float properties inside. Set the float property to the left. To get some spacing on the left side of our divs, we are going to set the padding-left to 6px. Finally, we will set the width property to 33.3333%.

2.Skillcrush wants students to include padding, border, and content in the width and height of the box. They hint students need to use one property to do this. This property is none other than the box-sizing property.

Inside your style.css file, add the box-sizing property to your .time div selector. Set this property to border-box.

3.We need to add one more property to the .time div selector. The last property you will need is the text-transform property. Add this property to your .time div selector. Set the value to uppercase.

4.Save your style.css file and double-check your website in the browser.

.time div {
    float: left;
    padding-left: 6px;
    width: 33.3333%;
    box-sizing: border-box;
    text-transform: uppercase;
}

Objective 4: Add styles to the cook div

1.We are going to start adding some styles to the cook div in the center of our timetable. Inside your style.css, create a new selector called .time .cook. This will select the cook div inside the time div. You can also call the cook div by simply using .cook as your selector.

2.This is where we need to add a border around the cook div so it looks like a table. Inside the .time .cook selector, add border-width, border-style, and border-color properties. You can either set the individual border properties here or set the border property with all the border values.

Skillcrush wants the same border style you used for the .time selector. So copy-paste your border values from the .time class you created earlier and put them inside your .time .cook selector.

.time .cook {
    border-width: 0 1px;
    border-style: solid;
    border-color: #3B3B3B;
}

Objective 5: Add styles to icons

1.Let’s turn our attention to the icons that are right next to our time text. Create a new selector called .time img. This will select the images in the time class.

If you are using Font Awesome, you will want to use i instead of images. So your selector will be .time i instead of .time img.

2.Go inside your new selector. We are going to add a few CSS properties here. Let’s start with the width and height.

Add the width property and set it to 15px. Next, add the height property. Set this property to auto. Auto lets the browser adjust the height to fit the images.

3.Save your style.css file and check your recipe cards website in the browser. You will now have borders inside and outside your recipe times. Your images will also change to fit the browser.

.time img {
    margin-right: 5px;
    vertical-align: middle;
    width: 15px;
    height: auto;
}

Objective 6: Add styles for Time Text

1.Now that the icons are done, the last thing we need to do is adjust the text so it is on the same line as the icons. Create a new selector called .time-details.

2.Inside your new selector, add the display property. Set the display property to inline-block. Inline-block will not only get the icons and text on the same line, but it will add margin and padding for us.

3.We are going to take a quick break from the .time-details selector to add more styles to our icons. Inside your .time img (or .time i if you are using Font Awesome) selector, add the margin-right. Set the margin-right property to 5px.

Next, add the vertical-align property. Set the vertical-align property to middle.

.time img {
    margin-right: 5px;
    vertical-align: middle;
    width: 15px;
    height: auto;
}

.time-details {
    display: inline-block;
}

4.Create a new selector called .time strong. This will target the strong tags inside the time class. Inside this selector, add the font-family property.

Set the font-family property to the accent font recommended in the style guide. This will change the text inside the strong tags to the accent font without changing the fonts of the other text.

.time strong {
    font-family: 'Montserrat', sans-serif;
}

5.The last thing that needs to be done is adding some spacing above and below the headline. Skillcrush wants students to use the line-height and margin-top properties to create this spacing on the site. Go back to the .recipe h2 selector.

Inside your selector, add the margin-top property. Set this property to 0px. Add the line-height property underneath it. Set the line-height property to 29px.

6.Save your style.css file then check your recipe card website in the browser. Your website should now look like the image at the beginning of this post. If you are having any issues, double-check your CSS properties.

.recipe h2 {

    margin-top: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 24px;

    font-weight: bold;

    text-transform: uppercase;

    line-height: 29px;

    color: #F16059;

}

Conclusion

That’s a wrap for today’s post! We are almost in the home stretch with the recipe cards project. Your website now has a styled little table for the recipe times.

It also looks more like a recipe card with the image and text right next to each other instead of stacked on top of each other. We are in the home stretch with the recipe cards project! The last thing we need to do is add the final styles to the site.

In the final lesson, we are going to tackle the recipe text. You’ll be using CSS to make a two-column layout for the site as well as add any final CSS styles to the text from changing the fonts, colors, and even the bullet points. You’ll also check your code for the last time to make sure there are no errors and everything is valid.

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