Day 6 – Introduction to CSS

📝 Day 6 – Introduction to CSS | Syntax & Types of CSS Explained

📥 Download Notes + Example Code (PDF):
👉 Click here to download Day 6 Notes

📚 Introduction

Just like a building without paint and finishing looks incomplete, a website without CSS (Cascading Style Sheets) feels dull and unpolished. If HTML is the skeleton of your web page, CSS is its skin and clothing. It brings style, layout, and beauty to your websites.

In this post, we’ll learn:

What is CSS?
Why we use CSS?
CSS Syntax
Types of CSS: Inline, Internal & External
Example code for each

🎨 What is CSS?

CSS stands for Cascading Style Sheets. It is used to style HTML elements, control layout, colors, fonts, spacing, and overall visual appearance of a website.

Without CSS, all websites would look like plain text documents.

✅ Why Use CSS?

To separate content (HTML) from design (CSS)
To make web pages visually attractive
To reuse the same style across multiple HTML files
To improve performance and maintainability

🔠 CSS Syntax

A typical CSS rule looks like this:

Example:

📂 Types of CSS

1. Inline CSS

Inline CSS is written inside the HTML tag using the style attribute.

✅ Used for small or one-time styles
❌ Not recommended for large projects

2. Internal CSS

Internal CSS is written within a <style> tag inside the HTML <head>.

✅ Good for single-page designs
❌ Not reusable across multiple pages

3. External CSS

External CSS is written in a separate .css file and linked using the <link> tag.

style.css

HTML

✅ Best for scalability and reusability
✅ Separates content and design effectively

💡 Real-World Use Case

Imagine you’re building an online store. You want all your product titles to be bold and red. Instead of styling each one manually, just add a CSS rule like this:

And apply it in HTML:

⚠️ Common Mistakes to Avoid

❌ Writing all CSS inline
✅ Use external CSS for better structure

❌ Forgetting to close curly braces
✅ Always check CSS syntax

❌ Not linking the CSS file correctly
✅ Use the correct file path and .css extension

🛠️ Best Practices

Organize your CSS using comments and structure
Prefer classes over inline styles
Keep your CSS DRY (Don’t Repeat Yourself)
Use consistent indentation and spacing