CSS Introduction

⭐ CSS Introduction

CSS (Cascading Style Sheets) is a styling language used to control how HTML elements look on a webpage.
It defines colors, layouts, spacing, fonts, sizes, animations, and overall design.

HTML = Structure
CSS = Style / Design

✔ How CSS Works

You write CSS rules that target HTML elements and apply styles to them.

A CSS rule has two parts:

Selector → Which element to style
Declaration → Style property + value

Example:

⭐ Types of CSS

Inline CSS (inside an HTML tag)
Internal CSS (inside <style> tag in head)
External CSS (separate .css file — best practice)

📌 CSS Example (Simple)

Here is an HTML page with CSS styling:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial;
}
h1 {
color: #333;
text-align: center;
}
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body><h1>Welcome to CSS!</h1>
<p>This is a styled paragraph using CSS.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #f0f0f0;

font-family: Arial;

}

h1 {

color: #333;

text-align: center;

}

p {

color: blue;

font-size: 18px;

}

</style>

</head>

<body><h1>Welcome to CSS!</h1>

<p>This is a styled paragraph using CSS.</p>

</body>

</html>

💡 What this CSS does?

Sets background color of whole page
Centers headline
Makes paragraph text blue and larger

CSS Introduction