CSS

🔹 What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to design and style web pages. It controls how HTML elements look on the screen—like colors, fonts, spacing, layout, and responsiveness.

🔹 Why CSS is Important

CSS works together with:

HTML → Structure of the webpage
JavaScript → Adds interactivity

👉 HTML builds the structure, and CSS makes it beautiful and visually appealing.

🔹 How CSS Works

CSS applies styles to HTML elements using selectors and properties.

Example:

h1 {
color: blue;
font-size: 30px;
}

h1 → selector
color, font-size → properties

🔹 Types of CSS

1. Inline CSS

Applied directly inside HTML tag

<h1 style=“color:red;“>Hello</h1>

2. Internal CSS

Defined inside <style> tag in <head>

<style>
h1 { color: green; }
</style>

3. External CSS (Best Practice)

Stored in a separate .css file

🔹 CSS Syntax

selector {
property: value;
}

🔹 Key Concepts of CSS

1. Selectors

Used to target HTML elements

Element selector → p, h1
Class selector → .className
ID selector → #idName

2. Colors and Backgrounds

body {
background-color: lightgray;
color: black;
}

3. Fonts and Text

p {
font-family: Arial;
font-size: 16px;
text-align: center;
}

4. Box Model

Every element is a box with:

Margin (outer space)
Border
Padding (inner space)
Content

5. Layout Techniques

Flexbox → for flexible layouts
Grid → for complex layouts

6. Responsive Design

CSS helps make websites look good on:

Mobile 📱
Tablet
Desktop 💻

Example:

@media (max-width: 600px) {
body {
background-color: yellow;
}
}

🔹 Features of CSS

✔ Separates design from structure
✔ Reusable styles
✔ Improves website performance
✔ Supports animations and transitions

🔹 Advantages

Easy to maintain
Saves time (one file controls many pages)
Better user experience

🔹 Limitations

Browser compatibility issues sometimes
Can become complex in large projects

🔹 CSS Versions

CSS1 → Basic styling
CSS2 → Layout improvements
CSS3 → Modern features like animations, gradients, flexbox

🔹 Conclusion

CSS is essential for making websites attractive and user-friendly. While HTML provides the structure, CSS adds design, layout, and responsiveness, making websites modern and engaging.