Introduction to Web Development

HTML & CSS Fundamentals

Lesson Objectives

01

Structure vs Style

Understand the difference between HTML (structure) and CSS (styling)

02

HTML Tags

Identify common HTML tags like <h1>, <p>, <div>, <button>

03

CSS Properties

Apply basic CSS properties like color, background, padding, margin

04

Build & Style

Create and style your first web page

What is HTML?

Hyper Text Markup Language

HTML Code

<h1>Hello World!</h1>
<p>This is a paragraph.</p>
<button>Click Me</button>
                    

The Skeleton

HTML provides the structure and content of your website. It's like the bones of a building.

Common HTML Elements

<h1>...</h1>

Main Heading

<p>...</p>

Paragraph text goes here

<button>...</button>

<img src="..." />

<a href="...">...</a>

Link Text

<div>...</div>

Container

What is CSS?

Cascading Style Sheets

CSS Code

h1 {
  color: #576A8F;
  font-size: 32px;
  font-weight: bold;
}
                    

The Styling

CSS provides the appearance and design. It's the paint, decoration, and style of your building.

CSS Selectors

Element Selector

h1 { color: blue; }

Targets all <h1> elements

Class Selector

.button { padding: 10px; }

Targets elements with class="button"

ID Selector

#header { background: white; }

Targets element with id="header"

The CSS Box Model

Every HTML element is a rectangular box

Margin

Border

Padding

Content


                    margin: 20px; border: 5px solid; padding: 15px;

Box Model: Interactive Demo

Margin: 20px

Padding: 20px

Border: 5px

Content

Working with Colors

Named Colors

color: red;

140+ predefined color names

Hexadecimal

color: #576A8F;

6-digit color codes

RGB

color: rgb(87, 106, 143);

Red, Green, Blue values

RGBA

color: rgba(255, 116, 68, 0.7);

RGB with transparency

CSS Typography

font-family: serif;

The quick brown fox

font-family: sans-serif;

The quick brown fox

font-family: monospace;The quick brown fox

font-size: 24px; Size

font-weight: bold; Weight

text-align: center;

Align

text-decoration: underline; Decoration

CSS Display Property

display: block;

Block 1

Block 2

Block 3

Takes full width, stacks vertically

display: inline-block;

Item 1

Item 2

Item 3

Side by side, respects width/height

display: flex;

Flex 1

Flex 2

Flex 3

Flexible, powerful layout control

Flexbox Layout

1

2

3

CSS Positioning

static

Default position, normal document flow

Static

relative

Positioned relative to normal position

Relative

absolute

Positioned relative to parent

Absolute

fixed

Fixed to viewport, doesn't scroll

Fixed

Hover Effects & Transitions

Try hovering over these elements!

Scale

transform: scale(1.1);

Rotate

transform: rotate(5deg);

Color Change

background: gradient;

Shadow

box-shadow: large;

transition: all 0.3s ease;

CSS Pseudo-classes

:hover

button:hover { background: blue; }

:active

button:active { transform: scale(0.95); }

:focus

input:focus { border-color: orange; }

:first-child

First item (styled)
Second item
Third item

li:first-child { color: orange; }

Responsive Design

Media Queries


@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Adjust styles based on screen size

Desktop

Tablet

Mobile

CSS Quick Reference

Text

color
font-size
font-weight
text-align
line-height

Box Model

margin
padding
border
width
height

Background

background-color
background-image
background-size
background-position

Layout

display
position
flex-direction
justify-content
align-items

Practice Time!

Let's create your first header

Your Task:

1. Open your text editor (Notepad, VS Code, etc.)

2. Create a file named mypage.html

3. Copy this starter code:

HTML Starter Template

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
    <style>
        /* Your CSS here */
    </style>
</head>
<body>
    <h1>Your Name</h1>
</body>
</html>
                        

Challenge:

Change the h1 color to your favorite color

Add a <p> paragraph with a fun fact about yourself

Center align all your text

Bonus: Add a background color to the body

Quick Quiz!

Test your knowledge

Question 1/5

What does HTML stand for?

Score:

0/0

Thank You!

Questions?