wk4 - css // recipe in style -- DESN 368

DESN 368 WK 3

CSS // Recipe in Style

Web Design Fundamentals · Spring 2026

Active

Overview

Take your HTML recipe and make it your vibe!

You'll learn three different ways to apply CSS while exploring colors, fonts, and basic styling.

This is your chance to experiment and have fun with design.
Transform your plain HTML recipe into a styled website with personality!

Required

File Naming

Start: Create a new folder in week-4 in your GitHub repo

Create a folder in week-4 titled recipe-in-style
Create the following inside the recipe-in-style folder:
- a css folder
- an images folder
Duplicate your recipe.html, rename it recipe-styled.html, and move it into the recipe-in-styled folder

Required Page Sections

Header

Your <h1> tag wrapped in <header></header> section
Your recipe title is in an <h1> tag

Main Content

Your recipe is organized into sections <section></section> with IDs applied, all wrapped in a <main> element:

Introduction — Brief story or description
Ingredients — List with measurements
Instructions — Step-by-step directions
Notes/Variations — Tips or substitutions

Note: You should have a minimum of 4 sections with unique ID's.

Footer

Your end data wrapped in a <footer></footer>

Your name and the year
Example: "Recipe by Jane Smith, 2025"

Required Links (Both)

Restaurant Link — Where can someone get this dish?
Wikipedia Link — Link to the dish's Wikipedia article

CSS Requirements: Show All Three Methods

You must use CSS in three different places in this project:

1. Inline CSS (One Example)

Use inline CSS once for something special — a unique element that stands out.

<p style="font-style: italic; color: #d32f2f;">
  Chef's tip: toast your spices first for deeper flavor.
</p>

Pick one element that deserves special attention!

2. In-Document CSS (Internal)

Add a <style> block in your <head> for a few page-specific styles.

<head>
  <title>My Recipe</title>
  
  <style>
    p {
      color: blue;
      font-family: "Helvetica";
      background-color: #f5f5f5;
    }
  </style>
  
  <link rel="stylesheet" href="styles.css">
</head>

Use this for 2–3 special styles that are unique to this page.

3. Linked CSS File (External Stylesheet)

Your main stylesheet: styles.css

Link it in your HTML <head>:

<link rel="stylesheet" href="styles.css">

This is where most of your styling will go!

Note: Your styles.css goes in a folder with your recipe.html

When you are done your recipe-site folder will look like this:

recipe-in-style/
├── recipe-styled.html
├── images/
│   └── my-recipe-image.jpg
└── css/
    └── styles.css

Required Styling Features

Background (Required)

Add a page background — choose one:

Solid color
Gradient
Background image

Make sure text is still readable!

Typography (Required)

Style your text to create hierarchy:

Make headings bigger than body text
Use different font sizes for <h1>, <h2>, <h3>
Choose font colors that work with your background

Required Selectors

Use at least three different types of CSS selectors:

Element Selector:

h1 {
  font-size: 2.5rem;
  color: #333;
}

Class Selector:

.ingredients-list {
  background-color: #fafafa;
}

Descendant Selector:

header h1 {
  text-align: center;
}

Starter Code I'm Giving You

Code #1: Centering Your Content

Want to center your content and give it a nice max-width? Add this to your styles.css:

After the body tag wrap everything in a <main> </main> tag pair.

/* Center content container */
main {
  max-width: 800px; /* change this at will */
  margin: 0 auto;
  padding: 20px;
}

What this does:

max-width: 800px — Content won't get wider than 800px
margin: 0 auto — Centers the content horizontally
padding: 20px — Adds breathing room on all sides

Feel free to adjust the numbers!

Code #2: Google Fonts

Want to use beautiful fonts from Google Fonts?

Follow this tutorial: Fonts and Google Fonts Guide

Pro tip: You can use different fonts for headings and body text!

body {
  font-family: 'Open Sans', sans-serif;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

Helpful Resources

CSS Cheat Sheets & References

Use these while you work! Bookmark them!

CSS-Tricks Almanac: https://css-tricks.com/almanac/

Searchable reference for every CSS property

MDN CSS Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Comprehensive and accurate

Web.dev Learn CSS: https://web.dev/learn/css

Tutorials and examples

CSS Cheat Sheet (HTML Cheat Sheet): https://htmlcheatsheet.com/css/

Quick visual reference

Color Tools

Coolors: https://coolors.co

Generate color palettes

Adobe Color: https://color.adobe.com

Create and explore color schemes

WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

Make sure your text is readable

Design Inspiration

Dribbble — Recipe Designs: https://dribbble.com/search/recipe

See how designers style recipe pages

Awwwards — Food & Beverage: https://www.awwwards.com/websites/food/

Award-winning food websites

Search Pinterest for "recipe website design" for tons of ideas

What to Explore & Experiment With

Colors

Text color: color: #333333;
Background color: background-color: #fafafa;
Gradients: background: linear-gradient(to bottom, #fff, #f0f0f0);

Typography

Font size: font-size: 18px; or font-size: 1.5rem;
Font weight: font-weight: bold; or font-weight: 300;
Text alignment: text-align: center;
Line height: line-height: 1.6;
Text transform: text-transform: uppercase;