5.3 Homework/Practice

  • Style an HTML page by applying CSS to headings, paragraphs, and a list. Use both ID and class selectors.

Create and Style an HTML Page:

  1. Step 1: Create a basic HTML file with the following structure:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Homework</title>
  <style>
    /* Add your internal CSS here */
  </style>
</head>
<body>
  <h1>My Styled Page</h1>
  <h2>This is a subheading</h2>
  <p>This is a paragraph with some text.</p>
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>
</body>
</html>

  2. Step 2: Apply CSS using both ID and class selectors:

    • Create an external CSS file (homework-styles.css).

    • Add different colors, fonts, and styles to the headings (h1, h2), paragraph, and list items.

    Example external CSS:

    h1 {
  color: rgb(34, 139, 34); /* RGB */
  font-size: 28px;
}
.paragraph {
  color: #333; /* HEX */
  line-height: 1.5;
}
#list-item {
  color: hsl(240, 100%, 50%); /* HSL */
}

  3. Step 3: Test your HTML page in a browser and refine the CSS styles. Ensure that you use ID selectors for specific elements and class selectors for groups of elements.

  4. Challenge: Add a background color to the body, and apply padding and margins to space out the elements on the page.

These activities and homework assignments will help reinforce students' understanding of basic CSS, color formats, and selectors. Students will gain hands-on experience and will be prepared for more advanced CSS topics in the next lesson.

Previous5.2 Student ActivityNextLecture_6_CSS Box Model & Layout Basics

Last updated