5.2 Student Activity

  • Create a simple HTML page and apply CSS styling using both inline, internal, and external methods. Change text color and background color using different color formats.

Student Activity:

Create a Simple HTML Page with CSS Styling

  1. Step 1: Create an HTML file (index.html) 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 Lesson 1</title>
  <style>
    /* Internal CSS */
    h1 {
      color: red;
    }
    .content {
      color: green;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS Basics</h1>
  <p class="content">This is a paragraph styled with internal CSS.</p>
  <p id="info">More content styled with an ID selector.</p>
</body>
</html>

  2. Step 2: Add inline CSS to change the text color of the second paragraph:

    <p style="color: blue;">This text is styled using inline CSS.</p>

  3. Step 3: Create an external CSS file (styles.css) and link it to the HTML file:

    body {
  background-color: #f0f0f0;
}
p {
  font-size: 18px;
  color: navy;
}

    Link it to the HTML file:

    <link rel="stylesheet" href="styles.css">

  4. Step 4: Experiment with different color formats. In the internal CSS, change the h1 color to HEX, RGB, or HSL:

    h1 {
  color: #ff0000; /* HEX */
}

  5. Result: Test the webpage in your browser and observe how CSS is applied in different ways (inline, internal, and external). Change the colors and experiment with CSS selectors.

Challenge: Student Activity: Applying CSS Styling with Basic and Advanced Selectors

This activity will guide students through creating an HTML page and applying CSS styles using different selectors (basic and advanced), while also demonstrating the use of inline, internal, and external CSS. Additionally, the activity will explore changing text and background colors using various color formats.

Step 1: Create the HTML File

  1. Open a text editor (e.g., VS Code, Sublime Text) and create a new file called index.html.

  2. Add the following HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Selectors Activity</title>
  <!-- Link to external CSS file -->
  <link rel="stylesheet" href="styles.css">
  <!-- Internal CSS Styling -->
  <style>
    body {
      background-color: #f0f0f0; /* HEX color format */
      font-family: Arial, sans-serif;
    }

    h1 {
      color: rgb(34, 139, 34); /* RGB color format */
    }

    p {
      color: hsl(240, 100%, 50%); /* HSL color format */
      padding: 10px;
    }

    .highlight {
      background-color: #ffeb3b; /* HEX color for background */
    }

    #intro {
      background-color: rgba(0, 0, 255, 0.1); /* RGBA color format */
    }

    div > p {
      font-style: italic;
    }

    .container p:hover {
      color: red;
    }

    a[href$=".pdf"] {
      color: green;
      font-weight: bold;
    }

    .container .box + .box {
      background-color: #e0f7fa;
    }
  </style>
</head>
<body>

  <!-- Inline CSS Styling -->
  <h1 style="color: blue;">Welcome to the CSS Selectors Activity</h1>

  <p id="intro">This activity demonstrates how to use basic and advanced CSS selectors.</p>

  <div class="container">
    <p class="highlight">This paragraph uses a class selector and has a highlighted background.</p>
    <p>This paragraph demonstrates a descendant selector, inheriting italic style from the div.</p>
    <p>This paragraph will change color when hovered over, demonstrating the use of the <code>:hover</code> pseudo-class.</p>

    <div class="box">Box 1</div>
    <div class="box">Box 2 (Styled using adjacent sibling selector)</div>
  </div>

  <a href="example.pdf">Download PDF</a>

</body>
</html>

Step 2: Create the External CSS File

  1. In the same directory as your index.html file, create a new file called styles.css.

  2. Add the following CSS rules to this file:

/* External CSS File: styles.css */
body {
  margin: 20px;
  line-height: 1.6;
}

h1 {
  text-align: center;
}

p::first-letter {
  font-size: 2em;
  color: #ff6347; /* Tomato color */
}

#intro::before {
  content: "👉 ";
  color: #333;
}

#intro::after {
  content: " - Introduction Section";
  color: #888;
}

Step 3: Explanation of CSS Techniques Used

  • Inline CSS: In the <h1> element, inline CSS is used to set the text color directly using the style attribute.

  • Internal CSS: Inside the <style> tags in the <head> section, internal CSS is used to style the body, h1, p, and other elements. It also demonstrates the use of basic selectors (type, class, and ID selectors) and advanced selectors like child selectors (div > p), pseudo-classes (:hover), and attribute selectors (a[href$=".pdf"]).

  • External CSS: The external CSS file (styles.css) includes additional styles applied globally to the page. It showcases pseudo-elements (::before, ::after, and ::first-letter) and also affects the overall body styling.

Step 4: Test and View the HTML Page

  1. Save both the index.html and styles.css files in the same directory.

  2. Open the index.html file in a browser.

  3. Test the page by interacting with it:

    • Hover over the paragraphs to see color changes.

    • Look at the styled first letter in the paragraphs.

    • Notice the different styles applied using the various selectors.

Key CSS Features Demonstrated:

  1. Basic Selectors:

    • Class (.highlight)

    • ID (#intro)

    • Type (h1, p)

  2. Advanced Selectors:

    • Descendant Selector (div p): Selects all <p> elements inside a <div>.

    • Child Selector (div > p): Selects direct children <p> of a <div>.

    • Adjacent Sibling Selector (.box + .box): Selects the next .box sibling after another .box.

    • Pseudo-Class (:hover): Changes the color of a paragraph when it’s hovered over.

    • Pseudo-Elements (::before, ::after, ::first-letter): Adds content before/after elements and styles the first letter of a paragraph.

    • Attribute Selector (a[href$=".pdf"]): Styles all links ending with .pdf.

  3. Color Formats:

    • HEX: #f0f0f0, #ffeb3b

    • RGB: rgb(34, 139, 34)

    • HSL: hsl(240, 100%, 50%)

    • RGBA: rgba(0, 0, 255, 0.1)

This activity provides students with hands-on experience in creating a webpage and applying CSS using a mix of selectors and color formats, along with using inline, internal, and external CSS methods. They will learn how to build a flexible, styled layout using both basic and advanced techniques.

Previous5.1 Introduction to CSS & Basic StylingNext5.3 Homework/Practice

Last updated