{"id":10709,"date":"2026-09-04T05:15:03","date_gmt":"2026-09-04T09:15:03","guid":{"rendered":"https:\/\/fouloistech.info\/ma\/?p=10709"},"modified":"2026-09-04T06:09:08","modified_gmt":"2026-09-04T10:09:08","slug":"cs-discoveries-week-2-09-04-2026-lesson-6","status":"publish","type":"post","link":"https:\/\/fouloistech.info\/ma\/2026\/09\/04\/cs-discoveries-week-2-09-04-2026-lesson-6\/","title":{"rendered":"CS Discoveries Week 2, 09-04-2026, Lesson 6: Styling Text with CSS"},"content":{"rendered":"<h1><span style=\"color: #ff0000;\">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.<\/span><\/h1>\n<ul>\n<li><strong>Objective:<\/strong><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-10604\" src=\"https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2026\/08\/CanvasClass26_CSD1-300x169.png\" alt=\"\" width=\"300\" height=\"169\" srcset=\"https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2026\/08\/CanvasClass26_CSD1-300x169.png 300w, https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2026\/08\/CanvasClass26_CSD1.png 600w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>\n<ol>\n<li>Students will be able to:\n<ol>\n<li>Build a webpage using HTML<\/li>\n<li>Design a webpage based on user needs<\/li>\n<li>Write readable code<\/li>\n<li>Explain the differences between HTML and CSS in both use and syntax.<\/li>\n<li>Link to an external style sheet.<\/li>\n<li>Use CSS selectors to style HTML text elements.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li><strong>11:50-12:00: Start of Class<\/strong>\n<ol>\n<li><strong>W<\/strong><strong>arm-Up: <\/strong>\n<ol>\n<li>In your Google Doc from Week 1, paste the following vocabulary under the heading of \"Vocabulary.\"\n<ul>\n<li><strong>CSS<\/strong> - Cascading Style Sheets; a language used to describe how HTML elements should be styled<\/li>\n<li><strong>CSS Selector<\/strong> - the part of a CSS rule-set that defines which HTML elements the style should be applied to<\/li>\n<\/ul>\n<\/li>\n<li>In your Google Doc from Week 1, paste the following code under the heading of \"<span style=\"color: #0000ff;\">CSS Code<\/span>.\" <span style=\"color: #ff0000;\">NOTE THAT THIS IS NOT HTML CODE!<\/span>\n<ul>\n<li><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/color\"><code class=\"visual-block\">color: value;<\/code><\/a><\/li>\n<li><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/font-family\"><code class=\"visual-block\">font-family: value;<\/code><\/a><\/li>\n<li><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/font-size\"><code class=\"visual-block\">font-size: value;<\/code><\/a><\/li>\n<li><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/text-align\"><code class=\"visual-block\">text-align: value;<\/code><\/a><\/li>\n<li><a href=\"https:\/\/studio.code.org\/docs\/ide\/weblab\/expressions\/Text-Dec\"><code class=\"visual-block\">text-decoration: value;<\/code><\/a><\/li>\n<\/ul>\n<\/li>\n<li>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.<\/li>\n<\/ol>\n<\/li>\n<li><em>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.<\/em><\/li>\n<\/ol>\n<\/li>\n<li><strong>12:00-12:55: Instruction &amp; Student Work<\/strong>\n<ol>\n<li>Lesson 6: Styling Text with CSS\n<ol>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/141TAQACBy112L43H3Epx4FkwQcQNgNCg\/view?usp=drive_link\">This video goes over the steps.<\/a><\/li>\n<li>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:<br \/>\n<table border=\"1\">\n<tbody>\n<tr>\n<td>\n<pre><span style=\"color: #0000ff;\">CSS Selector or Class<\/span> {\r\n     <span style=\"color: #800080;\">element<\/span>: <span style=\"color: #008000;\">value<\/span>;\r\n     <span style=\"color: #800080;\">element<\/span>: <span style=\"color: #008000;\">value<\/span>;\r\n     }<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Here's an example of actual CSS code that would change all bold text (made using &lt;strong&gt; and &lt;\/strong&gt; to be dark red.<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<td>\n<pre><span style=\"color: #0000ff;\">strong<\/span> {\r\n    <span style=\"color: #800080;\">color<\/span>: <span style=\"color: #008000;\">#ba372a<\/span>;\r\n    }<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Mr. Smith will be able to show you more about this in class.<\/p>\n<p>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 <a href=\"https:\/\/editor.method.ac\/\">built into image editors<\/a> or the one built into VSCodium. Code.org's editor also has a color picker that can be used.<\/li>\n<li>Grading Rubric\n<ol>\n<li><strong>5 pts<\/strong>:\u00a0A single HTML file named \"index.html\" and a single CSS file named \"style.css\" have been uploaded to the proper Exit Ticket..<\/li>\n<li><strong>1 pt<\/strong>: Paragraphs are a different <span style=\"color: #ff0000;\">size<\/span> than default <span style=\"color: #ff0000;\">due to style.css code<\/span>.<\/li>\n<li><strong>1 pt<\/strong>: Paragraphs are a different <span style=\"color: #ff0000;\">color<\/span> than default <span style=\"color: #ff0000;\">due to style.css code<\/span>.<\/li>\n<li><strong>3 pts<\/strong>: Code does not have errors.<\/li>\n<li><strong>1 pt Extra Credit:<\/strong> Page <span style=\"color: #ff0000;\">background<\/span> is a different color that still contrasts well with text colors <span style=\"color: #ff0000;\">due to style.css code<\/span>.<\/li>\n<\/ol>\n<\/li>\n<li>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!\n<ol>\n<li>Every time you save your work it's a good idea to refresh your browser window to see how the code renders.<\/li>\n<\/ol>\n<\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/\">Go to Canvas to upload your saved work as Exit Ticket 2.<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li><strong>Deadlines: <\/strong>(Content is subject to change due to various factors including All-Major days and inclement weather days.)\n<ol>\n<li><strong>Week 1 Assignments Due 08-27<\/strong> (2 days) (<a href=\"https:\/\/fouloistech.info\/ma\/2026\/08\/25\/cs-discoveries-week-1-08-25-2026\/\">8\/25<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2026\/08\/27\/cs-discoveries-week-1-08-27-2026\/\">8\/27<\/a>)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 1: Exploring Web Pages &amp; <\/span><span data-sheets-root=\"1\">Lesson 2: Intro to HTML<\/span><\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/1020891\/modules\/items\/48516760\">Week 1 Exit Ticket<\/a><\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 2 Assignments Due 09-04<\/strong> (3 days) (<a href=\"https:\/\/fouloistech.info\/ma\/2026\/08\/31\/cs-discoveries-week-2-08-31-2026\/\">8\/31<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2026\/09\/02\/cs-discoveries-week-2-09-02-2026-lesson-4-digital-footprint\/\">9\/02<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2026\/09\/04\/cs-discoveries-week-2-09-04-2026-lesson-6\/\">9\/04<\/a>)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 3: Headings and Lists<\/span><\/li>\n<li>Lesson 4: Digital Footprint<\/li>\n<li><del>Lesson 5: Mini-Project: HTML Web Page<\/del><\/li>\n<li>Lesson 6: Styling Text with CSS<\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/1020891\/modules\/items\/49111637\">Week 2 Exit Ticket<\/a><\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 3 Assignments Due 09-11<\/strong> (2 days) (<a href=\"https:\/\/fouloistech.info\/ma\/2026\/09\/09\/cs-discoveries-week-3-09-09-2026-lesson-7-intellectual-property\/\">9\/09<\/a>, 9\/10)\n<ol>\n<li>Lesson 7: Intellectual Property<\/li>\n<li>Lesson 8: Using Images &amp;\u00a0Lesson 9: Styling Elements with CSS<\/li>\n<li>Week 3 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 4 Assignments Due 09-18<\/strong> (2 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 11: CSS Classes<\/span><\/li>\n<li><span style=\"color: #ff0000;\">Lesson 10: Mini-Project: Adding Style to a Web Page<\/span><\/li>\n<li>Week 4 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 5 Assignments Due 09-25<\/strong> (2 days)\n<ol>\n<li><span style=\"color: #ff0000;\">Lesson 10: Mini-Project: Adding Style to a Web Page<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 16: Sources and Research<\/span><\/li>\n<li>Week 5 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 6 Assignments Due 10-01<\/strong> (<span style=\"color: #ff0000;\">1 day<\/span>)\n<ol>\n<li><span style=\"color: #ff0000;\">Note: Sept 29 is an All Major Day!<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 12: Organizing Content with Flexbox<\/span><\/li>\n<li>Week 6 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 7 Assignments Due 10-09<\/strong> (3 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 13: Flexbox Children for More Control<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 17: Linking Pages<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 18: CSS Pseudo-classes<\/span><\/li>\n<li>Week 7 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 8 Assignments Due 10-15<\/strong>\u00a0(2 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 19: Planning a Multi-Page Site<\/span><\/li>\n<li><span style=\"color: #ff0000;\" data-sheets-root=\"1\">Lesson 20: Project - Website for a Purpose (begin)<\/span><\/li>\n<li>Week 8 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 9 Assignments Due 10-22<\/strong> (2 days)\n<ol>\n<li><span style=\"color: #ff0000;\" data-sheets-root=\"1\">Lesson 20: Project - Website for a Purpose (finish)<\/span><\/li>\n<li>Week 9 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 10 Assignments Due 10-30<\/strong> (3 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 21: Peer Review<\/span><\/li>\n<li>End of Course Survey<\/li>\n<li>Week 9 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li><strong>12:55-1:05: End of Class<\/strong>\n<ol>\n<li><span style=\"color: #ff0000;\">Save all work and back it up in Google Drive<\/span>, as \"I couldn't access my project\" will not be seen as a valid excuse.<\/li>\n<li>If it's the last A Day of the week, <span style=\"color: #ff0000;\">submit the week's Classwork as an Exit Ticket<\/span>.<\/li>\n<li>Properly <span style=\"color: #ff0000;\">shut down your assigned computer<\/span> and line up, prepared to go to lunch.<\/li>\n<li><em>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.<br \/>\n<\/em><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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: Students will be able to: Build a webpage using HTML Design a webpage based on user needs Write readable code Explain the differences between HTML and CSS in <a href=\"https:\/\/fouloistech.info\/ma\/2026\/09\/04\/cs-discoveries-week-2-09-04-2026-lesson-6\/\" class=\"more-link\">...continue reading<span class=\"screen-reader-text\"> \"CS Discoveries Week 2, 09-04-2026, Lesson 6: Styling Text with CSS\"<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,30],"tags":[],"class_list":["post-10709","post","type-post","status-publish","format-standard","category-csd-smith","category-smith","h-entry","hentry","h-as-article"],"_links":{"self":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/10709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/comments?post=10709"}],"version-history":[{"count":9,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/10709\/revisions"}],"predecessor-version":[{"id":10837,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/10709\/revisions\/10837"}],"wp:attachment":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/media?parent=10709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/categories?post=10709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/tags?post=10709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}