Simple coding exercise for checking understanding of CSS selectors and box model.
You are tasked with styling a simple HTML page using CSS. The HTML page contains a header section, a main section with a list of items, and a footer section. Your task is to apply different styles to the elements using CSS selectors and the box model.
- Add your styles to the provided index.html.
- Use class selectors to style the header, main, and footer sections with different background colors.
- Use tag selectors to style the heading, list items, and paragraphs with different font sizes and colors.
- Use ID selectors to style the first list item with a border and a different font color.
- Use pseudo-class selectors to style the links in the header and footer sections with different hover effects.
- Use pseudo-element selectors to style the first letter of each paragraph in the main section with a larger font size and a different color.
- Use the box model to add padding and margin to the different sections and elements to create spacing and alignment.
- Use the CSS background-color, font-size, color, border, padding, margin, and text-decoration properties to apply styles to the elements.
- Use the :hover pseudo-class selector to apply styles to the links on hover.
- Use the ::first-letter pseudo-element selector to apply styles to the first letter of each paragraph.
- Use the #first-item ID selector to apply styles to the first list item.