0Pricing
HTML for Kids · Lesson

Multimedia: Adding Videos and Audio

Embed videos and audio files on your web page.

Multimedia: Adding Videos and Audio is a free HTML for Kids lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

1

Inline Styles: Adding Simple Styling to Your HTML

Welcome to the world of styling! Today, we’ll learn how to use inline styles to change the appearance of elements on your web page. Inline styles are a simple and quick way to make your page look better.

2

What Are Inline Styles?

Inline styles let you apply CSS (Cascading Style Sheets) directly to an HTML element using the style attribute.

Example:

<h1 style="color: red;">Hello, World!</h1>

This will display a red heading. Let’s explore how it works!

3

Changing Text Color

You can change the color of text using the color property in the style attribute.

Example:

<p style="color: blue;">This is blue text.</p>

4

Changing Font Size

To change the size of text, use the font-size property.

Example:

<p style="font-size: 20px;">This text is 20 pixels large.</p>

5

Adding Background Color

You can add background color to an element using the background-color property.

Example:

<p style="background-color: yellow;">This text has a yellow background.</p>

6

Combining Multiple Styles

You can combine multiple styles by separating them with a semicolon ;.

Example:

<p style="color: white; background-color: black; font-size: 18px;">
  This text has multiple styles applied!
</p>

7

Styling Other Elements

Inline styles work on all HTML elements, such as headings, paragraphs, and buttons.

Example:

<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: lightblue; border: none; padding: 10px;">
  Styled Button
</button>

8

Try It Yourself

Let’s create a web page with inline styles. Here’s an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Inline Styles Example</title>
  </head>
  <body>
    <h1 style="color: purple;">Welcome to My Styled Page</h1>
    <p style="color: gray; font-size: 16px;">
      This paragraph has styled text.
    </p>
    <button style="background-color: coral; color: white; padding: 10px;">
      Click Me!
    </button>
  </body>
</html>

9

10

Great Job!

Congratulations! You’ve learned how to use inline styles to add simple and effective styling to your web pages. Inline styles are a great way to make quick changes, but there’s more to styling! In the next lesson, we’ll explore CSS basics to unlock the full potential of web design. Get ready to create stunning web pages!

Multimedia: Adding Videos and Audio — illustration 10

Frequently asked questions

Is the “Multimedia: Adding Videos and Audio” lesson free?

Yes — the full text of “Multimedia: Adding Videos and Audio” is free to read here on the web, and the HTML for Kids course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO.

What will I learn in “Multimedia: Adding Videos and Audio”?

Embed videos and audio files on your web page. You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML for Kids?

No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Multimedia: Adding Videos and Audio” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML for Kids lesson?

Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Tables: Organizing Data
  2. Forms: Collecting User Input
  3. HTML Attributes
  4. Multimedia: Adding Videos and Audio
← Back to HTML for Kids