How to Use a Style Guide with the Recipe Card Website

You are now ready to start adding CSS to your recipe card website. Today you will begin to add CSS styles to the style.css file. Your goal today is to get some of the styles done for the body, header, and main tags on your website.

At the end of this post, your recipe card website will look like this. It won’t look quite like the design comp yet, but you have completed some of the easier style changes first.

Open your text editor. You will need your index.html and style.css file open. We will be adding links to our stylesheet in the index.html, but you can keep the index.html file to refer back to as you add styles to the style.css file.

You will also want your style guide documentation open to reference back to as well. You can use the documentation from the How to Set Up Recipe Cards HTML File open in your browser so you can refer to it throughout this post.

Objective 1: Connect your stylesheets!

Before we can begin adding any of our CSS code, we need to link all the files in our css folder to the index.html file. If you need a review on how to connect a stylesheet file to an HTML file, revisit A Newbie’s Guide to CSS post to look at the example and the steps.

A Newbie's Guide to CSS

Sarah Dye ・ Mar 9 '21

#css #skillcrush

So go back to your index.html file. Inside the head tag, you want to add two link tags. One link tag will have a href attribute for the style.css file.

The other link tag will have an attribute for the normalize.css file. Both link tags need to rel attribute set to stylesheet. Save your file when you are done.

Now let’s test to see if they are connected. Go to your style.css file. Create an h1 selector.

Give your new h1 selector a color property of red. Save your style.css file then open your recipe card website in the browser. The recipe collection headline should now be red. If your headline isn’t red, go back to the index.html file and double-check your link in the href attribute.

Objective 2: Add styles for the body

1. Once your stylesheets are connected, we can remove our test styles in the style.css file. So delete your h1 selector code. Now you are ready to start adding code for your project.

First, create a selector for the body tag. We are going to start adding CSS properties. In this step, let’s set two properties in the body selector.

So inside your body, you will add background and color properties. You will use the values Skillcrush recommends in the style guide for these properties.

1. Add styles for the font-family and font-size properties in your body selector. Use the style guide to set the values for these properties. Make sure the font size has the smallest value.

2. The last property we need is line-height. Inside your body selector, add the line-height property. Set the value of the line-height property to 16px.

3. Save your style.css file and check your index.html file in your browser. The background color and fonts should now be applied to your site. If you don’t see this, double-check your code.
   

body {
    background: #DAF7F6;
    font-family: 'Open Sans', serif;
    font-size: 12px;
    line-height: 16px;
    color: #3B3B3B;
}

Objective 3: Add styles for the header

1. Let’s turn our attention to the header. Create a header selector underneath your body selector. You will need two properties inside your header selector.

Put background and text-align properties inside your header selector. Set the background property value to white using the hex code in the style guide. Set the text-align property to center.

1. Under your header selector, create an h1 selector. The h1 selector will have quite a few properties so let’s start with them one at a time. We want the icon next to the h1 headline.

To do this, we will use the display property. Inside your h1 selector, add the display property. Set the display property to inline-block.

Inline-block won’t just get the icon on the same line as the chef hat icon. The width and height of the h1 will be able to change as well.

1. Up next to our h1 selector is padding. Skillcrush wants the top and bottom padding set. You can individually set the padding with padding-top and padding-bottom in your h1 selector, but I’m going to write less code and set the padding property to 40px 0 in this tutorial. This lets the computer know the top and bottom padding will be set to 40px while there will be no changes made to the left and right padding.

2. Skillcrush wants the default margin for the h1 element to be removed. So we will need to set the margin property in the h1 selector. Inside your h1 selector, set the margin property to 0. This will remove the margin for the h1.

3. Now we are ready to add some styles to the h1 selector. We will start by adding CSS properties for the fonts and colors. Inside your h1 selector, you will want to add the font-family, font-size, and color properties.

Use the style guide to help you set the values of these properties. If you aren’t sure what to set for the fonts, Skillcrush advises students to use the accent font and large font size for the h1 selector.

1. The h1 headline is bold and uppercase in the design comp. Inside the h1 selector, add the font-weight and text-transform properties. Set the font-weight to bold. The text-transform property will be set to uppercase.

2. Although the icon and h1 tag will be on the same line, there needs to be a little bit of space between them. So you will need to set the margin for the header image. Under your h1 selector, create the header img selector.

We are going to use two selectors for this example. This will select the header then the img element inside the header. Inside your new selector, you will change the right margin by adding the margin-right property. Set this value to 16px.

1. Save your style.css file then refresh your website in the browser to look at the styles for the headline and icon at the top of the page. Use the design comp to help check your styles and double-check your code.

header {
    background: #FFFFFF;
    text-align: center;
}

h1 {
    display: inline-block;
    padding: 40px 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: bold;
    text-transform: uppercase;
    color: #F16059;
}

header img {
    margin-right: 16px;
}

Objective 4: Add styles for the main selector

1. The last thing we are going to add in this post is the main selector. Under your header img selector, create a new selector called main. There will only be two CSS properties you will need for the main selector.

Inside your main selector, add the width and margin properties. Set the width property to 1000px. Set the margin property to 0 auto. This value will center all the content on the page.

1. Save your style.css file then check your recipe cards website in the browser. Your main content will be centered a bit on the website and the width will have changed for the recipe card site. If you aren’t seeing these styles, double-check your properties and values.

main {
    width: 1000px;
    margin: 0 auto;
}

Conclusion

Congratulations! We’ve finished all four objectives for this portion of the recipe card website. Your stylesheet is now connected to your index.html file.

Right now you have styles for your body, header, and main tags. We will continue to add more styles in future lessons, but now your recipe card website is slowly starting to look like the Skillcrush design comp. We are going to continue adding styles to the recipe card website in the next post.

In the next lesson, Skillcrush has students add recipe images to the website. You will be concentrating on getting the recipe cards to look like recipe cards using CSS properties such as margin, padding, width, and height. We will also use properties such as float and overflow to get the placement of the cards just right.