Metadata

Date :: 13-04-2025
Tags :: web-dev

Notes

🌐 CSS Inspection & Chrome Developer Tools – Detailed Notes

🔍 What is CSS Inspection?

CSS Inspection is the process of examining and analyzing how CSS is applied to various elements in a web page. This is crucial for debugging layout issues, understanding how styles are inherited, and learning from other websites’ styling.

🧰 What are Chrome Developer Tools?

Chrome Developer Tools (DevTools) are a set of web authoring and debugging tools built directly into the Chrome browser. They help web developers:

Inspect HTML and CSS.
Modify live content.
Diagnose performance issues.
See console logs and errors.
Debug JavaScript.

⚠️ Note: These tools are exclusive to Google Chrome, so for this lesson (and generally for best development experience), use Chrome.

🛠️ How to Open Chrome Developer Tools

There are multiple ways to open DevTools:

Click the three-dot menu in the top-right corner of Chrome.
Navigate to More Tools > Developer Tools.

✅ Method 2: Keyboard Shortcuts

Mac: Cmd + Option + I
Windows/Linux: Ctrl + Shift + I
Or simply press F12 (common shortcut on all platforms)

✅ Method 3: Right-click Method

Right-click on any element on the web page.
Click Inspect to open DevTools and jump directly to the selected element in the Elements panel.

📁 DevTools Layout Overview

Once DevTools is open, the two main panels you’ll work with for CSS are:

🔹 Elements Tab

This shows the HTML structure (DOM) of the webpage.

You can expand or collapse elements.
Selecting an element shows its styles.

🔹 Styles Section (Right Panel)

Displays the CSS rules applied to the selected element:

Shows active styles and overridden ones (crossed out).
Highlights the source file (like styles.css) for each rule.
You can edit CSS live by clicking and modifying values.

🖱️ Selecting Elements for Inspection

Use the cursor icon (top-left corner of DevTools) to visually select any element on the page.
Or navigate through the DOM in the Elements tab to find what you’re looking for.

🎨 Live Editing of CSS

You can make temporary changes to CSS to experiment:

Select an element (e.g., <h1>)
In the Styles panel, click the + button or start typing a CSS rule.
```
color: black;
```
See the changes reflect live on the page.
You can toggle rules on/off by clicking the checkboxes next to each property.
These changes are not saved to your original code—they are only temporary in the browser session.

❗Important Note:

These edits only affect your local copy of the website loaded in the browser. They do not affect:

The actual website source files.

Other users’ view.

Remote servers.

Permanent code.

So feel free to experiment!

🧪 Understanding Applied vs. Inherited vs. Overridden Styles

If a style is overridden by another rule, it appears crossed out.
CSS follows the Cascade and Specificity rules to determine which styles are applied.
You can check the Computed Tab to see the final styles applied (e.g., final color, font-size, padding) without the clutter of overriding.

📊 CSS Overview Tool

This is a powerful tool for getting a summary of a webpage’s styling.

How to access:

In DevTools, click the three-dot menu within the DevTools panel (not the browser one).
Go to More Tools > CSS Overview.
Click “Capture Overview”.

It shows:

Background colors used.
Text colors.
Font families.
Contrast issues (great for accessibility).
Media queries (optional section covered later).

✨ Use Case:

If you like a website’s design and want to know:

What fonts they used?
What are the brand colors?
How many unique styles they applied?

The CSS Overview can give you all that.

✅ Practical Use: The Inspector Challenge

You were asked to visit this sample website: https://appbrewery.github.io/css-inspection/

And answer 4 questions using the inspector:

Question	How to Find	Correct Answer
What is the background color of the `body`?	Inspect the `<body>` tag > Styles	`aliceblue`
What is the font-size of the `h1`?	Select `<h1>` > Styles	`3rem`
What is the font-weight of the `h2`?	Select `<h2>` > Styles	`500`
What is the font-family of the `<p>`?	Check inherited styles or Computed tab	`Arial, sans-serif`

If you got all 4 correct—great job! If not, rewatch the demo or practice more.

📌 Summary of Key Learnings

Feature	Description
DevTools	Built-in Chrome tool for web development.
Inspector	Lets you view and modify HTML/CSS live.
Styles panel	Shows all CSS rules applied to an element.
Computed panel	Displays final, resolved styles.
CSS Overview	Summarizes styling info like fonts, colors.
Live editing	Try out CSS changes without editing the source code.
Safe experimenting	Changes don’t affect the server or anyone else.

💡 Pro Tips

Use DevTools to learn from professional websites. Inspect how they style buttons, layout sections, or design responsive pages.
Try changing styles live to see how values like padding, color, font-size, or display behave.
Use the Computed tab to simplify debugging complex styles.
Explore fonts and color schemes from sites you admire.

Quartz 4

Explorer

Inspecting CSS