Right-click for more options (delete, duplicate, etc.)
Drag elements to reorder them!
Remember: Changes in DevTools are temporary - refresh and they're gone!
Understanding the Styles Panel 🎨
element.style { }
.my-class {
color: blue; color: red;
}
inherited from body {
font-family: Arial;
}
What you'll see:
📝 element.style: Inline styles (highest priority)
🎯 Matched CSS Rules: All rules that apply
❌ Strikethrough: Overridden styles
👨👩👧 Inherited: Styles from parent elements
Demo 2: Live Style Editing ✏️
Change My Styles!
Use DevTools to modify me
Let's modify together:
Inspect the blue box above
In Styles panel, click on the background color
Change it to #ff6b6b
Add a new property: transform: rotate(5deg)
Disable/enable properties with checkboxes
Keyboard Shortcuts in Styles:↑↓ change values |
Tab next property |
Esc cancel
Adding New CSS Rules ➕
Three ways to add styles:
1. element.style
Click in the empty element.style {} block
Adds inline styles to that specific element
2. Existing Selector
Click inside any existing CSS rule
Add new properties to that rule
3. New Rule Button (+)
Click the + button in Styles panel
Creates a new CSS rule with auto-generated selector
Remember: Great for testing, but copy working CSS to your actual files!
Built-in Developer Tools 🛠️
Click on any color value to open:
🎨 Color Picker: Visual color selection
👁️ Eyedropper: Pick colors from anywhere on screen
📊 Color Format Toggle: HEX → RGB → HSL
♿ Contrast Ratio: Accessibility checker
Other helpful tools:
📐 Box Shadow Editor: Visual shadow builder
🔄 Animation Inspector: Slow down/pause animations
📏 Rulers: Enable from Settings → Preferences
Demo 3: Real-World Debugging 🐛
Why am I red? 🤔
My text is too small!
Debug Challenge:
Use DevTools to find out:
Why is the heading red instead of #333?
What's making the paragraph text small?
Why isn't the button purple (#667eea)?
Box Model in DevTools 📦
In the Styles panel, scroll down to find:
Content
Padding
Border
Margin
🟦 Blue: Content area
🟩 Green: Padding
🟨 Yellow: Border
🟧 Orange: Margin
Pro Tip: Hover over the box model to highlight that area on the page!
The Computed Tab 🧮
Shows the FINAL computed values
Styles Tab
Shows all CSS rules
Shows overrides
Shows source files
Can have conflicts
Computed Tab
Shows final values only
Alphabetically sorted
Shows inherited values
Shows winning rule
When to use Computed: When you need to know the ACTUAL value being applied, not the rules fighting for control!
Quick Console Magic 🎩
Selecting elements with JavaScript:
// Select by ID
document.querySelector('#myId')
// Select by class
document.querySelector('.myClass')
// Select all matching elements
document.querySelectorAll('p')
// Quick shortcuts in console
$0 // Currently selected element
$('selector') // Short for document.querySelector
$$('selector') // Short for document.querySelectorAll
Try in Console:
Open Console tab
Type: document.querySelector('h1')
Type: $0.style.color = 'red'
See the magic happen!
Practice Activity 1: Element Hunt 🔍
10-Minute Challenge
Visit any popular website (CNN, Amazon, etc.) and:
Use the selector tool to find:
The main navigation menu
The largest image on the page
A button or link
For each element, identify:
Its HTML tag
Its main CSS class
Its font-size and color
Change at least 3 CSS properties
Take a screenshot of your changes!
Practice Activity 2: CSS Detective 🕵️
Partner Activity (5 minutes each)
In pairs, take turns:
Partner A: Opens their one-page website
Partner B: Uses DevTools to:
Find an element with conflicting CSS (strikethrough)
Identify which rule is "winning"
Add a new CSS property
Change an existing color or size
Switch roles after 5 minutes
Share one interesting finding with the class
Essential Keyboard Shortcuts ⌨️
Opening DevTools
F12 Open DevTools
Ctrl+Shift+C Inspect element
Ctrl+Shift+J Open Console
While in DevTools
Ctrl+F Search in panel
Esc Toggle console drawer
Ctrl+] Next panel
In Styles Panel
↑↓ Increment values
Shift+↑↓ ±10
Alt+↑↓ ±0.1
Mac Equivalents
Replace Ctrl with Cmd
Replace Alt with Option
Bonus: Responsive Design Mode 📱
Click the device icon 📱 or press Ctrl+Shift+M
Test your site on different devices:
📱 iPhone, iPad, Android devices
💻 Different desktop sizes
🔄 Rotate between portrait/landscape
🌐 Throttle network speed
📸 Capture screenshots
Coming Soon: We'll dive deep into responsive design in a few weeks!
Homework Assignment 📚
Due: Before Next Class
Complete The Odin Project Readings:
📖 Chrome DevTools Overview
📖 Open Chrome DevTools
📖 Get Started With Viewing And Changing The DOM
📖 View and Change CSS (with interactive exercises!)
Practice Exercise:
Using DevTools on your one-page website:
Find and fix any CSS conflicts (strikethrough styles)
Experiment with 5 new CSS properties
Use the color picker to create a new color scheme
Take screenshots of before/after
Pro Developer Tips 💡
🎯 Copy Working CSS: Right-click → Copy → Copy styles
🔍 Search Everything: Ctrl+Shift+F searches all files
📸 Screenshot Element: Right-click element → Capture node screenshot
🎨 Force States: Toggle :hover, :active, :focus states
📝 Edit HTML: Double-click or F2 to edit HTML directly
🚀 Dock Position: Undock DevTools for more space
Remember: DevTools changes are temporary! Always copy successful changes to your actual CSS files!
Today's Key Takeaways 🎯
You Can Now:
✅ Open and navigate Chrome DevTools confidently
✅ Inspect any element on any website
✅ Understand CSS cascade through strikethrough
✅ Edit CSS in real-time for testing
✅ Use the box model visualizer
✅ Debug CSS conflicts effectively
Next Class: The Cascade - How CSS rules fight and win!
Questions & Open Practice 🤔
Common Questions:
How do I save my DevTools changes permanently?
Why are some styles crossed out?
Can I edit JavaScript in DevTools too?
How do I inspect hover states?
What's the difference between Styles and Computed?
Remaining Time:
Practice with DevTools on your own site or explore other websites!