How Can We Define Styles?
How Can We Define Styles?
How Can We Define Styles? is a free HTML for Kids lesson on CoddyKit — lesson 1 of 1. 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 1 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Introduction
Hello,
We explained it partially in our previous lesson. Now let's repeat.
Styles can be defined in 3 ways in CSS,
- Inline Style
- Between the <style> tags.
- Using an external CSS file
Inline Style
1. Inline Style
As we can understand from the name, it refers to the styles we define by passing the style attribute to each element as inline.
This usage is not preferred as it reduces the reusability of each style and its legibility is very low.
In the example below, the letter-spacing style has provided 15px spaces between each letter in the text.
<p style="letter-spacing:15px">
Inline Style
</p>with style tag
2. Between the <style> tags.
It can be defined between style tags. This definition is also not preferred except for some exceptions (exceptions such as above the fold content area).
We will continue to use style tags to keep our examples organized. However, I do not recommend using it in your applications (except in the exceptional cases I mentioned).
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>External CSS File
3. External CSS File
Now let's learn how to use external CSS files.
This is the style definition we will use most often. First of all, a file containing only CSS selectors is created.
Then, the relevant CSS file can be defined for the link element between the head tags.
In the example below, the style.css file is assigned to the link element through the href attribute.
<link rel = "stylesheet" href = "styles.css">
This feature is the best solution for the same CSS file to be invoked by many files and to increase reusability.
In the example below, it has created a style definition that selects the external class.
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
In the example below, it has created a style definition that selects the external class.
Let's save this statement in the file named test 1.css and assign it to the link element.
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>Congratulations
Congratulations 🎉
In this section, We learned the style definition types in CSS.
In the next section, we will learn about id Selector.
Frequently asked questions
Is the “How Can We Define Styles?” lesson free?
Yes — the full text of “How Can We Define Styles?” is free to read here on the web, and the HTML for Kids course includes 1 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 “How Can We Define Styles?”?
How Can We Define Styles? 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 1, so you can start here or from the beginning and move at your own pace.
How long does the “How Can We Define 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.