Your HTML page works — but how do you make it look great? That’s where CSS comes in. With a few simple rules, you can change colors, fonts, spacing, and more. In this MiniCoursey quick guide, you’ll learn CSS basics step by step and style your first page in just 30 minutes.
What is CSS?
CSS (Cascading Style Sheets) is the language that makes your web pages beautiful. It tells the browser how to display your HTML content — from colors to layouts.
How to Link CSS to HTML
There are three ways to add CSS:
- Inline styles (not recommended)
- Internal <style> tag
- External CSS file (best practice)
Use the <link> tag in your <head> to link an external stylesheet.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Basic CSS Syntax
CSS uses selectors and rules.
selector {
property: value;
}
Example:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
Styling Text
Change font size, color, and alignment.
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
Adding Colors and Backgrounds
Use HEX, RGB, or color names.
body {
background-color: #ffffff;
}
h1 {
color: #007acc;
}
💡 Pro Tip: Use a CSS reset (like
* { margin: 0; padding: 0; }) to avoid unexpected spacing.
⚠️ Common Mistake: Forgetting semicolons or using curly braces incorrectly will break your styles.
FAQ
Q: Do I need a special tool for CSS?
A: No — you can write CSS in any text editor.
Q: How do I see changes?
A: Save your .css file, refresh your browser!
What’s Next
👉 Next up: Build a Simple Landing Page with HTML & CSS
Where to Learn More
CSS has endless possibilities. Experiment with selectors, colors, and layouts. Try free resources like MDN Web Docs or CSS-Tricks.
Conclusion
Congrats — you’ve styled your first page! Now keep going: explore fonts, layouts, and responsive design.
✨ Bookmark MiniCoursey for more quick & free mini courses!