---
id: 64a55a6102815a7d323aab8b
title: The Box Model Lesson D
challengeType: 15
dashedName: the-box-model-lesson-d
--- 
# --description--

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.

<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/inspector-icon.png" alt="A web development environment with developer tools open, highlighting a blue inspector icon in the top-left for selecting webpage elements to view HTML structure and styles.">

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 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:

<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/overwritten-style.png" alt="CSS code snippet in the developer console showing .hero_main-heading with applied margin-bottom: 100px, padding-bottom: 1.875rem, .accent color #ce973e. h1 style rules include font-size, weight, letter-spacing, with its margin-bottom: 2rem overridden.">

# --assignment--

Play around with Chrome Dev Tools and see if you can answer the following question.

# --questions--

## --text--

In the Styles pane, what information can you view about an element when it is selected?

## --answers--

HTML structure and CSS rules

---

Styles tab

---

Inspector tab

---

Applied styles and overwritten styles.


## --video-solution--

4
