Skip to content

CS Discoveries Week 2, 09-04-2026, Lesson 6: Styling Text with CSS

Published on

UPDATE: DUE TO POWER OUTAGES, THIS LESSON WILL INSTEAD BE TAUGHT ON SEPTEMBER 9TH. THE WEEK 2 EXIT TICKET WILL ALSO BE EXTENDED TO THE 9TH.

  • Objective:
    1. Students will be able to:
      1. Build a webpage using HTML
      2. Design a webpage based on user needs
      3. Write readable code
      4. Explain the differences between HTML and CSS in both use and syntax.
      5. Link to an external style sheet.
      6. Use CSS selectors to style HTML text elements.
  • 11:50-12:00: Start of Class
    1. Warm-Up:
      1. In your Google Doc from Week 1, paste the following vocabulary under the heading of "Vocabulary."
        • CSS - Cascading Style Sheets; a language used to describe how HTML elements should be styled
        • CSS Selector - the part of a CSS rule-set that defines which HTML elements the style should be applied to
      2. In your Google Doc from Week 1, paste the following code under the heading of "CSS Code." NOTE THAT THIS IS NOT HTML CODE!
      3. You should have already shared your Google Doc with aaron.smith@pgcps.org so no additional work needs to be done to hand this in.
    2. Warm-Ups are usually a 5 point Independent Work grade if a written response is expected, a 5 point Assessment grade if the Warm-Up is a quiz, or part of a 10 point Notebook Check if they include new vocabulary/code to enter into student notes. They are due at the start of class and not eligible for late submission or re-submission.
  • 12:00-12:55: Instruction & Student Work
    1. Lesson 6: Styling Text with CSS
      1. This video goes over the steps.
      2. You will need to create a new document. We've been using index.html, but now we will need a stylesheet. These are frequently named style.css (the .css part at the end is crucial).CSS code in a stylesheet should be formatted like this:
        CSS Selector or Class {
     element: value;
     element: value;
     }

        Here's an example of actual CSS code that would change all bold text (made using <strong> and </strong> to be dark red.

        strong {
    color: #ba372a;
    }

        Mr. Smith will be able to show you more about this in class.

        If you are trying to find just the right color, you can type in the name of the color for the value OR use a color picker. There's more than one online tool that can be used, though Mr. Smith tends to use the color pickers built into image editors or the one built into VSCodium. Code.org's editor also has a color picker that can be used.

      3. Grading Rubric
        1. 5 pts: A single HTML file named "index.html" and a single CSS file named "style.css" have been uploaded to the proper Exit Ticket..
        2. 1 pt: Paragraphs are a different size than default due to style.css code.
        3. 1 pt: Paragraphs are a different color than default due to style.css code.
        4. 3 pts: Code does not have errors.
        5. 1 pt Extra Credit: Page background is a different color that still contrasts well with text colors due to style.css code.
      4. Frequently save your changes! If you see a dot near the file name at the top of the editor window, you have unsaved changes that will be lost if you close the document!
        1. Every time you save your work it's a good idea to refresh your browser window to see how the code renders.
      5. Go to Canvas to upload your saved work as Exit Ticket 2.
  • Deadlines: (Content is subject to change due to various factors including All-Major days and inclement weather days.)
    1. Week 1 Assignments Due 08-27 (2 days) (8/25, 8/27)
      1. Lesson 1: Exploring Web Pages & Lesson 2: Intro to HTML
      2. Week 1 Exit Ticket
    2. Week 2 Assignments Due 09-04 (3 days) (8/31, 9/02, 9/04)
      1. Lesson 3: Headings and Lists
      2. Lesson 4: Digital Footprint
      3. Lesson 5: Mini-Project: HTML Web Page
      4. Lesson 6: Styling Text with CSS
      5. Week 2 Exit Ticket
    3. Week 3 Assignments Due 09-11 (2 days) (9/09, 9/10)
      1. Lesson 7: Intellectual Property
      2. Lesson 8: Using Images & Lesson 9: Styling Elements with CSS
      3. Week 3 Exit Ticket
    4. Week 4 Assignments Due 09-18 (2 days)
      1. Lesson 11: CSS Classes
      2. Lesson 10: Mini-Project: Adding Style to a Web Page
      3. Week 4 Exit Ticket
    5. Week 5 Assignments Due 09-25 (2 days)
      1. Lesson 10: Mini-Project: Adding Style to a Web Page
      2. Lesson 16: Sources and Research
      3. Week 5 Exit Ticket
    6. Week 6 Assignments Due 10-01 (1 day)
      1. Note: Sept 29 is an All Major Day!
      2. Lesson 12: Organizing Content with Flexbox
      3. Week 6 Exit Ticket
    7. Week 7 Assignments Due 10-09 (3 days)
      1. Lesson 13: Flexbox Children for More Control
      2. Lesson 17: Linking Pages
      3. Lesson 18: CSS Pseudo-classes
      4. Week 7 Exit Ticket
    8. Week 8 Assignments Due 10-15 (2 days)
      1. Lesson 19: Planning a Multi-Page Site
      2. Lesson 20: Project - Website for a Purpose (begin)
      3. Week 8 Exit Ticket
    9. Week 9 Assignments Due 10-22 (2 days)
      1. Lesson 20: Project - Website for a Purpose (finish)
      2. Week 9 Exit Ticket
    10. Week 10 Assignments Due 10-30 (3 days)
      1. Lesson 21: Peer Review
      2. End of Course Survey
      3. Week 9 Exit Ticket
  • 12:55-1:05: End of Class
    1. Save all work and back it up in Google Drive, as "I couldn't access my project" will not be seen as a valid excuse.
    2. If it's the last A Day of the week, submit the week's Classwork as an Exit Ticket.
    3. Properly shut down your assigned computer and line up, prepared to go to lunch.
    4. Exit Tickets are always 10 point Classwork grades and not eligible for late submission. Exit Tickets handed in on time are eligible for re-submission within 10 calendar days of feedback, with old and new grades averaged. (It is always better to hand in as much as possible on time, even if not complete.) Exit Tickets are due during the last 10 minutes of the last class of the week.