Inline Styles
Change the look of your elements directly in HTML.
Inline Styles is a free HTML for Kids lesson on CoddyKit — lesson 1 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.
2
What Are Inline Styles?
Inline styles let you add CSS directly to an HTML tag using the style attribute. This is the simplest way to style your page.
Example:
<p style="color: red;">This is red text!</p>
The color: red; changes the text color to red.
3
What Are Inline Styles?
Inline styles let you add CSS directly to an HTML tag using the style attribute. This is the simplest way to style your page.
Example:
<p style="color: red;">This is red text!</p>
The color: red; changes the text color to red.
<p style="color: red;">This is red text.</p>
4
Changing Font Size
Use the font-size property to change the size of your text.
Example:
<p style="font-size: 24px;">This text is 24 pixels large.</p>
9
5
Adding Background Color
You can make your elements stand out by using the background-color property.
Example:
<p style="background-color: yellow;">This text has a yellow background.</p>
6
Combining Multiple Styles
Inline styles allow you to combine multiple CSS properties. Separate each property with a semicolon ;.
Example:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles!
</p>
7
Styling Other Elements
Inline styles work with all HTML elements, such as headings, buttons, and images.
Example:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
Styled Button
</button>
10
Great Job!
Congratulations! You’ve learned how to use inline styles to add simple and effective styling to your HTML elements. Inline styles are great for quick changes, but as your web page grows, you’ll need more advanced styling techniques. In the next lesson, we’ll explore CSS basics. Get ready to design professional web pages!
1
Inline Styles: Adding Simple Styling to Your HTML
Welcome to the lesson on inline styles! Today, you’ll learn how to style elements directly in your HTML using the style attribute.
8
Try It Yourself
Let’s create a web page using inline styles. Here’s an example to get started:
<!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 is an example of inline styling.
</p>
<button style="background-color: lightblue; padding: 10px; border: none;">
Click Me!
</button>
</body>
</html>
Frequently asked questions
Is the “Inline Styles” lesson free?
Yes — the full text of “Inline Styles” 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 “Inline Styles”?
Change the look of your elements directly in HTML. 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 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Inline Styles” 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
- Inline Styles
- CSS Basics
- Colors and Backgrounds
- Text Formatting