🏳️⚧️
- the web inspector is your best friend; mash on Option + Command + I on Mac1, or Ctrl + Shift + I on Windows to open it2
- you'll be presented with a collapsible tree view of the elements of the page
- every HTML tag (like
<html>or<div>) becomes an element in this view - you can use the little "crosshair" icon in the toolbar to select (in the main web page view) a particular element you're interested in, which will bring it up in the list of elements
- from here, you can see what CSS is being applied to it, and see where it is in context, you can also adjust CSS properties from the sidebar and preview what changes might work!
- my favourite source of reference for what properties exist is the MDN wiki, accept no substitute!
- steal everything; there's so much good stuff out there, don't feel bad about peeking at how it works, CSS is everybody's
-
On Safari, you'll need to turn on "Show Develop menu in menu bar" in the "Advanced" section of Safari preferences first!
-
Can you believe it? They standardised these shortcuts across browsers?? How did we manage that…
This page's posts are visible only to users who are logged in.