CSS basics are the foundation of styling web pages. Before learning advanced CSS, you should understand how a CSS rule is written and how each part works.

A basic CSS rule contains a selector, a property, and a value.

Basic CSS Structure

Selector

Selects the HTML element

→

Property

Defines what to change

→

Value

Defines how it should look

Example 1: Change Text Color

In this example, we will create a paragraph in HTML and use CSS to change its text color to blue.

Complete Code

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>

    <style>
        .message {
            color: blue;
        }
    </style>

</head>

<body>

    <p class="message">
        Hello CIIT Student .
    </p>

</body>
</html>

How It Works

<p> creates the paragraph.
class="message" gives the paragraph a class name.
.message selects that element.
color: blue; changes the text color.

Output

Hello CIIT Student .

Example 2: Use Multiple Properties

A CSS rule can contain multiple properties. In this example, we will change the text color, font size, and alignment of a heading.

Complete Code

<!DOCTYPE html>
<html>
<head>
    <title>CSS Multiple Properties</title>

    <style>
        .welcome {
            color: purple;
            font-size: 30px;
            text-align: center;
        }
    </style>

</head>

<body>

    <h1 class="welcome">
        WelCome To CIIT World 🌍👀..!
    </h1>

</body>
</html>

How It Works

.welcome selects the heading.
color: purple; makes the text purple.
font-size: 30px; increases the text size.
text-align: center; places the heading in the center.

Output

WelCome To CIIT World 🌍👀..!

Example 3: Change Text Size

The font-size property controls the size of text.

Complete Code

<!DOCTYPE html>
<html>
<head>
    <title>CSS Font Size</title>

    <style>
        .large-text {
            color: green;
            font-size: 22px;
        }
    </style>

</head>

<body>

    <p class="large-text">
        WELCOME TO CIIT TRAINING INSTITUTE 🤓🌍..!
    </p>

</body>
</html>

How It Works

color: green; changes the text color to green.
font-size: 22px; makes the text larger.

Output

WELCOME TO CIIT TRAINING INSTITUTE 🤓🌍..!

Remember:

Selector chooses the element. Property tells what you want to change. Value tells how you want it to look.

Summary

CSS basics start with understanding selectors, properties, and values. A CSS rule can contain one or more properties. By combining these properties, you can control the color, size, alignment, spacing, and appearance of HTML elements.