Interactive Design - Exercise 3

日期：

 6/10/2025 - 12 /10/2025 / Week 6

YANG SHUO / 0384037

Bachelor of Design (Hons) in Creative Media

Interactive Design / Exercise 3

LIST

LECTURE

CSS Selector

1. Definition

CSS selectors target HTML elements (like <p>, <div>, <h1>) to apply styles such as color, font, and spacing. They are essential for controlling a webpage’s appearance and layout.

2. Main Types
  • Universal Selector – Selects all elements (<body>, <h1>, <p>). Use carefully.
  • Element Selector – Selects by tag name, e.g. <p>, <h1>, <ul>.
  • ID Selector – Selects elements with a unique id, e.g. <div id="header">.
  • Class Selector – Selects elements with the same class, e.g. <div class="menu">.
  • Descendant Selector – Targets nested elements, such as <a> inside <div class="container">.
  • Child Selector – Targets direct children like <ul> → <li>.
  • Pseudo-class Selector – Targets states like hover, focus, visited, etc. (e.g. links <a>).
  • Pseudo-element Selector – Targets part of an element, like the first letter or before/after content.

3. Why So Many Selectors
  • Specificity – Different selectors offer different precision levels.
  • Structure – Handles nested HTML hierarchy (<nav> → <ul> → <li>).
  • Attribute Selection – Targets based on element attributes, e.g. <input type="text">.
  • Pseudo Classes & Elements – Style based on state or content section.
  • Responsive Design – Media queries adjust layout for devices (<div>, <img>).
  • Stateful Interaction – Reacts to user actions (clicks, focus).
  • Cross-Browser Compatibility – Ensures consistent style across browsers.
  • Ease of Maintenance – Clear structure makes editing easier.
  • Accessibility – Enhances readability and usability with semantic HTML.

4. Summary

CSS selectors are the foundation of web styling.
Using IDs, classes, and element types allows precise, flexible, and maintainable design across <body>, <h1>, <ul>, and <a> elements.

 

INSTRUCTION



EXERCISE

- Creating a Recipe Card

In this exercise, I used HTML and CSS to create a simple recipe card webpage that includes a recipe title, image, ingredient list, and step-by-step instructions. By applying element selectors (e.g. body, h1, ul), class selectors (e.g. .recipe-title, .ingredient-list), and ID selectors (e.g. #instructions), I styled different sections of the page to make the layout clear, attractive, and easy to read.


In the layout section, I additionally added styles to arrange images and text side by side. The tutorial is from W3School.

Final presentation results: https://exercise-3-recipecard.netlify.app/


REFLECTION

Strengths:
At first, I could only follow examples without really understanding what each line of code did. Later, I used some learning websites and finally figured out how class and ID work, how to adjust spacing with margin and padding, and how to align text and images properly.

Weaknesses:
I still make small mistakes, like forgetting symbols or mixing up selectors, which sometimes mess up the layout.

Reflection:
This exercise showed me that understanding the logic behind the code is more important than just copying it. Once I really learned how CSS works, designing became much easier and more enjoyable. I’ll keep using online resources to strengthen my coding skills.

评论

发表评论