🎨 Basic CSS Tutorial for Beginners: Learn How to Style Your Web Pages

Learn the fundamentals of CSS — the language that brings design to your HTML pages.

✅ What is CSS?

CSS stands for Cascading Style Sheets. It is used to control the look and feel of HTML elements on a webpage. While HTML creates the structure of your web content, CSS makes it visually appealing.

📁 How to Add CSS to HTML

There are three main ways to apply CSS to your HTML page:

1. Inline CSS

<p style="color: blue;">
          This is a blue paragraph.</p>

2. Internal CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

3. External CSS

HTML (index.html):

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

CSS (styles.css):

body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}

🌐 How to Use External CSS in HTML (Beginner-Friendly Guide) When you're building websites, organizing your code properly is important — not only for clarity but also for maintaining and updating your design easily. One of the best practices in web development is to use External CSS.

✅ What is External CSS? External CSS means writing all your CSS (styling rules) in a separate file, rather than directly inside your HTML file. You then link this file to your HTML document using the tag in the section. This keeps your HTML clean and easier to manage, especially as your website grows.

When saving .html and .css file you must save these two files in a same folder in file manager.

🎯 Basic CSS Syntax

CSS follows a simple rule-based syntax:

selector {
  property: value;
}

Example:

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

🌈 Common CSS Properties

Property	Description	Example
color	Text color	color: blue;
background	Background color or image	background: yellow;
font-size	Size of the text	font-size: 18px;
margin	Space outside the element	margin: 10px;
padding	Space inside the element	padding: 15px;
border	Adds a border	border: 1px solid black;
text-align	Aligns text	text-align: center;

📦 CSS Box Model

Every HTML element can be thought of as a box, with the following layers:

Content – the text or image
Padding – space around the content
Border – wraps the padding and content
Margin – space outside the border

Understanding the box model helps in aligning and spacing elements properly.

💡 Tips for Beginners

Use external CSS files to keep your code clean and organized.
Use browser developer tools (Inspect) to test CSS styles.
Start simple. Practice by styling basic HTML elements.

📚 Next Steps

Once you're comfortable with the basics, explore:

🔚 Conclusion

CSS is a powerful tool that brings life to your HTML pages. With just a few lines of CSS, you can make your website more attractive and user-friendly. Keep experimenting and building!

📚 Continue Learning: HTML & CSS

Want to build beautiful and structured websites? Learn more about HTML and CSS at W3Schools:

👉 Learn HTML on W3Schools
👉 Learn CSS on W3Schools

These tutorials include hands-on examples, exercises, and interactive editors — perfect for beginners and intermediates.

← Back to Home