RaspberryPiFoundation · rpbourret · Nov 26, 2025 · Dec 1, 2025 · Dec 4, 2025 · Dec 4, 2025
diff --git a/codelabs/css/blocks-arrow-right.png b/codelabs/css/blocks-arrow-right.png
diff --git a/codelabs/css/blocks-arrow-wrong.png b/codelabs/css/blocks-arrow-wrong.png
diff --git a/codelabs/css/blocks-disabled-right.png b/codelabs/css/blocks-disabled-right.png
diff --git a/codelabs/css/blocks-disabled-wrong.png b/codelabs/css/blocks-disabled-wrong.png
diff --git a/codelabs/css/blocks-logic.png b/codelabs/css/blocks-logic.png
diff --git a/codelabs/css/blocks-loops.png b/codelabs/css/blocks-loops.png
diff --git a/codelabs/css/categories-halloween.png b/codelabs/css/categories-halloween.png
diff --git a/codelabs/css/categories-logic.png b/codelabs/css/categories-logic.png
diff --git a/codelabs/css/components-halloween.png b/codelabs/css/components-halloween.png
diff --git a/codelabs/css/components-mutator.png b/codelabs/css/components-mutator.png
diff --git a/codelabs/css/components-workspace.png b/codelabs/css/components-workspace.png
diff --git a/codelabs/css/css.md b/codelabs/css/css.md
diff --git a/codelabs/css/setup-starter.png b/codelabs/css/setup-starter.png
diff --git a/codelabs/css/tour-dev-tools.png b/codelabs/css/tour-dev-tools.png
diff --git a/eslint.config.js b/eslint.config.js
@@ -26,6 +26,7 @@ module.exports = [
       'examples/blockly-rtc',
       'examples/blockly-vue3',
       'examples/context-menu-codelab',
+      'examples/css-codelab',
       'examples/custom-dialogs-demo',
       'examples/custom-toolbox-codelab',
       'examples/devsite-demo',

diff --git a/examples/css-codelab/complete-code/halloween.css b/examples/css-codelab/complete-code/halloween.css
@@ -0,0 +1,184 @@
+/**************/
+/* COMPONENTS */
+/**************/
+
+.blocklySvg {
+  background-color: #ff7518;
+}
+
+.blocklyMutatorBackground {
+  fill: #ff7518;
+}
+
+.blocklyToolbox {
+  background-color: #f9c10e;
+  color: #fff;
+}
+
+.blocklyFlyoutBackground {
+  fill: #252526;
+  fill-opacity: 1;
+}
+
+.blocklyFlyoutLabel > .blocklyFlyoutLabelText {
+  fill: #ccc !important;
+}
+
+.blocklyFlyoutButton > .blocklyText {
+  fill: #ccc !important;
+}
+
+.blocklyScrollbarHandle {
+  fill: #ff0000;
+  fill-opacity: 0.4;
+}
+
+.blocklyInsertionMarker > .blocklyPath {
+  fill: #fff !important;
+  fill-opacity: 0.3 !important;
+  stroke: none;
+}
+
+/**************/
+/* CATEGORIES */
+/**************/
+
+.logic_category {
+  border-left: 8px solid #8b4513;
+}
+
+.logic_category.blocklyToolboxSelected {
+  background-color: #8b4513 !important;
+}
+
+.loop_category {
+  border-left: 8px solid #85e21f;
+}
+
+.loop_category.blocklyToolboxSelected {
+  background-color: #85e21f !important;
+}
+
+.math_category {
+  border-left: 8px solid #5b67a5;
+}
+
+.math_category.blocklyToolboxSelected {
+  background-color: #5b67a5 !important;
+}
+
+.text_category {
+  border-left: 8px solid #fe9b13;
+}
+
+.text_category.blocklyToolboxSelected {
+  background-color: #fe9b13 !important;
+}
+
+.list_category {
+  border-left: 8px solid #4a148c;
+}
+
+.list_category.blocklyToolboxSelected {
+  background-color: #4a148c !important;
+}
+
+.variable_category {
+  border-left: 8px solid #a55b80;
+}
+
+.variable_category.blocklyToolboxSelected {
+  background-color: #a55b80 !important;
+}
+
+.procedure_category {
+  border-left: 8px solid #b88cc0;
+}
+
+.procedure_category.blocklyToolboxSelected {
+  background-color: #b88cc0 !important;
+}
+
+/**********/
+/* BLOCKS */
+/**********/
+
+/* LOGIC BLOCKS */
+
+.logic_blocks:not(.blocklyDisabledPattern) > .blocklyPath {
+  fill: #8b4513;
+  stroke: #c5eaff;
+}
+
+.logic_blocks:not(.blocklyDisabledPattern).blocklyShadow > .blocklyPath {
+  fill: #ff0000;
+  stroke: none;
+}
+
+.logic_blocks > .blocklyDropdownField .blocklyDropdownText tspan {
+  fill: #8b4513 !important;
+}
+
+.logic_blocks.blocklyShadow > .blocklyDropdownField .blocklyDropdownText tspan {
+  fill: #ff0000 !important;
+}
+
+/* LOOP BLOCKS */
+
+.loop_blocks:not(.blocklyDisabledPattern) > .blocklyPath {
+  fill: #85e21f;
+  stroke: #c5eaff;
+}
+
+.loop_blocks:not(.blocklyDisabledPattern).blocklyShadow > .blocklyPath {
+  fill: #ff0000;
+  stroke: none;
+}
+
+.loop_blocks > .blocklyDropdownField .blocklyDropdownText tspan {
+  fill: #85e21f !important;
+}
+
+.loop_blocks.blocklyShadow > .blocklyDropdownField .blocklyDropdownText tspan {
+  fill: #ff0000 !important;
+}
+
+/* TEXT BLOCKS */
+
+.text_blocks:not(.blocklyDisabledPattern) > .blocklyPath {
+  fill: #fe9b13;
+  stroke: #c5eaff;
+}
+
+.text_blocks:not(.blocklyDisabledPattern).blocklyShadow > .blocklyPath {
+  fill: #ff0000;
+  stroke: none;
+}
+
+.text_blocks > .blocklyDropdownField .blocklyDropdownText tspan {
+  fill: #fe9b13 !important;
+}
+
+.text_blocks.blocklyShadow > .blocklyDropdownField .blocklyDropdownText tspan {
+  fill: #ff0000 !important;
+}
+
+/* LIST BLOCKS */
+
+.list_blocks:not(.blocklyDisabledPattern) > .blocklyPath {
+  fill: #4a148c;
+  stroke: #cdb6e9;
+}
+
+.list_blocks:not(.blocklyDisabledPattern).blocklyShadow > .blocklyPath {
+  fill: #ad7be9;
+  stroke: none;
+}
+
+.list_blocks > .blocklyDropdownField .blocklyDropdownText tspan {
+  fill: #4a148c !important;
+}
+
+.list_blocks.blocklyShadow > .blocklyDropdownField .blocklyDropdownText tspan {
+  fill: #ad7be9 !important;
+}
diff --git a/examples/css-codelab/complete-code/index.html b/examples/css-codelab/complete-code/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>CSS Codelab</title>
+    <script src="https://unpkg.com/blockly/blockly.min.js"></script>
+    <script src="./toolbox.js"></script>
+    <script src="./index.js"></script>
+    <link rel="stylesheet" href="halloween.css" />
+
+    <style>
+      html,
+      body {
+        height: 100%;
+      }
+
+      body {
+        background-color: #fff;
+        font-family: sans-serif;
+        overflow: hidden;
+      }
+
+      h1 {
+        font-weight: normal;
+        font-size: 140%;
+        margin: 10px;
+      }
+
+      #blocklyDiv {
+        float: bottom;
+        height: 90%;
+        width: 100%;
+      }
+    </style>
+  </head>
+
+  <body onload="start()">
+    <h1>CSS Codelab</h1>
+    <div id="blocklyDiv"></div>
+  </body>
+</html>
diff --git a/examples/css-codelab/complete-code/index.js b/examples/css-codelab/complete-code/index.js
@@ -0,0 +1,11 @@
+'use strict';
+
+let workspace = null;
+
+function start() {
+  // Create main workspace.
+  workspace = Blockly.inject('blocklyDiv', {
+    toolbox: toolboxCategories,
+    renderer: 'thrasos',
+  });
+}