p
Designing Chaturbate Bios - <p>
HTML Tag - Paragraph
Paragraphs are usually represented in web pages as blocks of text separated from other blocks by blank lines, but HTML paragraphs can hold any content, such as images or links.
| TAG | HTML MARKUP | DEFINES |
|---|---|---|
<p> |
<p>...</p> |
Defines a paragraph HTML element |
HTML MARKUP
p - can be used as default, open paragraph tag followed by content and closing paragraph tag, but also supports inline-css.
HTML Markup Code:
<p>This is a text which uses simple paragraph HTML tags</p>
Will render:
This is a text which uses simple paragraph HTML tags
<p style="display:block;width:90%;height:auto;padding:15px;margin:4px auto 12px auto;font-size:16px;color:#666;background-color:#f1f1f1;">This is a text which uses paragraph HTML tags and inline-css</p>
Will render:
This is a text which uses paragraph HTML tags and inline-css
Code Snippets
Test markup codes and see how your browser is rendering them. Use button to see how to use the source editor and rendering tool
Markup Code Box
Default button, on click, removes the markup code from light-blue box
Render Box
That's how it looks rendered in browser. Optionally you can Save as PDF
Markup Codes using <p> HTML tag
Paragraph tags can hold different types of content but keep in mind that there's a certain legacy between all HTML tags.
Paragraph tags and how to style them to look more appealing using inline-CSS
1. Basic html for a paragraph with some inline-css
<p style="display:block;width:50%;height:auto;margin:7px auto 5px 3px;color:#036;padding:4px 8px;text-align:left;">Some Text Here</p>
Show:
Some Text Here
2. Other styling using inline-css
<p style="display:block;width:50%;height:auto;margin:7px auto 5px 3px;color:#f1f1f1;padding:15px;text-align:left;background-color:#4b9cf3;">Some Text Here</p>
Show:
Some Text Here
3. Other styling using inline-css
<p style="display:block;width:50%;height:auto;margin:7px auto 5px 3px;color:#f1f1f1;padding:15px;text-align:left;background-color:#222;-webkit-border-radius:20px 0 20px 0;border-radius:20px 0 20px 0;">Some Text Here</p>
Show:
Some Text Here
4. Using Paragraph HTML markup with a link inside
<p style="display:block;width:50%;height:auto;margin:7px auto 5px 3px;color:#f1f1f1;padding:15px;text-align:left;background-color:#222;-webkit-border-radius:20px 0 20px 0;border-radius:20px 0 20px 0;"><a href="#" style="color:pink;text-decoration:none;">Some Text Here</a></p>
Show:
As mentioned above, there's a legacy and a certain structure between markup codes, from parent to child. In this case the parent element is the paragraph and the child element is the link.
Notice that paragraph markup is using the #f1f1f1 as font color, and link element is using pink color. If for the link, no color is specified, will fallback to default or inherits the #f1f1f1 (set up for parent) in special circumstances.
5. Using Paragraph HTML markup with image inside
<p style="display:block;width:50%;height:auto;margin:7px auto 5px 3px;padding:15px;text-align:left;background-color:#222;-webkit-border-radius:10px;border-radius:10px;"><img src="../../img/cdcoffee.png"/></p>
Show:
6. Using Paragraph HTML markup with clickable image also known as banner
<p style="display:block;width:50%;height:auto;margin:7px auto 5px 3px;padding:15px;text-align:left;background-color:#f1f1f1;-webkit-border-radius:10px;border-radius:10px;"><a href="#"><img src="../../img/cdcoffee.png" style="border:3px double #F03;-webkit-border-radius:5px;border-radius:5px;background-color:#fff;"/></a></p>
Show:
7. A bit more complex, 1 paragraph containing 2 other blocks defined as span (also a HTML tag accepted by Chaturbate)
<p style="display:block;width:80%;height:auto;margin:7px auto 5px 3px;padding:15px;text-align:left;background-color:#222;"><span style="display:inline-block;width:30%;height:auto;padding:10px;text-align:center;background-color:#F3C;color:#fff;margin:5px auto;">Box Left</span><span style="display:inline-block;width:30%;height:auto;padding:10px;text-align:center;background-color:#06C;color:#fff;margin:5px auto;">Box Right</span></p>
Show:
Box LeftBox Right
Inline-css can be added to:
Editing Tips
Our suggestions for fast editing and viable markup rendering
line-height: normal;target="_ ". All links (on page or external URLs) are set up to open on another page (with a countdown) so there's no need to use target="_ "
