== The Elements Tab

The elements tab allows you to look at the HTML and CSS code used to define and style the website.

=== HTML source

If you hover over one line, you can see that a part of the website turns blue. That means that
this particular HTML line defines this section of the website.
The elements tab allows you to make changes to every single HTML element. For example, if you click inside
a paragraph (<p>...</p>) Tag,  you can edit the content of the website. If you have made your changes and then click enter
Chrome will update the website to show your edits. You can also change the HTML Tag used,
the classes and id's a tag has, and much more.

image::images/ChromeDev_Elements.jpg[DeveloperToolsElements,500,350,style="lesson-image"]

=== CSS source

You can find information about the CSS used to style the
website under the HTML source. Like the HTML, you can also edit the CSS and, therefore, adjust the website's styling.
You can edit specific values or turn off individual styling.

image::images/ChromeDev_Elements_CSS.jpg[DeveloperToolsElementsCSS,500,350,style="lesson-image"]
