Most used CSS properties
Most used CSS properties
Most used CSS properties 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,
In this section, we will learn the most common CSS properties.
Until now, we have usually done examples with simple properties such as color, font-size.
Width Height
Height - Width
We will use width and height properties to set the width and height values of our elements.
There are two issues to be aware of here.
- We cannot assign width and height to inline-type elements.
- The width-height properties that we assign are by default independent of other properties such as margin, padding, and border. And it is used only for the area inside the element.
We will provide additional information on the above exceptions later.
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
Width Height 2
In our previous example, we assigned the values of width and height as static. However, the values that can be assigned are not limited to fixed numbers.
Now let's see how to assign the width with the percentage in our example.
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
Content-box vs Border-box
Content-box vs Border-box
The box-sizing property takes the content-box value by default.
And by default, the value Width and height are used to reference content.
Border and padding values are added above the width and height values.
Suppose the width of a box is 100px.
When we add 10px as padding and 20px property as border to this box, the total width of the element will be 100px + 10px + 20px = 130px.
Max-width
max-width
With the max-width property, we can assign the maximum width that an element can take.
In the example below, since the max-width value is passed as 100px, although the default value of width is auto (element should cover 100% of its parent), it occupied 100px and the content was out of the box.
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
Text Decoration
Text Decoration
We can define decoration for texts with the text-decoration property.
I think it will be more sensible to examine this property on the example. Look at the output of our sample code in the preview.
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>text-indent
text-indent
We may want to include a space at the beginning of a text. We use the text-indent property for this.
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>text-align
text-align
We provide the horizontal placement of a text with the text-align property.
Let's define an example HTML.
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>font-family
font-family
We define the font-family style to use the type of fonts we want for texts.
There are a few important points we need to know here.
- The font that I have defined must be registered in our user's system. For this, we need to use one of the fonts expressed as web-safe font.
- If we are going to use a custom font, we will need to add the font we will use as a 3rd party dependency between the head tags. When adding font-family, we should determine our primary and secondary font-family preferences.
- If the browser cannot find our primary preference in its system, it shows our secondary preference to our user.
font-family 2
In the example below, Times New Roman font type has been assigned for the primary class.
Times and serif fonts are assigned as secondary and tertiary, respectively.
The browser first tries to use the Times New Roman font type; if this type is not found in the system, our other preferences are used.
If the fonts that we assigned are not available, the browser uses the default font.
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>font-style
font-style
As we can understand from its name, it specifies the font style for a text that we use.
Now let's see the font-style property with an example.
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>Congratulations
Congratulations 🎉
In this section, we learned the Most used CSS properties.
In the next section, we will learn CSS Margin.
Frequently asked questions
Is the “Most used CSS properties” lesson free?
Yes — the full text of “Most used CSS properties” 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 “Most used CSS properties”?
Most used CSS properties 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 “Most used CSS properties” 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.