Introduction to CSS for Kids and Beginners

Hi everyone! 👋 I’m Yusuf Ridwanulahi Adeleke, a 12-year-old who loves coding and technology. I enjoy sharing what I learn so that kids and beginners can explore web development together.

Today, we’re going to learn about CSS, the language that makes websites look beautiful.

What is CSS?

CSS stands for Cascading Style Sheets, and it’s used to style and design webpages. If HTML is the skeleton of a website and JavaScript is the brain, then CSS is the clothes and design that make the website attractive.

With CSS, you can:

  • Change colors

  • Add fonts

  • Adjust layouts

  • Create spacing and margins

  • Add animations and effects

Without CSS, websites would look plain and boring, just black text on a white background.

Why Should You Learn CSS?

CSS is important because it makes websites fun and engaging. Here’s why kids and beginners should learn it:

  • It’s easy to start with, even if you’ve never coded before

  • It helps you bring creativity to your websites

  • You can change how your HTML content looks in just a few lines

  • It’s the foundation for creating professional-looking websites

If you’ve already tried HTML, CSS is the perfect next step.

What Do You Need to Start Coding CSS?

You only need the same two tools as before:

  1. A text editor like Visual Studio Code, Notepad++, or Sublime Text

  2. A web browser like Chrome, Firefox, or Safari

No extra setup is needed because CSS works directly with HTML.

Writing Your First CSS Code

Let’s write a simple webpage with some CSS styling.

  1. Open your text editor

  2. Create a new file and save it as index.html

  3. Type this code:

<!DOCTYPE html>
<html>
<head>
    <title>My First CSS Page</title>
    <style>
        body {
            background-color: lightblue;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            color: black;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Welcome to CSS</h1>
    <p>This is my very first webpage styled with CSS.</p>
</body>
</html>


  1. Save the file

  2. Open it in your browser

🎉 Congratulations! You’ve just created your first styled webpage.

Understanding the Code

<style> ... </style> → This is where you write CSS rules inside your HTML file
body { ... } → Styles the whole page
background-color: lightblue; → Changes the background color
font-family: Arial, sans-serif; → Sets the font style
h1 { ... } → Styles the heading
color: darkblue; → Changes the heading color
text-align: center; → Centers the heading text
p { ... } → Styles the paragraph
font-size: 18px; → Makes the paragraph text larger

External CSS File

Instead of writing CSS inside your HTML, you can create a separate file for your styles.

  1. Create a new file and save it as style.css

  2. Add this code:

body {
    background-color: lightyellow;
    font-family: Verdana, sans-serif;
}

h1 {
    color: green;
    text-align: left;
}

p {
    color: brown;
    font-size: 16px;
}

  1. Link it to your HTML file by adding this inside the <head> section:

<link rel="stylesheet" href="style.css">

Now your HTML will use the styles from the external file. This method is cleaner and is used in real-world projects.

Fun Things You Can Try

  • Change the background color of your page

  • Try different fonts like Courier or Times New Roman

  • Experiment with colors for headings and paragraphs

  • Add borders and spacing to make your content look neat

The more you practice, the more creative your designs will become.

Next Steps

After learning CSS basics, you can explore:

  • Advanced selectors for targeting specific elements

  • CSS layouts using Flexbox and Grid

  • Animations and transitions for cool effects

  • Responsive design to make your website work on phones and tablets

Final Words

CSS is the language that makes websites look beautiful. It takes your HTML structure and transforms it into something colorful, stylish, and fun. With just a few lines of CSS, you can change the entire look of a webpage.

Remember, coding is not only for adults, kids like us can use HTML, CSS, and JavaScript to create websites, games, and projects that inspire others.

I hope this introduction to CSS motivates you to start experimenting with styles. If you have questions or ideas, feel free to reach out—I’d love to hear from you.

Let’s code, create, and change the world together! 🚀