CSS Tutorial with Bootstrap 5

🧠 What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to style HTML elements — change colors, fonts, sizes, layouts, and responsiveness.

🛠️ Ways to Use CSS

1. Inline CSS

<p style="color: red;">This is red text.</p>

2. Internal CSS

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

3. External CSS

HTML:

<link rel="stylesheet" href="style.css">

style.css:

p {
  color: blue;
}

💡 CSS Syntax

selector {
  property: value;
}

Example:

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

🎯 CSS Selectors

1. Element Selector

p {
  color: purple;
}

2. Class Selector

.box {
  border: 1px solid black;
}

HTML:

<div class="box">I am a box</div>

3. ID Selector

#header {
  background-color: yellow;
}

4. Grouping

h1, h2, p {
  color: blue;
}

🎨 CSS Colors

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

✍️ Fonts & Text

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

📦 CSS Box Model

.box {
  width: 300px;
  height: 100px;
  padding: 20px;
  margin: 30px;
  border: 2px solid black;
  background-color: lightblue;
}

📐 Layout: Display, Flex & Grid

1. Display Types

span { display: inline; }
div { display: block; }

2. Flexbox

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. Grid

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

📌 CSS Positioning

.box {
  position: relative;
  top: 20px;
  left: 10px;
}

🪟 Responsive Design

Include this in your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Query Example:

@media (max-width: 768px) {
  body {
    background-color: pink;
  }
}

✅ Full HTML + CSS Example

📄 HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="main-title">Welcome</h1>
  <p class="intro">CSS Example</p>
  <div class="box">Box</div>
</body>
</html>

🎨 style.css:

body {
  background: #f4f4f4;
  font-family: sans-serif;
}
#main-title {
  color: teal;
  text-align: center;
}
.intro {
  font-size: 18px;
  color: navy;
}
.box {
  width: 300px;
  margin: 20px auto;
  padding: 20px;
  background-color: orange;
  text-align: center;
}

🎨 Complete CSS Tutorial