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:
- Open your web browser (e.g. Google Chrome) and navigate to the webpage you want to edit.
- Open the developer tools by pressing "Option + Command + I" on a Mac or "Ctrl + Shift + I" on Windows.
- 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.
- 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.
- 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.
- 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.
- 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.