CSS Essentials and Specificity 🚀

Introduction

• Warm welcome: "Good morning/afternoon no matter where you're from."
• Engagement: Fun question to start - "Would you rather invent a new gadget or discover a new species?"
• Topic: Focus on learning CSS tonight.
• Technical Issues: Glitch app issues due to high traffic, homework submission postponed.
• Class Continuity: Encouragement to continue even if behind, access to 'ketchup crew' on Discord.

Software Engineering Bootcamp

• Program Length: 30 weeks detailed learning path (HTML, CSS, JavaScript, Node, React).
• Alumni Success: Many found satisfying jobs and higher happiness.

Today's Agenda

1. Initial Questions: General questions for settling.
2. Spaced Repetition: Review of client-server concepts.
3. Progressive Enhancement: Core content importance.
4. CSS Fundamentals: From basics to advanced topics.
5. Selectors and Specificity: Detailed breakdown, parent-child selectors, specificity importance.
6. Lab Time: Build your first site with HTML and CSS.
7. End Early: Allow time for lab work.

Key CSS Concepts

Emphasis on Organization

• Golden Rule: Separation of concerns - HTML for content, CSS for style, JavaScript for behavior.
• Importance: Organizes code, easier collaboration and maintenance.

Basic CSS Structure

**CSS Location: **

• Recommended in a separate file for separation of concerns.
• Linking: Use a link tag in the head of HTML to connect CSS.

**Inline Styles: **

• Usage: Only in HTML emails due to limitations in external styles.
• Special Cases: Critical path CSS for performance considerations (e.g., Amazon).

Writing CSS

**Syntax: **

• Rule Components: Selectors, Declaration Blocks, Declarations, Properties, Values.
• Example:

  p {
      color: red;
      font-weight: bold;
  }
  

• Terminology: Importance of using correct terms (e.g., rule, selector, declaration block, etc.).

**Cascade: **

• Definition: What comes above can be overwritten by what comes below.
• Impact: Same level overrides, specificity rules.

Basic Properties

**Color: **

• Methods: Keywords (red, blue), hexadecimal, RGB, HSLA.

**Font: **

• Loading Fonts: Using Google Fonts and syntax for including font links.
• **Example: **

  <link href="path-to-google-font" rel="stylesheet">
  

Practice Exercise

Task: Style HTML Elements

• Materials: Provided in class.
• CSS Tasks: Color, font-size, borders, etc.
• **Example: **

  h1 {
      color: blue;
      text-decoration: underline;
      background-color: gold;
  }
  

Advanced CSS Concepts

Relationship Selectors

• **Types: **
  • Parent-Child: Direct (e.g., parent > child), General (e.g., parent child).
  • Sibling: Direct (e.g., element + element).

Specificity Principles

• Points System: Tags (1 point), Classes (10 points), IDs (100 points), Inline & Important (1000 points).
• Impact on Cascade: More specific rules override less specific ones.
• **Example: **

  #id { color: red; } /* 100 points */
  .class { color: blue; } /* 10 points */
  element { color: green; } /* 1 point */
  

Practical Exercise

Exercise: Relationship Selectors

1. Tasks: Practice targeting elements based on their relationships (parent-child, siblings).
2. **Example: **

   <section>
       <p>Paragraph in section</p>
   </section>
   <article>
       <p>Paragraph in article</p>
   </article>
   

   section > p { color: red; } /* Direct child */
   section p { color: blue; } /* General Descendant */
   article + p { color: green; } /* Direct Sibling */
   

Homework and Lab

**Tasks Due Next Thursday: **

1. Lab: Create a simple site as per given example image, using CSS skills learned (no classes or IDs yet).
2. Learn Layout: Complete reading and understanding the layout concepts.

Closing Remarks

Encouragement: Continue practicing and exploring CSS. Upcoming: Deeper dive into CSS specifics and enhancements. Support: Accessible during office hours for additional help or questions.

**End Note: **

• Raid: Spreading community love and positivity via a Twitch raid.

Motivation: Reflecting on Dr. Black’s mentorship and inspiration.