Your First CSS Program: A Hands-On Guide

Write your first CSS program. Build a complete, styled HTML page using external stylesheets, selectors, colors, and margins.

Introduction

The best way to learn CSS is to write it. Reading theory helps, but you will only grasp how layout grids, margin overrides, and typography systems behave once you build web pages yourself.

In this practical, hands-on tutorial, we will write our First CSS Program. We will build a simple, clean, and modern personal profile card. You will write the HTML structural file, create an external CSS stylesheet, link them together, and apply custom colors, padding adjustments, rounded borders, and hover micro-animations.

What You Will Learn

  • How to structure a simple profile card in HTML.
  • Creating and linking an external style.css stylesheet.
  • Using basic element and class selectors.
  • Centering a layout card using margins.
  • Adding hover states to button elements.

Prerequisites

Detailed Explanation: Step-by-Step Guide

Let's build the profile card. We will write two files: index.html and style.css.

Step 1: Write the HTML Structure (index.html)

Create a folder named first-css-project and save this file inside it as index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal Profile Card</title>
  <!-- Link the external CSS file -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- The profile card container -->
  <div className="profile-card">
    <h2 className="profile-name">John Doe</h2>
    <p className="profile-title">Frontend Engineer</p>
    <p className="profile-bio">
      Passionate about building responsive, accessible, and high-performance user interfaces for web apps.
    </p>
    <button className="profile-btn">Follow Me</button>
  </div>

</body>
</html>

Step 2: Write the Stylesheet (style.css)

Create a file named style.css in the same directory and save these styling configurations:

/* style.css */

/* 1. Page Reset and Body Background */
body {
  margin: 0;
  padding: 0;
  background-color: #0F172A; /* Modern slate-900 background */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #E2E8F0;           /* Light text for contrast */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;            /* Centers card vertically on viewport */
}

/* 2. The Profile Card Container styling */
.profile-card {
  background-color: #1E293B; /* Slate-800 background for card */
  border: 1px solid #334155; /* Subtle border */
  border-radius: 16px;       /* Rounded corners */
  padding: 30px;
  width: 320px;
  text-align: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); /* Premium shadow */
}

/* 3. Typography Styles */
.profile-name {
  margin: 0 0 5px 0;
  font-size: 24px;
  color: #F8FAFC;            /* Pure white header */
}

.profile-title {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #38BDF8;            /* Vibrant sky-blue accent */
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.profile-bio {
  font-size: 14px;
  line-height: 1.5;
  color: #94A3B8;            /* Muted gray text */
  margin-bottom: 25px;
}

/* 4. Interactive Follow Button Styling */
.profile-btn {
  background-color: #38BDF8; /* Sky-blue button */
  color: #0F172A;            /* Dark text */
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 9999px;     /* Fully rounded pill button */
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease; /* Smooth transition */
}

.profile-btn:hover {
  background-color: #0EA5E9; /* Darker blue on hover */
  transform: translateY(-2px); /* Moves button slightly up */
}

Visual Learning Diagram (Mermaid)

graph TD
    A[Browser loads index.html] --> B[Link tag fetches style.css]
    B --> C[Browser applies body flex center]
    C --> D[Browser styles .profile-card container background & border]
    D --> E[Browser formats typography colors & button transforms]
    E --> F[Finished Page: Centered Profile Card]

Verification & Execution

To test your first CSS program:

  1. Save the code sections as index.html and style.css in a single folder.
  2. Double-click index.html to open it in your web browser (Chrome, Firefox, Safari).
  3. Inspect the Hover State: Hover your cursor over the "Follow Me" button. You should see a smooth color transition and a subtle upwards movement, verifying the transition transforms work correctly.

Summary

Writing your first CSS program involves creating structural HTML tags, saving a separate CSS file, and linking them via the <link> tag. By targeting classes like .profile-card or .profile-btn, you customize dimensions, colors, margins, and hover transitions to construct clean, premium interfaces.

Related Articles

Next Tutorial

Now that we have written our first program, let's explore the formal rules governing CSS syntax and how to target elements using advanced selectors in: CSS Syntax.

← Back to Syllabus