CSS for Beginners: How to Style Your First Web Page

CSS for Beginners: How to Style Your First Web Page

After learning HTML, the next important step in web development is CSS. HTML creates the structure of a web page, but CSS makes it beautiful and attractive.

Without CSS, every website would look plain and boring. In this beginner-friendly guide, you will learn what CSS is, how it works, and how to style your first web page step by step.

What Is CSS?

CSS stands for Cascading Style Sheets. It is used to control the design and appearance of a web page.

CSS can change:

  • Colors
  • Fonts
  • Spacing
  • Layout
  • Alignment

In simple words:

  • HTML = Structure
  • CSS = Design

How CSS Works with HTML

CSS styles HTML elements by selecting them and applying design rules.

Example:

h1 {
  color: blue;
}

This means: “All <h1> headings should appear in blue color.”

Three Ways to Add CSS

1. Inline CSS

CSS written directly inside an HTML tag:

<h1 style="color:red;">Hello</h1>

⚠️ Not recommended for large projects.

---

2. Internal CSS

CSS written inside the <style> tag in the HTML file:

<head>
  <style>
    body {
      background-color: lightgray;
    }
  </style>
</head>

✅ Good for small beginner projects.

---

3. External CSS (Best Method)

CSS stored in a separate file like style.css.

HTML file:

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

CSS file:

body {
  background-color: lightblue;
}

✅ Best and most professional method.

Basic CSS Properties Every Beginner Should Know

1. Text Color

p {
  color: green;
}

2. Background Color

body {
  background-color: #f2f2f2;
}

3. Font Size

h1 {
  font-size: 32px;
}

4. Font Family

body {
  font-family: Arial, sans-serif;
}

5. Spacing (Margin & Padding)

p {
  margin: 20px;
  padding: 10px;
}

Margin = space outside the element Padding = space inside the element

Simple Example: Styling a Web Page

Here is a full beginner example:

<!DOCTYPE html>
<html>
<head>
  <title>My Styled Page</title>
  <style>
    body {
      background-color: #eef;
      font-family: Arial, sans-serif;
      text-align: center;
    }

    h1 {
      color: darkblue;
    }

    p {
      font-size: 18px;
      color: #333;
    }
  </style>
</head>

<body>
  <h1>Welcome to My Website</h1>
  <p>I am learning HTML and CSS!</p>
</body>
</html>

Save and open this file to see the styling in action.

Common Beginner Mistakes in CSS

1. Forgetting the Semicolon (;)

color: red   ❌
color: red;  ✔️
---

2. Misspelling Property Names

colr: blue; ❌
color: blue; ✔️
---

3. Mixing HTML and CSS Incorrectly

Keep CSS inside <style> or a separate file.

What to Learn After CSS?

Once you understand basic CSS, the next step is:

  • JavaScript → to add interactivity
  • Responsive design → make websites mobile-friendly
  • Real projects → build portfolios and apps

This is how beginners become real web developers.

Final Thoughts

Learning CSS is an exciting step because your web pages finally start to look modern and professional.

Don’t try to memorize everything. Instead, practice by styling small projects again and again.

The more you practice, the better designer and developer you will become. 🚀

Comments

Post a Comment

Popular posts from this blog

How to Center a Div - The 3 Modern Ways (2026)

Centering a <div> used to be a meme in the CSS world because it was surprisingly hard. But in 2024, we have three clean, modern solutions. Here's how to do it properly. Method 1: Flexbox (Most Popular) CSS .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* Full viewport height */ } When to use: Modern layouts, when you need to center both horizontally AND vertically. Method 2: CSS Grid CSS .container { display: grid; place-items: center; height: 100vh; } When to use: When working with grid-based layouts already. Method 3: The Classic Margin Auto CSS .centered-div { width: 300px; margin: 0 auto; } When to use: Simple horizontal centering only (still works perfectly!). 💡 Pro Tip: For simple horizontal centering, use margin: 0 auto . For modern full centering, use Flexbox. For grid layouts, use CSS Grid's place-items: center . ...
Read more

Call by Value vs Call by Reference in C Programming (With Simple Examples)

Call by Value vs Call by Reference in C Programming (With Simple Examples) One of the most confusing topics for beginners in C programming is the difference between call by value and call by reference . This concept is extremely important because it affects how functions work and how data is modified inside a program. In this article, we will clearly explain call by value vs call by reference in C using simple language and easy examples. What Is a Function Call? When a function is called, values are passed from the calling function to the called function. The way these values are passed decides whether the original data can be modified or not. What Is Call by Value? In call by value, a copy of the variable’s value is passed to the function. Changes made inside the function do not affect the original variable. Example of Call by Value void change(int x) { x = 20; } int main() { int a = 10; change(a); printf("%d", a); } The output will...
Read more

Build a Simple Calculator with HTML, CSS & JavaScript

Build a Simple Calculator with HTML, CSS & JavaScript JavaScript, Projects, HTML, CSS, Beginner Projects https://images.unsplash.com/photo-1581276879432-15e50529f34b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80 In this tutorial, we'll build a fully functional calculator from scratch. This is a perfect project for beginners to practice HTML structure, CSS styling, and basic JavaScript logic. What we're building: A calculator with number buttons (0-9), operators (+, -, ×, ÷), equals (=), and clear (C) functions. Step 1: HTML Structure First, create the basic HTML structure for our calculator. calculator.html <!DOCTYPE html> <html lang="en"> <head> <title>Simple Calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="calculator"> ...
Read more