CSS Basics
An introduction to styling with CSS (optional overview).
CSS Basics is a free HTML for Kids lesson on CoddyKit — lesson 2 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
CSS Basics: Introduction to Styling with CSS
Welcome to the world of CSS! Today, we’ll learn how to use Cascading Style Sheets (CSS) to style your web pages and make them look amazing.
2
What is CSS?
CSS stands for Cascading Style Sheets. It’s a language used to control the look and feel of your web pages.
With CSS, you can change colors, fonts, layouts, and much more!
3
How CSS Works
CSS works by selecting HTML elements and applying styles to them. You can use CSS in three ways:
- Inline: Add styles directly inside HTML elements.
- Internal: Add styles inside a
<style>tag in the<head>. - External: Use a separate CSS file.
We’ll focus on internal and external styles in this lesson.
4
Internal CSS
Internal CSS is written inside a <style> tag in the <head> of your HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
5
External CSS
External CSS is written in a separate file with the .css extension. You link it to your HTML document using the <link> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
6
Selectors in CSS
Selectors are used to target specific HTML elements for styling. Common selectors include:
- Tag Selector: Targets all elements with a specific tag. Example:
p. - Class Selector: Targets elements with a specific class. Example:
.myClass. - ID Selector: Targets an element with a specific ID. Example:
#myID.
Let’s see how to use them!
7
Class and ID Selectors
Use a class when you want to style multiple elements. Use an ID for a single, unique element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
8
Try It Yourself
Let’s create a web page using internal CSS. Here’s an example to get started:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
9
10
Great Job!
Congratulations! You’ve learned the basics of CSS and how to use it to style your web pages. CSS makes your pages look professional and visually appealing. In the next lesson, we’ll dive deeper into colors and backgrounds to make your pages even more vibrant. Get ready to unleash your creativity!
Frequently asked questions
Is the “CSS Basics” lesson free?
Yes — the full text of “CSS Basics” 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 “CSS Basics”?
An introduction to styling with CSS (optional overview). 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 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “CSS Basics” 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.