Musical Instruments CSS Selector Activity

What you'll learn

In this activity, you will:

• Create and use CSS selectors to style different elements
• Apply CSS classes to organize and style content
• Build a multi-section webpage with consistent styling
• Practice using CSS properties for fonts, colors, and alignment
• Upload and display images and multimedia content

Total Time: 45-60 minutes

Preview

Before You Start

:clipboard: Checklist:

• Watch the tutorial video above
• Have at least 3-4 musical instruments in mind
• Find images for each instrument (or use the ones provided)
• Know basic information about each instrument (type, sound, price if relevant)

:computer: Activity Instruction: Remix this!

:warning: Important Make sure you click the "Clone" button when you open the project to create your own copy!

In this project, you will create a website for Musical Instruments using CSS Selectors to style different sections.

---

:art: Steps to Create Your Musical Instruments Website

Time for this section: 30-40 minutes

Step One: Create Your Website Title (5 minutes)

1. Add a main heading for your website
2. Give it a descriptive title like "World of Musical Instruments" or "My Music Store"
3. Center your heading using CSS

Step 2: Style Your Heading (5 minutes)

1. Use the CSS styling block to customize your heading
2. Change the font, color, and size
3. Add text alignment properties

tip Styling Tip Try using musical colors like gold (#FFD700) for brass instruments or brown (#8B4513) for wooden instruments!

Step 3: Create Instrument Sections (10 minutes)

1. Create a separate section for each musical instrument
2. Use the section block to organize your content
3. Add at least 3-4 different instruments

Step 4: Add Images and Information (10 minutes)

1. Upload an image for each musical instrument
2. Add a paragraph with instrument details:
   • Type of instrument (string, wind, percussion)
   • Price range (if creating a store)
   • Sound description
   • Fun facts

tip Image Tips

• Keep images roughly the same size for consistency
• Use clear, high-quality images
• Name your image files descriptively (e.g., "guitar.png", "piano.jpg")

Step 5: Create CSS Classes (5-10 minutes)

1. Create a unique CSS class for each instrument type
2. Use descriptive class names like:
   • .string-instrument
   • .wind-instrument
   • .percussion-instrument
3. Apply different styles to each class

:warning: Important CSS Class Rules

• Class names should start with a period (.)
• Use lowercase letters and hyphens (no spaces!)
• Apply the class to your instrument sections

Step 6: Add Multimedia (Optional - 5 minutes)

1. Include videos showing how each instrument sounds
2. Add YouTube videos or audio files
3. Make sure videos are appropriately sized

---

:bulb: Tips for Success

• Choose instruments you're familiar with for easier content creation
• Use high-quality instrument images for visual appeal
• Create distinct CSS classes for each instrument category
• Apply consistent styling within each class
• Include sound samples or videos when possible
• Test your CSS selectors to ensure proper styling
• Organize content logically by instrument type or characteristics
• Make your website visually appealing with good color choices

:hammer_and_wrench: Troubleshooting

Common Issues and Solutions:

CSS classes not working?

• Check that your class name starts with a period (.)
• Make sure there are no spaces in your class name
• Verify you've applied the class to the correct element

Images not displaying?

• Ensure you've uploaded the image first
• Check the file name matches exactly (including capitalization)
• Try using smaller image files if they're too large

Styling not applying?

• Make sure your CSS block is connected properly
• Check for typos in property names
• Try refreshing your preview

tip Need Help? If you're stuck, try:

1. Watching the tutorial video again
2. Looking at the example screenshots
3. Starting with just one instrument and getting it perfect before adding more

:emoji:️ Project Submission

Time for submission: 5 minutes

:information_source: Info Submit Your Project When you have completed your "Musical Instruments CSS Selector" project:

1. Test all your CSS classes and styles
2. Make sure all images are displaying correctly
3. Check that your sections are properly organized
4. Submit your project using the link below:

Submit Your Project Here

:warning: Before You Submit :white_check_mark: All instrument sections have CSS classes applied
:white_check_mark: Images are displaying for each instrument
:white_check_mark: Heading is styled with custom CSS
:white_check_mark: At least 3-4 instruments are included
:white_check_mark: Information is provided for each instrument

:tada: Ready to create your musical instruments website? Click the remix link above and start building!