== The Elements Tab

The elements tab allows you to look at the HTML and CSS code, that are 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 actually 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

Underneath the HTML source, you can find information about the CSS which is used to style the
Website. Like the HTML, you can also edit the CSS and therefore adjust the styling of the website.
You can edit specific values, or turn off individual styling.

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