Quartz 4

Color Vocab Website

5 min read

Metadata

Notes

🌈 CSS Final Project Notes — Spanish Color Vocabulary Flashcards Website

🎯 Project Goal

In this project, you’re building a simple vocabulary website to learn colors in Spanish using images and text.

The focus is not on HTML, but on practicing CSS selectors and rules you’ve learned so far — especially how to:

  • Create and link a CSS file

  • Use different selectors (id, class, element)

  • Apply styles to match content meaning

  • Format and size images

  • Style specific text elements

📁 Initial Setup

✅ Files Provided:

  • index.html → Contains all HTML content (images, headings, IDs, classes)

  • solution.html → A reference version showing the final goal

  • goal.png → A visual reference for how your final site should look

  • (Your task is to create) style.css

⚠️ Key Rule:

👉 DO NOT make any changes in the index.html.
All styling and layout must be done in your style.css.

📝 Step-by-Step Project Breakdown

🧩 Step 1: Create and Link Your CSS File

You need to create a new file in the right location.

  • ✅ Create a file named style.css

  • Make sure the file path in the <link> tag inside the HTML is correct

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

📌 Pro Tip: To verify your CSS is properly linked, add this test rule:

* {
  background-color: red;
}

If the whole page turns red in the browser, your link is working!

🧩 Step 2: Match Text Color with Meaning Using ID Selectors

Each <h2> element (the Spanish color name) has a unique id that corresponds to a color:

Spanish WordMeaning (English)id
RojoRedred
AzulBlueblue
VerdeGreengreen
AmarilloYellowyellow
NaranjaOrangeorange

So we’ll use ID selectors in the CSS:

#red {
  color: red;
}
#blue {
  color: blue;
}
#green {
  color: green;
}
#yellow {
  color: yellow;
}
#orange {
  color: orange;
}

💡 Why use IDs here?
IDs are unique identifiers, and each color word is different — so using ID selectors ensures that each one is styled individually.

🧩 Step 3: Change Font-Weight of Color Titles Using Class Selector

All the <h2> elements that display color names also share a class:

<h2 class="color-title" id="red">Rojo</h2>

Use a class selector to target these color titles and make their font-weight “normal” instead of bold (default for <h2>):

.color-title {
  font-weight: normal;
}

💡 This ensures only the color-name headings are affected, not the main title of the page, which is also an <h2> but doesn’t have the class.

🧩 Step 4: Format Images as Uniform Squares Using Element Selector

The images are currently different sizes. You need to make each image:

  • 200 pixels wide

  • 200 pixels high

Use an element selector for all <img> tags:

img {
  height: 200px;
  width: 200px;
}

💡 This keeps the layout visually clean and easy to scan like proper flashcards.

🧪 Final Output Goals Recap

Your page should now meet these visual and functional goals:

✅ All images are square (200px x 200px)
✅ All color words are styled in their actual color
✅ Color words are not bold, just normal weight
✅ All styling is done entirely via CSS

If it matches the visual layout in goal.png or solution.html, you’ve nailed it!

🔧 Additional Tips & Suggestions

Here are some ways you can take the project further on your own:

🌐 1. Add More Colors

Expand your vocab list — add more colors in Spanish, French, or another language you’re learning.

<h2 class="color-title" id="pink">Rosa</h2>
<img src="images/pink.png" />
#pink {
  color: pink;
}

🎨 2. Add a Hover Effect

Make the images slightly zoom in when hovered, for a more interactive feel:

img:hover {
  transform: scale(1.1);
  transition: 0.3s ease;
}

🧱 3. Add Layout Styling

Center the content or arrange the cards in a grid (we’ll learn this in upcoming sections):

body {
  text-align: center;
}
 
img {
  margin: 10px;
}

📚 What You Practiced

This project helped reinforce:

ConceptDescription
id SelectorTargeting a single, unique element
class SelectorTargeting multiple elements with shared traits
element SelectorTargeting all elements of a certain type
External CSS FileLinking and writing styles in a separate file
CSS Propertiescolor, font-weight, width, height

🎓 Wrap-Up & What’s Next

You’ve now completed your first styled website project using multiple CSS selectors!

This is a major milestone because:

  • You used selectors in a real-world context

  • You created a visually structured site

  • You worked with real images and text

🔜 Coming Up in the Next Section:

You’ll dive deeper into:

  • CSS properties and how to discover and use them

  • Typography, box models, layout techniques

  • Building more complex designs and responsive websites

✅ Final Checklist

Before you move on, make sure you can:

  • ✅ Create and link external CSS

  • ✅ Use id, class, and element selectors

  • ✅ Apply styles like color, font-weight, and size

  • ✅ Inspect and test changes visually in a browser

  • ✅ Recreate a layout from a visual goal (goal.png)

References

Graph View

Backlinks