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.