/* Specificity: 0, 0, 1 */ /* This loses */ button background-color: blue; /* Specificity: 0, 1, 1 */ /* This wins because it combines a class and an element */ .main-btn button background-color: red; Use code with caution.
In this guide, we've covered the basics of CSS, including selectors, properties, values, and units. We've also discussed best practices, tips, and tricks to help you write efficient and effective CSS code. With practice and experience, you'll become proficient in writing CSS and create stunning web pages.
This is a matching system that determines which rule is more specific to an element. An inline style beats an ID selector; an ID selector beats a class selector; a class selector beats a plain HTML tag. CSS Demystified Start writing CSS with confidence
This single property changes the math to what humans actually expect.
The declaration block is wrapped in curly braces {} . Inside this block, you define the visual modifications you want to enforce. Properties and Values /* Specificity: 0, 0, 1 */ /* This
| Unit | Use Case | Why | | :--- | :--- | :--- | | | Borders, small shadows, precise details | Pixels are absolute. They don't change. | | rem | Font sizes, margins, padding | Relative to the root ( <html> ) font size. Accessibility win. If the user increases their browser font size, your layout scales. | | em | Rare. Use only for media queries or specific component scaling | Relative to the parent font size. Can cause compounding chaos. | | vh/vw | Full-screen hero sections, splash screens | 1vh = 1% of the viewport height. | | % | Widths inside flex/grid parents | Relative to the parent element's size. |
Leo looked up at Maya and grinned. The fear was gone. He was no longer just guessing and refreshing. Armed with the fundamentals, Leo was finally writing CSS with confidence. With practice and experience, you'll become proficient in
body line-height: 1.5; font-family: system-ui, -apple-system, sans-serif;
Scales relative to the parent element's size.
The transparent space outside the border, used to push other elements away. The Problem with the Default Box Model