How do you apply style rule in Safari Web Inspector?

Question

Chrome Developer Tools allows you to apply a style rule in the Styles pane. I haven't found a way to do this in Safari (Style Rules pane). Any one know if it is possible?

Also, does Safari have rulers like Chrome does?

Answer 1

Safari 8.0.8 on OS X

1. Right-click any element and select Inspect Element from the pop-up menu
2. Ensure Styles and Rules are selected on the right hand side of the inspector
3. You can then either add individual rules by clicking + New Rule, or simply click and start typing rules where Click to Edit appears (refer to image below)
4. Enter your new rules and these will be applied to the element being "inspected" in the browser window.

As for a ruler? Well, I haven't found one, but the Inspect button will give you the dimensions of elements when hovered in the browser window.

Answer 2

1. Open the DevTools-like panel (CMD + OPT + C)
2. Click on the Elements tab
3. If it's not open yet, click on "Show the details sidebar" on the right (CMD + OPT + 0)

OR

1. Right-click element and select "Inspect Element"
2. If it's not open yet, click on "Show the details sidebar" on the right (CMD + OPT + 0)