Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more
Labels

Day 11: Introduction to CSS & Syntax

🎨 Day 11: Introduction to CSS & Syntax

Today we begin CSS — the language that styles HTML. You’ll learn the basics (what CSS is), how the cascade works, selector basics, how to include CSS, and the concept of specificity and inheritance.

1. What is CSS?

CSS (Cascading Style Sheets) controls how HTML elements are displayed — colors, spacing, layout, fonts, and responsive behavior.

2. Three ways to add CSS

  • Inline: directly in the element with the style attribute (quick tests; avoid for maintainability).
  • Internal: inside a <style> block in the document head (useful for single-page style overrides).
  • External: link a separate .css file using <link rel="stylesheet" href="style.css"> — recommended for real projects.

3. CSS rule syntax

selector {
  property: value;
  property2: value2;
}

4. Cascade, Specificity & Inheritance (why some rules win)

Cascade: multiple sources (browser, external, internal, inline) merge into final styles. Order matters — later rules can override earlier ones.

Specificity (priority):

  • Inline styles (e.g., style="...") — highest priority
  • ID selectors (e.g., #header)
  • Class / attribute / pseudo-class selectors (e.g., .btn, [type="text"], :hover)
  • Element selectors (e.g., p, h1) & pseudo-elements (lowest)

Example of specificity override:

p { color: blue; }         /* element selector */
.intro { color: green; }   /* class selector -> higher specificity */
#main p { color: red; }    /* id selector -> even higher specificity */

5. Important: !important

Avoid using !important unless absolutely necessary — it overrides specificity and makes maintenance harder.

Try it yourself — CSS basics

Edit the CSS inside the <style> block and click Run Code. This demo shows internal CSS, inline, and specificity behavior.


Practice Tasks

  1. Create a CSS file and move the internal styles into it (practice linking external CSS).
  2. Create three selectors (element, class, id) that style the same element and observe specificity order.
  3. Try removing inline style and see the cascade result.

Comments

Post a Comment