Div and Span Elements

In this lab, you will learn about div and span elements, two of the most commonly used HTML elements. A div (short for division) is a block-level element that is often used as a container for other HTML elements. A span is an inline element, which means it takes up only as much width as necessary and is typically used for small chunks of HTML inside a line of text.

The goal of this lab is to create a div element with an ID of 'outer-div'. Inside that div, create a paragraph with an ID of 'inner-para'. Then, create a span element inside the paragraph that should have an ID of 'highlight'. Finally, apply inline CSS styles to the div and span elements.

Next, you have to set the color of the #outer-div to blue and a background-color of lightgray and the background-color of the span element to yellow to complete the challenge

You should be able to see that the background-color for span is only applied to the part where the text is written and not to the entire line, but in the case of div element the background color is applied to the entire row even if no content is present.