Target and Edit CSS

Here are the step-by-step instructions on how to use browser developer tools to find a specific object, see its CSS properties, and edit it to custom rules:

1. Open your web browser (e.g. Google Chrome) and navigate to the webpage you want to edit.
2. Open the developer tools by pressing "Option + Command + I" on a Mac or "Ctrl + Shift + I" on Windows.
3. Click on the "Elements" tab in the developer tools. This will display the HTML structure of the webpage, with each element represented by a block.
4. Use the mouse to hover over the block that represents the object you want to edit. The corresponding element on the page will be highlighted.
5. Click on the block to select the object. Its CSS properties will be displayed in the right-hand panel of the developer tools under the "Styles" tab.
6. To edit a CSS property, click on the property name or value and type in your custom rule. You can also add a new CSS property by clicking on the "+" icon next to the existing properties.
7. Press "Enter" to save your changes. The object on the page will update in real-time to reflect your new CSS rules.

Note: It's important to keep in mind that any changes made in the developer tools are temporary and will be lost when the page is refreshed. To make permanent changes to a website's CSS, you will need to modify the site's source code directly.