# Lesson 1: Introduction to CSS *Duration: 45 minutes | Difficulty: Beginner | Prerequisites: Basic HTML knowledge* ## 📋 Learning Objectives By the end of this lesson, you will be able to: - [ ] Define CSS and explain its purpose in web development - [ ] Identify the three methods of applying CSS to HTML - [ ] Write basic CSS rules using proper syntax - [ ] Understand the cascade and specificity concepts - [ ] Apply inline, internal, and external CSS to HTML documents ## 🎯 Key Concepts ### What is CSS? **CSS (Cascading Style Sheets)** is a stylesheet language used to describe the presentation of HTML documents. While HTML provides the structure and content, CSS controls the visual appearance, layout, colors, fonts, and overall design. ### Why Use CSS? - **Separation of Concerns**: Keep content (HTML) separate from presentation (CSS) - **Consistency**: Apply consistent styling across multiple pages - **Maintainability**: Change the entire site's appearance by modifying CSS files - **Flexibility**: Create responsive designs that work on different devices - **Performance**: Reduce code duplication and improve loading times ### CSS Syntax ```css selector { property: value; property: value; } ``` **Example:** ```css h1 { color: blue; font-size: 24px; text-align: center; } ``` ## 🔧 Three Methods of Applying CSS ### 1. Inline CSS Applied directly to HTML elements using the `style` attribute. ```html

This is red text.

``` **Pros:** Quick for single-element styling **Cons:** Not reusable, hard to maintain, mixes content with presentation ### 2. Internal CSS Defined within `

This paragraph will be green.

``` **Pros:** Affects entire document, better than inline **Cons:** Only applies to one HTML file ### 3. External CSS (Recommended) CSS rules stored in separate `.css` files and linked to HTML documents. **HTML file:** ```html

This paragraph follows external CSS rules.

``` **CSS file (styles.css):** ```css p { color: purple; line-height: 1.5; margin: 10px 0; } ``` **Pros:** Reusable across multiple pages, easier maintenance, better organization **Cons:** Requires additional HTTP request ## ⚡ The CSS Cascade CSS follows a cascade system where multiple rules can apply to the same element. The order of precedence is: 1. **Inline styles** (highest priority) 2. **Internal styles** 3. **External styles** (lowest priority) When multiple rules have the same specificity, the **last one defined wins**. ## 🛠️ Hands-On Exercise ### Exercise 1: Basic CSS Implementation Create an HTML file that demonstrates all three CSS methods: ```html CSS Methods Demo

CSS Methods Demonstration

This paragraph uses inline CSS styling.

This paragraph uses internal CSS styling.

This paragraph uses external CSS styling.

``` ### Exercise 2: CSS Rules Practice Write CSS rules for the following requirements: 1. Make all `h2` elements blue with a font size of 20px 2. Give all paragraphs a gray color (#666) and 1.4 line height 3. Create a class called "highlight" that adds a yellow background 4. Style links to be green with no underline **Solution:** ```css h2 { color: blue; font-size: 20px; } p { color: #666; line-height: 1.4; } .highlight { background-color: yellow; } a { color: green; text-decoration: none; } ``` ## 🚨 Common Pitfalls 1. **Forgetting semicolons**: Always end CSS declarations with semicolons ```css /* Wrong */ p { color: red font-size: 16px } /* Correct */ p { color: red; font-size: 16px; } ``` 2. **Case sensitivity**: CSS is case-sensitive for class names and IDs ```css /* These are different */ .MyClass { color: red; } .myclass { color: blue; } ``` 3. **Missing closing braces**: Always close CSS rule blocks ```css /* Wrong */ h1 { color: blue; /* Correct */ h1 { color: blue; } ``` ## 🔍 Best Practices 1. **Use external CSS** for most styling needs 2. **Organize CSS** with comments and consistent formatting 3. **Use meaningful class names** that describe purpose, not appearance 4. **Keep specificity low** to make CSS easier to maintain 5. **Test across browsers** to ensure compatibility ## 📝 Assessment ### Quick Quiz 1. What does CSS stand for? 2. Which CSS method has the highest priority? 3. What character is used to end CSS declarations? 4. Name two advantages of external CSS over inline CSS. ### Practice Tasks 1. Create a simple webpage with at least 3 different CSS methods applied 2. Experiment with different CSS properties like `color`, `font-size`, `background-color` 3. Try overriding styles using different specificity levels ## 🔗 What's Next? In **Lesson 2**, we'll dive deeper into **CSS Selectors**, learning how to target specific HTML elements with precision using element selectors, classes, IDs, and advanced selector patterns. ## 💡 Additional Resources - [MDN CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) - [CSS Validator](https://jigsaw.w3.org/css-validator/) - [Can I Use](https://caniuse.com/) - Browser support tables --- *Complete the hands-on exercises and mark this lesson as finished when you're comfortable with CSS basics and the three implementation methods.*