Labels

EXERCISE 3 | RECIPE CARD

Back to Top Button ↑
22/10/2025 - 30/10/2025 (Week 5 - Week 6)

LECTURE NOTES

CLICK HERE FOR W2 NOTES. 
CLICK HERE FOR W3 NOTES.

WEEK 5
ID Attribute
  • Every HTML element can have an ID attribute
  • Used to uniquely identify one element from all others on the page
  • No two elements can have the same ID value
  • Allows you to style one specific element differently
  • Example: Style one paragraph differently from all other paragraphs
Class Attribute
  • Every HTML element can have a class attribute
  • Used to identify several elements as being different from others
  • Multiple elements can share the same class name/value
  • Example: Mark certain paragraphs as more important than others
Important Note
  • By default, ID and class attributes don't change appearance
  • They only affect presentation when CSS rules are applied to them
Block vs Inline Elements
Block Elements
  • Always start on a new line in the browser
  • Examples: h1, p, ul, li
Inline Elements
  • Continue on the same line as neighboring elements
  • Examples: b, i, em, a, img
Introduction to CSS (Cascading Style Sheets)
What is CSS?
  • Allows you to create rules that specify how content should appear
  • Examples of what you can control:
    • Background colors (e.g., cream background)
    • Text color and fonts (e.g., gray paragraphs in Arial)
    • Header styles (e.g., blue, italic, Helvetica headers)
CSS Rules Structure
Basic CSS Rule
Selector with declaration block:
  • Selector indicates which element
  • Declaration goes inside curly brackets
  • Format: selector { property: value; }
Two Parts:
  1. Selector - Indicates which element the rule applies to
    • Can apply to multiple elements by separating with commas
  2. Declaration - How the element should be styled
    • Split into property and value, separated by colon
    • Multiple declarations separated by semicolons
Example Structure
  • Multiple selectors: h1, h2, h3
  • Multiple properties in one rule
  • Property: font-family with value: Arial
  • Property: color with value: yellow
Parts Explained:
  • Property: What aspect to change (color, font, width, height, border)
  • Value: The setting you want (e.g., yellow, Arial, 100px)
Methods to Use CSS
1. External CSS (Using link element)
  • Link CSS file in the head element
  • Link element needs three attributes:
    • href: Path to the CSS file
    • type: Should be text/css
    • rel: Should be stylesheet
Advantages:
  • Multiple pages can use the same CSS file
  • Keeps content separate from styling
  • Change all pages by editing one file
Multiple CSS Files:
  • Can use more than one CSS file
  • Example: One for presentation (fonts/colors), one for layout
2. Internal CSS (Using style element)
  • Include CSS rules inside HTML page
  • Place style element inside head element
  • Use type="text/css" attribute
  • Best for single-page sites only

WEEK 6
CSS Selectors - Study Notes
What are CSS Selectors?
  • Fundamental part of CSS that allows you to target and style HTML elements on a web page
  • Used to define which elements should receive specific styles (colors, fonts, spacing, etc.)
  • Crucial for controlling presentation and layout of web pages
Types of CSS Selectors
1. Universal Selector
  • Selects all elements on the page
  • Represented by an asterisk symbol
  • Use with caution - can affect all elements and lead to inefficient CSS
2. Element Selector
  • Simplest type of selector
  • Targets HTML elements by their tag name
  • Example: targets all paragraph elements
3. ID Selector
  • Targets an element with a specific ID attribute
  • IDs must be unique within an HTML document
  • Use a hash symbol followed by the ID name
  • Example: hash symbol followed by my-element
4. Class Selector
  • Targets elements with a specific class attribute
  • Multiple elements can share the same class
  • Use a period or dot symbol followed by the class name
  • Example: dot symbol followed by my-class
5. Descendant Selector
  • Selects an element that is a descendant of another element
  • Can specify a hierarchy of elements to target
  • Example: dot container space a (targets all anchor elements inside a div with class container)
6. Child Selector
  • Selects elements that are direct children of another element
  • Uses the greater-than symbol
  • Example: ul greater-than li (selects only immediate li children of ul)
7. Pseudo-class Selector
  • Selects elements based on their state or position in relation to other elements
  • Common pseudo-classes:
    • hover
    • active
    • visited
    • link
    • focus
    • nth-child
  • Example: a colon hover (styles links when hovered over)
8. Pseudo-element Selector
  • Selects parts of an element rather than the element itself
  • Common pseudo-elements:
    • double colon before (adds content before an element)
    • double colon after (adds content after an element)
  • Example: p double colon before
Why Are There So Many Selectors?
1. Specificity
  • Different situations require different levels of specificity
  • You may want to style a specific element with an ID differently from elements with the same class
  • Various selectors allow you to define the specificity you need
2. Structure
  • Web pages have complex structures with nested elements
  • Selectors like descendant and sibling selectors enable targeting elements within specific structural contexts
3. Attribute-Based Selection
  • Style elements based on their attributes or attribute values
  • Attribute selectors allow targeting like square bracket attribute equals value square bracket
4. Pseudo-Classes and Pseudo-Elements
  • Style elements based on their state or position
  • Examples:
    • Style links differently when hovered over
    • Style the first letter of a paragraph differently
5. Responsive Design
  • Media queries (a type of selector) apply different styles based on device characteristics:
    • Screen size
    • Orientation
    • Resolution
  • Essential for creating responsive web designs
6. Stateful Interactions
  • Selectors like focus, active, checked style elements based on user interactions
  • Examples:
    • Style button differently when clicked (active)
    • Style form elements when in focus (focus)
7. Cross-Browser Compatibility
  • Different browsers may interpret CSS rules differently
  • Variety of selectors allows techniques that work consistently across browsers
8. Ease of Maintenance
  • Certain selectors make CSS easier to maintain
  • Example: Class selectors simplify updating styles consistently for multiple elements
9. Accessibility
  • Properly structured HTML elements can be targeted with CSS selectors
  • Provides styles that enhance readability and usability for individuals with disabilities

EXERCISE 3

INSTRUCTIONS
In this exercise, the task is to create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE recipe from 101 Cookbooks.

TASK
  • Create a HTML file named "index.html".
  • Create a section that displays the following information:
    • Recipe title
    • Necessary Images for the page
    • List of ingredients
    • Step-by-step cooking instructions
  • Apply the style element in document.
  • Apply CSS rules to style the recipe card.
  • USE CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
Link to Original Recipe : Shaker Apple Pie
Link to Netlify : Exercise 3

Fig 1.1 Full Code PDF

<<  Exercise 2                                                                                        Project 1  >>