What is CSS? A Beginner’s Guide to Styling Web Pages
Hello, coding friends!
In today’s post on Simple Coding Hub, we’re going to explore a super cool part of web development — CSS.
If you’ve already learned some HTML, you might have noticed that HTML structures the content, but it doesn’t look very stylish. That’s where CSS comes in!
What is CSS?
CSS stands for Cascading Style Sheets. It’s the language used to style HTML pages — changing colors, fonts, layout, spacing, and more.
In simple words: 👇
- HTML = Structure
- CSS = Style
Why Do We Need CSS?
Imagine you build a house with HTML. CSS is the paint, furniture, and decoration that makes it beautiful!
With CSS, you can:
- Change background colors
- Resize text
- Add space between elements
- Create beautiful layouts
- Make your website mobile-friendly
How to Add CSS to an HTML File
There are 3 ways to use CSS in your HTML document:
1. Inline CSS
CSS is written inside the HTML element.
<p style="color: blue;">This is a blue paragraph.</p>
2. Internal CSS
CSS is written inside a <style> tag in the <head> of your HTML.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
3. External CSS
You create a separate .css file and link it to your HTML using the <link> tag.
<link rel="stylesheet" href="style.css">
- This is the best method for bigger projects!
Basic CSS Example:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.6;
}
Conclusion:
CSS is an essential part of web design. Once you understand the basics, your websites will start looking cleaner, more modern, and user-friendly.
Stay tuned — in the next post, we’ll dive deeper into CSS selectors and properties!
Thanks for reading, and don’t forget to share this post with your friends!
Let’s keep learning together at Simple Coding Hub.
> “Code is like art — and CSS is the color palette!”
Comments