Determining the CSS styles affecting an element and which style needs to be modified

One can determine the CSS styles affecting any element by alt-clicking on the element in Dreamweaver. This will display the various tags, classes, and id's in the CSS styles that are affecting this element. If you mouseover any of these tags, classes, or IDs, the stylesheet properties and values associated with these tags will be displayed. If one double-clicks any of tags, classes, or ID, one will be taken to the external style or embedded style so that one can edit it directly.

Let's see how this works in practice. Suppose one had chosen the two column, fixed, right sidebar layout (html and css) and one wanted to modify the green background color in the navbar area (where link1 through link 4 appear). By alt-clicking and the mouseover technique, one can determine that the following tags and classes have a background-color CSS property, and hence could be determining the green background color:

body

.container

.sidebar1

nav a, nav a:visited

nav a:hover, nav a:active, nav a:focus

Now although one could examine the background-color specified in each and determine which of these hexadecimal colors specified for each of these is the right shade of green, it is better to inspect the structure of the document in order to determine which of the specifications to change. The code of the document is as follows:

<body>
<div class="container">
<header>
<a href="#"><img src="" alt="Insert Logo Here" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" /></a>
</header>
<div class="sidebar1">
<nav>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</nav>
<aside>
...
</aside>
</div>
<article class="content">
<section>
...
</section>
<section>
...
</section>
<section>
...
</section>
</article>
<footer>
...
<address>
...
</address>
</footer>
</div>
</body>
</html>

------------------------------------------------

The div with the container class surrounds all the content on the page, so the background color outside of the container must be in the body tag. Since this color is not the green background color for the nav bar, we can conclude that this green background color is not set in the body tag. That leaves .container, .sidebar1, nav a, nav a:visited, and nav a:hover, nav a:active, nav a:focus as possibilities.
Now the green background color for the nav bar could in fact be set in the .container class and everywhere else inside the container, this background color would be overridden. Having the color for such a small area of the page being set in the .container class (which applies to the entire page) seems a little unlikely, and since the .container color is #FFFFFF, which is all white, we can conclude that the color for the navbar isn't being set in the container class.
Similarly the green background color for the nav bar could be set in the .sidebar1 class and overridden in the aside so it only shows up in the nav bar. However, examining the html and the css, there is no styling of the aside so the background color in the aside must be inherited from the sidebar class.
The green background color could be set in nav a, nav a:visited
nav a:hover, nav a:active, nav a:focus - these aren't a possibility because these apply when one is over the link or clicking on it, and the background color of interest appears when this is not the case
Thus we are left with only one possibility - nav a, nav a:visited

One can test this conclusion by changing the background-color for the nav a, nav a:visited properties and then verify the effect of the change in the browser. So that we can go back to the previous color if we so choose, you could comment out the old specification when you add in the new one.

Although going through the above reasoning process is instructive, one can often determine which style rule to change more directly. With the html page open in Chrome, right-click on the nav bar area and choose Inspect>Computed and see the CSS. One can change the color temporarily right there in Inspect. Microsoft Edge offers a similar Inspect feature. The Inspect feature in Edge appears to be preferable to the one in Chrome in one respect: if one were trying to determine the CSS rule which controlled the background color when one cursors over the navigation bar, the Chrome Inspect feature does not identify the relevant CSS whereas the Edge Inspect feature shows both it and the style rule where no hover is involved.

Revised: November 13, 2017. Comments to William Pegram, bill@billpegram.com