beginner Level • Chapter 01 of 16
CSS Syntax, Selectors & Linking Methods
Understand element, class, and ID selectors, plus inline vs internal vs external stylesheets.
How CSS Works
CSS (Cascading Style Sheets) controls how HTML elements look 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 (.pricing-card). Highly reusable.
- •ID Selector: Starts with a hash (#header). Unique to one element on a page.
Hands-On Code Examples & Sandbox
1 ExampleCode SandboxExample: CSS Syntax, Selectors & Linking Methods
💡 Click "Try in Editor" to run 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.
Ready for the BEGINNER Assessment?
10 randomized questions with automated score & retake. Score 70% to pass!