{"id":9309,"date":"2025-12-10T05:30:59","date_gmt":"2025-12-10T10:30:59","guid":{"rendered":"https:\/\/fouloistech.info\/ma\/?p=9309"},"modified":"2025-12-10T09:01:40","modified_gmt":"2025-12-10T14:01:40","slug":"cs-discoveries-12-10-2025-lesson-11-css-classes","status":"publish","type":"post","link":"https:\/\/fouloistech.info\/ma\/2025\/12\/10\/cs-discoveries-12-10-2025-lesson-11-css-classes\/","title":{"rendered":"CS Discoveries, 12-10-2025, Lesson 11: CSS Classes"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-8130\" src=\"https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2025\/08\/CanvasClass25_CSD2-300x169.png\" alt=\"\" width=\"300\" height=\"169\" srcset=\"https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2025\/08\/CanvasClass25_CSD2-300x169.png 300w, https:\/\/fouloistech.info\/ma\/wp-content\/uploads\/2025\/08\/CanvasClass25_CSD2.png 600w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><a href=\"https:\/\/drive.google.com\/file\/d\/1ABOYGvH-ZDewhXODWKWc246d37_tKGt_\/view?usp=drive_link\">THIS VIDEO REVIEWS THE MOST IMPORTANT CONTENT COVERED IN CLASS TODAY!<\/a><\/p>\n<ol>\n<li><a href=\"https:\/\/docs.google.com\/document\/d\/1WPngW-MrHqEVFQg_sDGYDdpxRO1RZYt7QtT1RCJblfg\/edit?usp=sharing\">TODAY'S MODIFIED SCHEDULE<\/a><\/li>\n<li><strong>Objective:<\/strong>\n<ul>\n<li>Students will add classes to their websites to better customize their CSS code.<\/li>\n<\/ul>\n<\/li>\n<li><strong>W<\/strong><strong>arm-Up:<\/strong>\n<ol>\n<li>Add the following vocabulary to your notes:\n<ul>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/1KuGv9v91lGFLjQ5stnkmk0ZW82WRsCag\/view\"><strong>CSS Class<\/strong><\/a> - An identifier that allows multiple elements in an HTML document to be styled in the same way<\/li>\n<\/ul>\n<\/li>\n<li><em>Warm-Ups are usually a 5 point Independent Work grade if a written response is expected, or a 5 point Assessment grade if the Warm-Up is a quiz. 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>Computer Setup<\/strong>\n<ol>\n<li>There is a lot of useful software on the lab computers, but today we will only be covering the most relevant ones for this class.\n<ol>\n<li>Firefox<\/li>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/1XIsACnyeOd6HZ95pyYfwgXXecLT8IMgD\/view?usp=sharing\">VS Codium<\/a><\/li>\n<li><a href=\"https:\/\/clever.com\/oauth\/authorize?channel=clever&amp;client_id=4c63c1cf623dce82caac&amp;confirmed=true&amp;district_id=5238c83b5cd6af6a6300156a&amp;redirect_uri=https%3A%2F%2Fclever.com%2Fin%2Fauth_callback&amp;response_type=code&amp;state=5a8aa0dc345e2ac00eb717d9bc5a417afd752343b29364af3ae72acf3dcdff12\">Code.org<\/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>Warm-Ups: Due daily<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 6 Assignments Due\u00a012-12<\/strong>\u00a0(2 days)\n<ol>\n<li><span style=\"color: #ff0000;\">12-08 is an All Major Day<\/span><\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/961716\/assignments\/17934305\"><span data-sheets-root=\"1\">Lesson 11: CSS Classes<\/span><\/a>\n<ol>\n<li>Grading Rubric:\n<ol>\n<li><strong>6 pts<\/strong>: Screenshots uploaded showing code on one side and how the code looks in a web browser on the other side. One screenshot should show the HTML code while the other should show the CSS code.<\/li>\n<li><strong>1 pt<\/strong>: Webpage uses a properly formatted CSS class rule set in style.css.<\/li>\n<li><strong>1 pt<\/strong>: Created CSS class modifies <span style=\"color: #ff0000;\">three different tags<\/span> in the HTML document by selective inclusion of the class=\"classname\" code inside selected HTML tags. (Use the sample website in Code.org as an example.)<\/li>\n<li><strong>1 pt<\/strong>: The three different tags are all part of the same section of the web page.<\/li>\n<li><strong>1 pt<\/strong>: Other sections of the web page are not modified by the CSS class.<\/li>\n<li><strong>-10 pts:<\/strong> Any screenshot includes an image that was <strong>not used with permission<\/strong>. (A missing citation = a missing grade.)<\/li>\n<\/ol>\n<\/li>\n<li>Permitted image sources (provided a citation is included):\n<ul>\n<li><a href=\"https:\/\/openclipart.org\/\" target=\"_blank\" rel=\"noopener\">OpenClipArt.org<\/a><\/li>\n<li><a href=\"http:\/\/www.pics4learning.com\/\" target=\"_blank\" rel=\"noopener\">Pics4Learning<\/a><\/li>\n<li><a href=\"https:\/\/publicdomainvectors.org\/\" target=\"_blank\" rel=\"noopener\">PublicDomainVectors.org<\/a><\/li>\n<li><a href=\"https:\/\/unsplash.com\/\" target=\"_blank\" rel=\"noopener\">Unsplash<\/a><\/li>\n<li><a href=\"https:\/\/commons.wikimedia.org\/wiki\/Main_Page\" target=\"_blank\" rel=\"noopener\">Wikimedia Commons<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<li><span data-sheets-root=\"1\">Lesson 16: Sources and Research<\/span><\/li>\n<li><a href=\"https:\/\/pgcps.instructure.com\/courses\/961716\/assignments\/17934366\">Week 6 Exit Ticket<\/a><\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 7 Assignments Due\u00a012-18<\/strong>\u00a0(2 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 12: Organizing Content with Flexbox<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 13: Flexbox Children for More Control<\/span><\/li>\n<li>Week 7 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 8 Assignments Due 01-09<\/strong> (3 days)\n<ol>\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 8 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 9 Assignments Due\u00a001-15<\/strong> (2 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 19: Planning a Multi-Page Site<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 20: Project - Website for a Purpose (begin)<br \/>\n<\/span><\/li>\n<li>Week 9 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 10 Assignments\u00a0Due 01-23<\/strong>\u00a0(2 days)\n<ol>\n<li><span data-sheets-root=\"1\">Lesson 20: Project - Website for a Purpose (finish)<\/span><\/li>\n<li><span data-sheets-root=\"1\">Lesson 21: Peer Review<\/span><\/li>\n<li>Week 9 Exit Ticket<\/li>\n<\/ol>\n<\/li>\n<li><strong>Week 11 Assignments\u00a0Due 01-26<\/strong>\u00a0(1 day)\n<ol>\n<li>End of Course Survey<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<ul>\n<li><strong>Exit Tickets<\/strong>\n<ol>\n<li>Exit Tickets \"go live\" during the last 10 minutes of our last class of the week, except when we only meet once during that week, it's the last week of the Quarter, or Mr. Smith screwed up.<\/li>\n<li>Scroll up for the information for this week to see the link to the Exit Ticket.<\/li>\n<li>\n<table border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 10%;\">4 pts<\/td>\n<td style=\"width: 90%;\">Proofread your work.<\/td>\n<\/tr>\n<tr>\n<td>3 pts<\/td>\n<td>What did you accomplish in CS Discoveries this week?<\/td>\n<\/tr>\n<tr>\n<td>3 pts<\/td>\n<td>What did you learn in CS Discoveries this week?<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<li>NOTE: If you do not describe WHAT you did, saying you worked on it is not enough information to earn credit.\n<ol>\n<li><span style=\"color: #ff0000;\">Bad Example<\/span>: \"I completed Unit 2 Lesson 1\" says nothing about what you did or learned. Describe what you did and what you learned as if to someone who does not have access to the course materials.<\/li>\n<\/ol>\n<\/li>\n<li><em>Exit Tickets are always 10 point Classwork grades and not eligible for late submission or re-submission. They 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<p>Previous Lessons: <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/04\/cs-discoveries-11-04-2025-week-1\/\">11\/04<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/06\/cs-discoveries-11-06-2025-intro-to-html\/\">11\/06<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/10\/cs-discoveries-11-10-2025-lesson-3-headings-and-lists\/\">11\/10<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/13\/cs-discoveries-11-13-2025-lesson-4-digital-footprint\/\">11\/13<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/17\/cs-discoveries-11-17-2025-lesson-6-styling-text-with-css\/\">11\/17<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/19\/cs-discoveries-11-19-2025-lesson-5-mini-project-html-web-page\/\">11\/19<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/21\/cs-discoveries-11-21-2025-lesson-7-intellectual-property\/\">11\/21<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/11\/25\/cs-discoveries-11-25-2025-lesson-7-intellectual-property\/\">11\/25<\/a>, <a href=\"https:\/\/fouloistech.info\/ma\/2025\/12\/02\/cs-discoveries-12-02-2025-to-12-04-2025-lesson-10-mini-project-adding-style-to-a-web-page\/\">12\/02 &amp; 12\/04<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>THIS VIDEO REVIEWS THE MOST IMPORTANT CONTENT COVERED IN CLASS TODAY! TODAY'S MODIFIED SCHEDULE Objective: Students will add classes to their websites to better customize their CSS code. Warm-Up: Add the following vocabulary to your notes: CSS Class - An identifier that allows multiple elements in an HTML document to be styled in the same <a href=\"https:\/\/fouloistech.info\/ma\/2025\/12\/10\/cs-discoveries-12-10-2025-lesson-11-css-classes\/\" class=\"more-link\">...continue reading<span class=\"screen-reader-text\"> \"CS Discoveries, 12-10-2025, Lesson 11: CSS Classes\"<\/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-9309","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\/9309","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=9309"}],"version-history":[{"count":4,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/9309\/revisions"}],"predecessor-version":[{"id":9361,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/posts\/9309\/revisions\/9361"}],"wp:attachment":[{"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/media?parent=9309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/categories?post=9309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fouloistech.info\/ma\/wp-json\/wp\/v2\/tags?post=9309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}