How to Add CSS
Three Methods
1. Inline CSS
Use the style attribute directly on an element:
<p style="color: blue; font-size: 18px;">Blue text</p>2. Internal CSS (Style Tag)
Put CSS inside a <style> tag in the <head>:
<head>
<style>
p { color: blue; }
h1 { font-size: 36px; }
</style>
</head>3. External CSS (Best Practice)
Link a separate .css file:
<head>
<link rel="stylesheet" href="styles.css">
</head>💡 Best Practice
Always use external CSS files. This keeps your HTML clean and makes styles reusable across pages.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Methods</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #5E256D;
text-align: center;
}
p {
color: #333;
line-height: 1.6;
}
.highlight {
background-color: #fef3c7;
padding: 10px;
border-left: 4px solid #f59e0b;
}
</style>
</head>
<body>
<h1>My Styled Page</h1>
<p>This paragraph is styled with internal CSS.</p>
<div class="highlight">This is a highlighted box!</div>
</body>
</html>Lesson Nav
Course contents
CSS Course
0/5 lessons completed