1. CSS Syntax, Selectors, Styles & Colors

Module 1: CSS Syntax & Ruleset Architecture

CSS (Cascading Style Sheets) controls how HTML elements are displayed on screen.

Core Theory & Principles

A CSS ruleset consists of a selector and a declaration block.
Syntax: selector { property: value; }
Declarations are separated by semicolons and wrapped in curly braces.
CSS comments start with /* and end with */.

Practical Key Takeaways

Mastering CSS Syntax & Ruleset Architecture builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - CSS Syntax & Ruleset Architecture

<!DOCTYPE html>
<html>
<head>
<style>
  /* CSS Comment by Instructor */
  body {
    background-color: rgb(15, 23, 42);
    color: rgb(241, 245, 249);
    font-family: sans-serif;
  }
  h1 {
    color: rgb(56, 189, 248);
    text-align: center;
  }
</style>
</head>
<body>
  <h1>CSS Syntax & Ruleset Demo</h1>
  <p>Styled with internal CSS ruleset!</p>
</body>
</html>

📤 Expected Output / Browser Rendered Result:

Output Verified Cleanly.

Module 2: CSS Selectors (Element, Class, ID, Universal)

Selectors are used to target specific HTML elements for styling.

Core Theory & Principles

Element selector targets elements by tag name (h1, p, div).
Class selector targets elements with a specific class attribute (.highlight).
ID selector targets a single unique element with a specific id attribute ([id="header"]).
Universal selector (*) targets all elements on the page.
Grouping selectors combine multiple selectors with commas (h1, h2, h3).

Practical Key Takeaways

Mastering CSS Selectors (Element, Class, ID, Universal) builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - CSS Selectors (Element, Class, ID, Universal)

<!DOCTYPE html>
<html>
<head>
<style>
  .accent-card {
    background: rgb(30, 41, 59);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid rgb(74, 222, 128);
  }
  .text-green {
    color: rgb(74, 222, 128);
  }
</style>
</head>
<body>
  <div class="accent-card">
    <h3 class="text-green">Class Selector (.accent-card)</h3>
    <p>Targeted using CSS class attribute.</p>
  </div>
</body>
</html>

📤 Expected Output / Browser Rendered Result:

Output Verified Cleanly.

Module 3: Three Ways to Insert CSS & Color Models

Inserting styles via External, Internal, or Inline methods.

Core Theory & Principles

External CSS: <link rel="stylesheet" href="styles.css">
Internal CSS: <style> block in the <head> section.
Inline CSS: style="..." attribute directly on an HTML element.
Colors are specified using RGB(r, g, b), RGBA(r, g, b, alpha), or HSL.

Practical Key Takeaways

Mastering Three Ways to Insert CSS & Color Models builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - Three Ways to Insert CSS & Color Models

<div style="background-color: rgba(56, 189, 248, 0.15); color: rgb(56, 189, 248); padding: 15px; border-radius: 8px; border: 1px solid rgba(56, 189, 248, 0.4);">
    <h3 style="margin: 0;">Inline Styled Box with RGBA Transparency</h3>
    <p style="margin: 5px 0 0 0;">Using inline style attribute and rgba(56, 189, 248, 0.15).</p>
</div>

📤 Expected Output / Browser Rendered Result:

Output Verified Cleanly.