1. What is CSS and How Does it Work?
CSS (Cascading Style Sheets) controls the visual presentation, colors, typography, and responsive layouts of HTML webpages.
⊞HTML5 Web Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selectors Demo</title>
<style>
/* Tag / Type Selector */
h1 {
color: #04AA6D;
font-family: Arial, sans-serif;
text-align: center;
}
/* Class Selector */
.highlight-card {
background-color: #17181c;
color: #ffffff;
padding: 16px;
border-radius: 8px;
border: 1px solid #04AA6D;
}
/* ID Selector */
#primary-btn {
background-color: #04AA6D;
color: #ffffff;
font-weight: bold;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Welcome to CSS Styling</h1>
<div class="highlight-card">
<p>This card is styled using class and ID selectors.</p>
<button id="primary-btn">Get Started</button>
</div>
</body>
</html>
2. The Three Methods of Applying CSS
3. CSS Specificity Hierarchy Table
| Selector Type | Example | Specificity Score | Priority |
|---|---|---|---|
| Inline Style | style="color: red;" | 1000 | Highest |
| ID Selector | #header | 100 | Very High |
| Class / Attribute | .btn, [type="text"] | 10 | Medium |
| Element / Type | h1, p, div | 1 | Low |
| Universal | 0 | Lowest |