https://docs.google.com/document/d/1WOeqn5lgM1qsobvQXjNYeoUbBmdbBRaDi2D5j98muP0/edit?usp=sharing

Discussion Week Four Instructions Set Up If you have any questions regarding these steps, please come to office hours! Download code from this week's discussion repo Place in your 539 folder Open the files in Visual Studio Code Part One: Add Classes Classes allow you to style specific sections differently In your pastries.html, add classes to two different divs or sections Add class="special" to one section Add class="highlight" to another section Part Two: Box Model Practice For HW2, you need to control margins, padding, and borders on specific sides In your style.css, style the .special class: Add a background color (use 6-digit hex value like #FF6B6B) Add left margin only: margin-left: 50px; Add top and left padding: padding-top: 15px; and padding-left: 15px; Add borders on specific sides: border-left: 5px solid #FFFFFF; and border-bottom: 2px solid #FFFFFF; Style the .highlight class: Add a different background color (6-digit hex) Add right margin only: margin-right: 50px; Add border-radius: border-radius: 10px; Part Three: Pseudo-Classes Pseudo-classes let you style elements based on their state or position :hover - Style on mouse over Make your navigation links change color when hovering Try making your h2 headings change color on hover :focus - Style for keyboard navigation (accessibility!) Add focus styles to your links: outline: 3px solid #FFD700; Test it: Press Tab on your page and watch the focus move between links :last-child - Style the last element Make the last item in your navigation look different Or make the last paragraph in a section stand out Tip - If you don't know how to do something, Google is your friend! Part Four: Inspect Element Use browser tools to see how the box model works Open your Live Server Right-click on your .special div and select "Inspect" or "Inspect Element" Look at the box model diagram - see the margins, padding, and borders Hover over your links - watch the styles change in the Styles panel Press Tab key to navigate - see :focus styles activate Part Five: Submission Take a screenshot of Inspect Element open on your live server Make sure we can see both: Your styled pastries page The Inspect Element panel showing the box model Submit your screenshot to Canvas before the end of discussion Comment the word of the day in Canvas