Chapter 01 of 76 min read
CSS Syntax, Selectors & Linking Methods
Understand element, class, and ID selectors, plus inline vs external stylesheets.
How CSS Works
CSS (Cascading Style Sheets) controls how HTML elements are styled on screen. A CSS rule consists of a selector and a declaration block containing property-value pairs.
- Element Selector: Targets all tags of that type (e.g. p, h1).
- Class Selector: Starts with a period (.card). Highly reusable.
- ID Selector: Starts with a hash (#header). Unique to one element on a page.
CSS Example • Chapter 01
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS Element Selector */
body {
font-family: system-ui, -apple-system, sans-serif;
background-color: #f1f5f9;
padding: 30px;
}
/* Class Selector */
.pricing-card {
background: white;
border: 1px solid #cbd5e1;
border-radius: 16px;
padding: 24px;
max-width: 320px;
margin: auto;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.badge {
background: #dbeafe;
color: #1e40af;
padding: 4px 10px;
border-radius: 9999px;
font-size: 12px;
font-weight: bold;
}
.price {
font-size: 32px;
font-weight: 800;
color: #0f172a;
margin: 12px 0;
}
</style>
</head>
<body>
<div class="pricing-card">
<span class="badge">Student Plan</span>
<div class="price">₹0 <span style="font-size: 14px; font-weight: normal; color: #64748b;">/ free trial</span></div>
<p style="color: #64748b; font-size: 14px;">Full access to WeBotApp CodeLab and all beginner tracks.</p>
</div>
</body>
</html>💡 Click "Try in Editor" to run, edit, and experiment with this code in our live split-view environment.100% Live Preview
Key Concepts • Chapter 01
- •Prefer class selectors (.class-name) over ID selectors for reusability.
- •External CSS files are linked via <link rel="stylesheet" href="style.css">.
- •Inline styles have high specificity and should be avoided in production.
🎯 Chapter Practice Challenge
Add a new CSS class .btn-primary with a blue background and rounded corners.