Scribd
Upload
3 views6 pages

CSS Guide for Recipe Page Styling

Uploaded by

pratikraj8864
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views6 pages

CSS Guide for Recipe Page Styling

Uploaded by

pratikraj8864
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CSS - Cascading Style Sheets

web browser
UserAgent Stylesheet every
provides default Css
Types of CSS

Internal External Inline


Dowload
1 zip file
and CSS selectors from class4
2 Open folder copy

3 paste it in your current folder

Descendant Children

grandfather
grandfather

father
town
You
Activity 1: Build a Recipe Page
Use the provided HTML structure using semantic tags that contains:

○ A header with the main title of the recipe.


○ An image of the dish.
○ An ingredients section with a list of ingredients.
○ An instructions section with step-by-step directions.
○ A footer with a closing message.
Activity 1: Style the Recipe Page
Apply the following CSS:

○ Make the heading with text color “darkred” & background


color “floralwhite”
○ Change the text color of all list items inside the ingredients
section to “green”
○ Change the text color of all list items inside the instructions
section to “mediumblue”
○ Make the footer text “italicized” to give it some emphasis.
Output →

You might also like