AI Assisted CSS Styling

Instructions

First, look at the CSS selectors in the <style> tag of this page, and make sure you understand each of them.
Use AI to style the book list below.
Have the AI generate at least 3 different versions of the styled book list:
- Make sure to include the HTML code for the book list in your prompt, so that the AI can understand how the content is structured.
- To get different versions of the list, alter the prompt you enter (for example you might tell the AI to make one version "fancy", another version "minimalist", and another version "colorful").
- You may want to tell the AI to keep the CSS somewhat simple so you can understand it.
- Make sure to review the CSS code that AI generates, to help you learn CSS.
- You should ask the AI questions about the CSS it generates (you could tell it that you're a student in a Web Programming class).
- Make sure to create at least one version that uses 'cards'
After experimenting with AI:
1. Choose one version of the AI generated lists and apply the CSS to the book list on this page, but make sure that your CSS only affects the book list and not other elements on the page.
2. Answer the question under the list.

What are 3 things you learned about CSS from doing this activity? Replace the content in the LI elements below with your answer.

I learned how CSS class selectors can be used to style specific elements without affecting everything else.
I learned how layout properties like display: flex, padding, and box-shadow can be used to create card-style designs.
I learned how pseudo-classes like "":hover" allow styles to change based on user interaction.