1. CSS Basics

01/11

The Fundamentals

  • What is CSS (Cascading Style Sheets)
  • Syntax: Selector, Property, and Value
  • Types: Inline, Internal, External
  • Comments: /* Comment */

Syntax Example

p {
  color: red;
  font-size: 16px;
}

2. Text Styling

02/11

Headings (h1-h6)

  • color & font-size
  • font-family
  • text-align
  • text-transform

Paragraphs (p)

  • line-height
  • letter-spacing
  • text-indent

3. Link Styling (Anchor)

03/11

States & Decoration

  • text-decoration (none/underline)
  • color
  • Pseudo-classes: :hover, :visited, :active

Example

a:hover {
  color: blue;
  text-decoration: underline;
}

4. Image Styling

04/11

Visual Properties

  • width / height
  • border
  • border-radius (Rounded corners)
  • object-fit (cover/contain)

[CSS Image Properties Visual]

5. Lists (ul, ol, li)

05/11

Bullet & Spacing

  • list-style-type (square/circle/none)
  • list-style-position
  • list-style-image
  • padding & margin
ul {
  list-style-type: square;
  padding: 20px;
}

6. Table Styling

06/11

Table Elements

  • border-collapse: collapse;
  • width (100% for responsive)

Cells (th, td)

  • padding & border
  • background-color
  • text-align

7. Form Styling

07/11

Inputs & Areas

  • width, padding, border
  • outline: none;
  • :focus (Interaction)
  • resize: none; (Textarea)

Buttons

  • cursor: pointer;
  • :hover effects

8. Layout Styling (div)

08/11

The Container

  • width & height
  • background-color
  • margin (Outside)
  • padding (Inside)
  • border
DIV AREA PREVIEW

9. Media Styling

09/11

Audio Player

  • width
  • margin

Iframes (Video/Maps)

  • width & height
  • border: none;

10. Core Concepts

10/11

Box Model & Selectors

  • Selectors: Element, Class(.), ID(#), Group(,)
  • Box Model: Content > Padding > Border > Margin

Display & Position

  • Display: block, inline, none
  • Position: relative, absolute, fixed

Flexbox Basics

display: flex;
justify-content: center;
align-items: center;
flex-direction: row;

Student Task Challenges

11/11
Task 1: The Bio-Link Page

Create a div container. Inside, add a circular profile img, an h1 name, and 3 a tags styled as buttons using display: inline-block and :hover.

Task 2: Interactive Data Form

Build a registration form. Style the input fields with 15px padding and a custom :focus border color. Add a "Submit" button that changes color when hovered.

Task 3: Flexbox Hero Section

Use display: flex to center a div both horizontally and vertically. Inside, place a text section on the left and an iframe (video) on the right using flex-direction: row.