curriculum/challenges/english/blocks/top-the-box-model/64a55a6102815a7d323aab8b.md
In the Elements pane, you can see the entire HTML structure of your page. You can click on any of the elements in this pane to select that specific element. Alternatively, you can click the blue-highlighted icon shown below on the left, and hover over any element on the page.
When an element is selected, the Styles tab will show all the currently applied styles, as well as any styles that are being overwritten (indicated by a strikethrough of the text). For example, if you use the inspector to click on the “Your Career in Web Development Starts Here” header on <a href="https://www.theodinproject.com/" target="_blank">The Odin Project homepage</a>, on the right-hand side you’ll see all the styles that are currently affecting the element, as seen below:
Play around with Chrome Dev Tools and see if you can answer the following question.
In the Styles pane, what information can you view about an element when it is selected?
HTML structure and CSS rules
Styles tab
Inspector tab
Applied styles and overwritten styles.
4