🌈 CSS for Beginners: Style Your Web Page Like a Pro (Even If You're Not One Yet)

✨ What Is CSS? CSS stands for Cascading Style Sheets. It’s a language that tells the browser how your website should look.

HTML builds the structure of a web page (like walls in a house), and CSS adds the design (like paint, furniture, and decorations).

🎨 Why Use CSS?

Makes your website look modern and clean
Lets you control colors, fonts, spacing, layout
Helps create responsive websites that look good on all devices

🛠️ Types of CSS

There are 3 main ways to use CSS. Let's look at each one

Inline CSS – Style directly in the HTML tag

This is red text!

output:

✅ Easy for testing
❌ Not recommended for big websites — it becomes hard to manage.

Internal CSS – Write inside the HTML file Put your styles in a block inside the <head> tag.</li> </ol> <code><!DOCTYPE html> <html> <head> <style> h1 { color: blue; } p { font-size: 18px; } </style> </head> <body> <h1>Welcome!</h1> This is styled using internal CSS. </body> </html> </code> output: <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkls1ya8qpmtmi7jdvxe.png" alt="Image description"/> ✅ Great for small projects ❌ Not reusable across multiple pages 3️⃣ External CSS – The best and cleanest way. Write CSS in a separate file, then link to it from your HTML. Step 1: HTML file index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello!</h1> This is styled using external CSS. </body> </html> Step 2: CSS file style.css body { background-color: #f5f5f5; font-family: Arial, sans-serif; } h1 { color: green; text-align: center; } p { color: gray; font-size: 18px; } output: <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxjgixhisorjsxwcim4w.png" alt="Image description"/> ✅ Best for real websites ✅ Keeps styles organized and reusable 🖋️ Written by Himanshu Bhagwat 📚 Learning through @devsync

DEV Community

🌈 CSS for Beginners: Style Your Web Page Like a Pro (Even If You're Not One Yet)

Top comments (0)