FMWDS

How do you select a specific element on your page with your browser’s developer tools? Right-click on the element you want to select and choose “Inspect” or press Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (Mac) to open the Developer Tools. The selected element will be highlighted in the “Elements” tab.

What does a strikethrough in a CSS declaration mean in your browser’s developer tools? A strikethrough in a CSS declaration indicates that the style is overridden by a more specific rule or a later rule in the stylesheet. It helps you identify which styles are not being applied to the selected element.

How do you change CSS in real time on specific elements of a web page with your browser’s developer tools? In the “Elements” tab, find the CSS property you want to change, double-click on its value, and enter a new value. The change takes effect immediately, allowing you to experiment with styles before updating your actual stylesheet. Example:

/* Original style in your stylesheet */
p {
  color: blue;
}

In DevTools, you can change it to:

p {
  color: red;
}

This change will be visible in real time on the selected element on the web page.