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.

AI can be a useful coding tool as long as you are specific enough when prompting it.
CSS selectors like .book-list li let you target elements inside a section without affecting the rest of the page.
Spacing and readability usually come from small CSS properties like margin, padding, line-height, and border-radius, not “complicated” CSS