It’s like putting a sticker right on an object.Best for: Changing just one specific thing very quickly.Example:
HTML
I am Blue!
2. Internal CSS (The "Instruction List")This is written at the top of your HTML file inside a
3. External CSS (The "Separate Book")This is the most professional way.
You create a completely separate file (ending in .css) and link it to your HTML.
Best for:
Big websites with many pages.
You can change the color of 100 pages at once just by changing one line in the CSS file!
Example:In your HTML: In your style.css file: body { background-color: lightgreen; }
EXAMPLE OF CSS AND HTML
Project Name: The Season Watcher 3000
The Real-Life Question: "How can we create a dashboard that shows the current season, but makes it look like a high-tech app where the buttons glow and the boxes pop out when you touch them?"
The HTML File (index.html)
This is the Structure. We are creating a "Container" to hold our four "Season Cards."
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Season Watcher 3000</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="main-title">Smart Home: Season Monitor</h1>
<div class="dashboard">
<div class="card" id="spring">
<div class="icon">🌸</div>
<h2>Spring</h2>
<p>Status: Blooming</p>
<button class="btn">View Garden</button>
</div>
<div class="card" id="summer">
<div class="icon">☀️</div>
<h2>Summer</h2>
<p>Status: Sunny</p>
<button class="btn">Check AC</button>
</div>
<div class="card" id="autumn">
<div class="icon">🍂</div>
<h2>Autumn</h2>
<p>Status: Windy</p>
<button class="btn">Clear Leaves</button>
</div>
<div class="card" id="winter">
<div class="icon">❄️</div>
<h2>Winter</h2>
<p>Status: Freezing</p>
<button class="btn">Heat On</button>
</div>
</div>
</body>
</html>
2. The External CSS File (style.css)
This is the Style. We use "Flexbox" to align the boxes and "Transitions" to make them move smoothly.
CSS
/* General Page Setup */
body {
background-color: #1a1a2e; /* Dark "Space" Blue */
color: white;
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px;
}
.main-title {
margin-bottom: 40px;
text-transform: uppercase;
letter-spacing: 3px;
border-bottom: 2px solid #0f3460;
}
/* The Grid/Dashboard Layout */
.dashboard {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
/* Designing the Individual Cards */
.card {
background-color: #16213e;
border: 2px solid #0f3460;
border-radius: 20px;
padding: 30px;
width: 200px;
text-align: center;
/* This makes the animation smooth! */
transition: all 0.4s ease;
}
/* Real-Life Interaction: The Hover Effect */
.card:hover {
transform: scale(1.1) rotate(2deg); /* Grows and tilts slightly */
border-color: #e94560;
box-shadow: 0px 10px 30px rgba(233, 69, 96, 0.5);
}
.icon {
font-size: 50px;
margin-bottom: 10px;
}
/* Making the Buttons Glow */
.btn {
background-color: #e94560;
color: white;
border: none;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
margin-top: 15px;
}
.btn:hover {
background-color: white;
color: #e94560;
}
What makes this a "Good" Demo?
The "Pop" (Scale): In the CSS,
transform: scale(1.1)makes the card grow when you touch it with the mouse. This feels like a modern app.The "Glow" (Box-Shadow): Using
box-shadowon hover makes the card look like it’s lighting up.Flexbox: The
display: flexcommand in the.dashboardsection acts like a magnet, pulling all the cards into a neat line automatically.
