Primp a List!

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:

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.
Answer the question under the list.

Books

This book is about a young wizard, and his young wizard friends.

This book is about a young person who goes on the road and has many wild adventures.

This book has the saddest ending imaginable. It made me cry!

Question

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

One thing I learned today was during Tage's class that I used for this assignment was how to use AI. I learned how to give the prompt more details so that way I can get a better response with well details so that way it's not a short and simple response.
Another thing I learned about CSS is how complex it can be. I can now understand why programmers like to use AI now with CSS. I already knew it could be hard, but that was with the basics that I learned last semester. Now seeing all this and how you can add things on top of things, it can get confusing and messy real fast.
The last thing that I learned about CSS is how selectors work to choose specific parts of a page. We already know that we can style multiple things but the way you can style any is so complex. For an example, you're able to style a list to how you like it but then you can style something that is nested within that to another style, and then you can style another element nested within that into another. It's all so cool but also messy.

AI Assisted CSS Styling