🟒 LESSON 1 PRACTICAL

🟒 LESSON 1 PRACTICAL β€” Your First CSS Styling

🎯 Goal

You will:

  • Create an HTML file
  • Connect CSS
  • Style text (color, size, background)

πŸ§‘β€πŸ’» STEP 1: Create Your Project

Create a folder:

css-lesson-1

Inside it, create 2 files:

index.html
style.css

🧾 STEP 2: Write HTML

Open index.html and paste this:

<!DOCTYPE html>
<html>
<head>
    <title>My First CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Welcome to CSS</h1>
    <p>This is my first styled page.</p>

</body>
</html>

🎨 STEP 3: Add CSS

Open style.css and write:

body {
    background-color: #f0f0f0;
}

h1 {
    color: blue;
    font-size: 40px;
}

p {
    color: gray;
    font-size: 18px;
}

▢️ STEP 4: Run It

  • Double-click index.html
  • Open in browser

πŸ‘‰ You should see:

  • Light gray background
  • Blue big title
  • Gray paragraph

πŸ§ͺ STEP 5: EXPERIMENT (VERY IMPORTANT)

Change values yourself:

h1 {
    color: red;
}

Try:

  • green
  • purple
  • #ff6600

🎯 CHALLENGE TASK (DO THIS YOURSELF)

Update your page to look like this:

Requirements:

  • Background β†’ light blue
  • h1 β†’ dark green
  • p β†’ black
  • Increase paragraph size

πŸ’‘ BONUS (OPTIONAL)

Add another paragraph:

<p class="info">I am learning CSS step by step!</p>

Then style it:

.info {
    color: orange;
    font-weight: bold;
}

πŸš€ YOUR MISSION

  1. Write the code
  2. Test it
  3. Modify colors yourself
  4. Try to break it (this is how you learn fast)

You may also like...

19 Responses

  1. June 27, 2026

    ivermectin PK review

    ivermectin PK review

  2. July 1, 2026

    minoxidil women’s postpartum hair loss

    minoxidil women’s postpartum hair loss

  3. July 23, 2026

    vardenafil 10 mg facts

    vardenafil 10 mg facts

  4. July 24, 2026

    avanafil food interaction overview page

    avanafil food interaction overview page

Leave a Reply

Your email address will not be published. Required fields are marked *