CSS28 min readCSS Selectors Basics
Learn CSS selectors slowly and clearly: element, class, and id selectors with real examples and how they affect the UI.
Selectors tell CSS **which HTML elements** to style. ## Element selector Styles all elements of one type. ```css p { color: gray; } ``` ## Class selector Styles elements with a specific class. HTML: ```html <p class="note">Important</p> ``` CSS: ```css .note { color: red; } ``` ## ID selector Styles one unique element. HTML: ```html <h1 id="title">Home</h1> ``` CSS: ```css #title { font-size: 32px; } ``` ## Real world tip - class → reusable - id → unique - element → general styling ## UI imagination - class is like a label - id is like a CNIC (unique) ## Remember - Use class most of the time - Avoid overusing id