# Session 3: Make Stuff Beautiful with HTML and CSS

## Overview
In this session, we'll learn how to create and style web pages using HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). HTML provides the structure of a webpage, while CSS controls its appearance and layout.

## Learning Objectives
- Understand the basic structure of an HTML document
- Learn essential HTML elements and their purposes
- Understand CSS selectors and properties
- Apply styles to HTML elements
- Create responsive designs

## Topics Covered

### 1. Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and content of web pages.

#### HTML Document Structure
```html
<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>
```

### 2. Essential HTML Elements

#### Text Elements
- Headings: `<h1>` to `<h6>`
- Paragraphs: `<p>`
- Lists: `<ul>`, `<ol>`, `<li>`
- Text formatting: `<strong>`, `<em>`, `<span>`

```html
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
<ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
</ul>
<ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
</ol>
```

#### Links and Images
- Links: `<a href="url">link text</a>`
- Images: `<img src="image.jpg" alt="description">`

```html
<a href="https://www.example.com">Visit Example.com</a>
<img src="cat.jpg" alt="A cute cat">
```

#### Structural Elements
- Containers: `<div>`, `<section>`, `<article>`
- Navigation: `<nav>`
- Header and Footer: `<header>`, `<footer>`

```html
<div class="container">
    <header>
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
        </nav>
    </header>
    <section>
        <h2>Section Title</h2>
        <p>Section content goes here.</p>
    </section>
    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</div>
```

### 3. Introduction to CSS
CSS (Cascading Style Sheets) is used to control the visual presentation of HTML elements. It allows you to define styles for your web pages including layouts, colors, fonts, and more.

#### Ways to Include CSS
1. Inline CSS: Using the `style` attribute
2. Internal CSS: Using the `<style>` tag in the `<head>` section
3. External CSS: Linking to an external CSS file using the `<link>` tag

```html
<!-- External CSS -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

<!-- Internal CSS -->
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
    </style>
</head>

<!-- Inline CSS -->
<p style="color: blue; font-size: 18px;">This is a paragraph with inline styles.</p>
```

### 4. CSS Selectors
CSS selectors define which HTML elements you want to style.

```css
/* Element selector */
h1 {
    color: blue;
}

/* Class selector */
.highlight {
    background-color: yellow;
}

/* ID selector */
#header {
    height: 100px;
}

/* Descendant selector */
nav a {
    text-decoration: none;
}

/* Pseudo-class selector */
a:hover {
    color: red;
}
```

### 5. CSS Properties
CSS properties define the styles you want to apply to the selected elements.

```css
/* Text properties */
p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    line-height: 1.5;
    text-align: justify;
}

/* Box model properties */
.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    margin: 10px;
    border: 1px solid black;
}

/* Background properties */
body {
    background-color: #f5f5f5;
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
```

### 6. Responsive Design with CSS
Responsive design ensures that your website looks good on all devices.

```css
/* Media queries */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
    
    h1 {
        font-size: 24px;
    }
}

/* Flexbox */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* CSS Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}
```

## Practice Exercises
1. Create a simple personal webpage with HTML
2. Style your webpage using CSS
3. Make your webpage responsive for mobile devices
4. Create a navigation menu with links
5. Build a simple photo gallery

## Additional Resources
- [MDN Web Docs - HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
- [MDN Web Docs - CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [W3Schools HTML Tutorial](https://www.w3schools.com/html/)
- [W3Schools CSS Tutorial](https://www.w3schools.com/css/)
- [CSS-Tricks](https://css-tricks.com/)

## Next Steps
Now that you know how to create and style web pages, you're ready to move on to [Session 4: JavaScript Basics](Session-4-Javascript-Basics.md) where you'll learn how to add interactivity to your web pages.