Author
CSS can be utilized in HTML through three methods: Inline, Internal, and External. Every approach has its applications, benefits, and constraints.
Inline CSS
CSS is utilized directly on an HTML element through the style attribute.
Syntax:
<p style="color: blue; font-size: 16px;">This is a paragraph in blue.</p>
Benefits:
Drawbacks:
Internal CSS
CSS is included inside a <style> tag located in the <head> section of an HTML file.
Syntax:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Greetings</h1>
</body>
</html>
Benefits:
Drawbacks:
External CSS
CSS is contained in a distinct .css file and connected to HTML via the <link> tag.
Syntax:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a formatted paragraph.</p>
</body>
</html>
styles.css
p {
color: navy;
font-size: 14pt;
}
Benefits:
Drawbacks:
Comments in CSS are used to add notes, explanations, or temporarily disable code. They are ignored by the browser and do not affect the design.
Single-Line Comment in CSS
You can use comments to describe one line of code.
/* This makes all paragraphs red */
p {
color: red;
}
Multi-Line Comment in CSS
If you need to explain multiple lines of code or write longer notes, you can spread the comment across multiple lines.
/*
This section styles the headings.
All h1 tags will be blue, centered,
and use a larger font size.
*/
h1 {
color: blue;
text-align: center;
font-size: 32px;
}
CSS property names and values are case-insensitive.
Example: COLOR: red; and color: red; both work.
But class names, IDs, and file names are case-sensitive.
Example:
.myClass {
color: blue;
}
<p class="myclass">Hello</p> <!-- Won’t work (case mismatch) -->
<p class="myClass">Hello</p> <!-- Will work -->
Even a small mistake can break your CSS. Here are common errors and how to debug them:
Missing Semicolon
Add semicolons after every property.
p {
color: red /* Missing semicolon */
font-size: 16px;
}
Wrong Selector
If you style #title but your HTML uses class="title", it won’t work.
# → for IDs
. → for classes
File Not Linked Properly (External CSS)
Make sure the path in <link> is correct.
Example:
<link rel="stylesheet" href="css/style.css">
Overriding Styles (Specificity Issue)
If two rules target the same element, the one with higher specificity or latest declaration wins.
Use Browser Developer Tools
Press F12 in Chrome/Firefox → Inspect element → Check CSS applied.