Using DevTools for CSS

Developer Tools (DevTools) in browsers like Chrome and Firefox are powerful for inspecting and editing CSS live, helping you debug layouts, check styles, and test changes quickly.

1. How to Open DevTools

Windows/Linux: Press F12 or Ctrl + Shift + I
Mac: Press Cmd + Option + I
Right-click on any element and choose Inspect

2. Inspect and Edit CSS

Use the Elements panel to:

See HTML and CSS side by side
Click on an element to view and edit its styles
Enable/disable CSS properties by checking/unchecking
Live edit padding, margin, font, colors, etc.

Changes made here are **temporary** and reset on refresh.

3. Box Model Visual

DevTools shows the CSS box model visually, helping you understand:

Padding, border, margin
Element’s size and spacing
Clicking each area highlights it live on the page

4. Responsive Design Mode

Click the 📱 icon (Device Toggle Toolbar) to:

Simulate different screen sizes
Test breakpoints and media queries
Rotate orientation or throttle network speeds

5. Edit CSS Files Directly (Sources Panel)

In the Sources tab, you can:

Find and open CSS files
Live edit them for previewing changes
Use Cmd/Ctrl + P to search file by name

6. Pro Tips

Right-click on a style rule → “Copy Rule”
Click the color box to use a color picker or change color format
Use the filter in Styles pane to search properties
Use the computed tab to see final styles (after all inheritance and cascade)

Conclusion

DevTools is an essential part of modern CSS development. It helps you test changes in real-time, debug layouts visually, and improve your workflow dramatically.

← Previous: Product Card Next: BEM Naming →