HTML CSS
Styling HTML with Cascading Style Sheets
🎯 What is CSS?
CSS (Cascading Style Sheets) is used to style HTML elements. It controls colors, fonts, layouts, spacing, and overall visual appearance of web pages.
<!-- Inline CSS -->
<p style="color: blue; font-size: 18px;">Styled paragraph</p>
<!-- Internal CSS -->
<style>
h1 { color: red; text-align: center; }
</style>
<h1>Styled heading</h1>
Output:
Styled paragraph
Styled heading
Ways to Add CSS
Inline CSS
Style attribute in HTML elements
<p style="color: red;">Text</p>Internal CSS
<style> tag in HTML head
<style>p { color: red; }</style>External CSS
Separate .css file linked to HTML
<link rel="stylesheet" href="style.css">CSS Classes
Reusable styles with class names
<p class="highlight">Text</p>🔹 Inline CSS
Add styles directly to HTML elements using the style attribute:
<h1 style="color: blue; text-align: center;">Blue Centered Title</h1>
<p style="color: red; font-size: 20px; font-weight: bold;">Large red bold text</p>
<div style="background-color: yellow; padding: 15px; border: 2px solid black;">
Yellow box with border
</div>Output:
Blue Centered Title
Large red bold text
🔹 Internal CSS
Use the <style> tag in the HTML head section:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
text-align: center;
font-family: Arial;
}
p {
color: navy;
font-size: 16px;
}
.highlight {
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<h1>Green Centered Heading</h1>
<p>Navy blue paragraph text</p>
<p class="highlight">Highlighted paragraph</p>
</body>
</html>Output:
Green Centered Heading
Navy blue paragraph text
Highlighted paragraph
🔹 CSS Classes and IDs
Use classes and IDs to target specific elements:
<style>
.red-text {
color: red;
font-weight: bold;
}
.blue-box {
background-color: lightblue;
padding: 15px;
border-radius: 5px;
}
#special-heading {
color: purple;
text-decoration: underline;
}
</style>
<h2 id="special-heading">Special Purple Heading</h2>
<p class="red-text">This text is red and bold</p>
<div class="blue-box">This is a blue box</div>
<p class="red-text">Another red bold paragraph</p>Output:
Special Purple Heading
This text is red and bold
Another red bold paragraph
🔹 Common CSS Properties
Essential CSS properties for styling:
<style>
.demo-box {
color: white;
background-color: #333;
font-size: 18px;
font-family: Arial;
text-align: center;
padding: 20px;
margin: 10px;
border: 3px solid red;
border-radius: 10px;
width: 200px;
}
</style>
<div class="demo-box">Styled Box</div>Output:
🔹 External CSS File
Link to an external CSS file for better organization:
<!-- In your HTML file -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="main-title">My Website</h1>
<p class="content">Website content</p>
</body>
</html>/* In your styles.css file */
.main-title {
color: #2c3e50;
text-align: center;
font-size: 2.5em;
margin-bottom: 20px;
}
.content {
color: #34495e;
font-size: 1.1em;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}Benefits of External CSS:
- Reusable across multiple HTML pages
- Easier to maintain and update
- Keeps HTML clean and organized
- Better performance with caching