Paragraph Elements (<p></p>) contain text. It is basically a container to hold paragraphs. Paragraphs are block-level elements.
At the bottom of this page there is a code editor pre-loaded with the lesson's code.Like divs, paragraphs are Block-level Elements. This means a few things:
✶ A line break is automatically insertered before and after the element.
✶ The element fills the entire width of the element that contains it.
✶ The element is rectangular shapped.
<body>
<div>
<!-- Paragraph-->
<p>This is an HTML paragraph. Paragraphs are really rad
because they can contain lots of words. Words commuicate ideas. Yay to
knowledge!!!</p>
</div>
</body>
➼ <body> - Start Body Element
➼ <div> - Start Div Container
➼
<p></p> - Paragraph Element - It will take up the entire length of the div container (where the paragraph is contained).
➼ </div> - End Div
➼ </body> - End Body
Now let's pretend our CSS code does the following:
✶ BODY backgrounds are BLUE
✶ DIV backgrounds are GREEN
✶ PARAGRAPH backgrounds are YELLOW
This is how the example would display:
Now, play with the code in the code editor box below.