CSS Basics: Styling the Web
CSS is what transforms plain HTML into beautiful, visually appealing websites. Learn the fundamentals of styling web pages with colors, fonts, and layouts.
"HTML alone is like plain rice. CSS is what makes it tasty, aesthetic, and worthy of display."
🌈 What is CSS?
CSS (Cascading Style Sheets) is a styling language used to control the appearance of HTML elements. If HTML is the skeleton, CSS is the outfit - making sure your website doesn't look like it's from the dinosaur age 🦖.
🔧 What can CSS do?
- Colors, font sizes and types
- Spacing between elements
- Layout positioning
- Hover effects, animations, and much more
🛠️ How to Use CSS in HTML
There are 3 ways to apply CSS to your HTML page:
1. Inline CSS
Add style directly in the HTML tag.
🚫 Only for testing, not for serious projects.
HTML
<p style="color: blue; font-size: 20px;">Hello CSS!</p>
2. Internal CSS
Written inside <style> tags in the <head> section.
HTML
<head>
<style>
p {
color: green;
}
</style>
</head>
3. External CSS ✅ Best Practice!
CSS in a separate file, then linked to the HTML.
HTML
<!-- HTML -->
<link rel="stylesheet" href="style.css">
CSS
/* style.css */
p {
color: purple;
}
🧠 CSS Selectors
Selectors are how you tell CSS: "Hey, style this part please!"
| Selector Type | Example | Description |
|---|---|---|
| Tag | p {} |
Styles all <p> tags |
| Class | .title {} |
Styles all elements with class="title" |
| ID | #hero {} |
Styles the element with id="hero" (unique!) |
📝 Classes can be used multiple times, IDs should be unique per page.
🧪 Properties & Values
CSS follows this pattern:
CSS Syntax
selector {
property: value;
}
Real example:
CSS
h1 {
color: red;
font-size: 36px;
text-align: center;
}
| Property | Meaning |
|---|---|
color |
Text color |
font-size |
Text size |
font-family |
Font type |
text-align |
Text alignment (left, center, etc) |
💬 CSS Comments
Comments are for notes and won't appear in the browser.
CSS
/* This is a comment - safe for your secrets */
h1 {
color: pink;
}
🔧 Complete Example (Internal CSS)
HTML with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Example</title>
<style>
body {
background-color: #f7f7f7;
font-family: 'Poppins', sans-serif;
}
h1 {
color: #ff3366;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
color: #333;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
#mainTitle {
font-size: 40px;
}
</style>
</head>
<body>
<h1 id="mainTitle">Welcome!</h1>
<p>This is an example of <span class="highlight">Internal CSS</span> in a web page.</p>
</body>
</html>
