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:

Basic markup

<p>This is a text which uses simple paragraph HTML tags</p>

Will render:

This is a text which uses simple paragraph HTML tags

Extended markup

<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

Show delete Default -Default-

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>

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

1. On Chaturbate platform, paragraph elements are rendered with a bigger space between the above and below elements reason for which we suggest use of line-height: normal;
2. Use of 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="_ "
Twitter Facebook YouTube Reddit

Available Advertising Space. Contact us and rent this space for your banner or textual ad.

contact

Available Advertising Space. Contact us and rent this space for your banner or textual ad.

contact

Available Advertising Space. Contact us and rent this space for your banner or textual ad.

contact

CGC Stats and Staff

Why CGC

Because it is one service you can rely on. Because it's unique and flexible.
Because over +17k registered members, studio owners, web cam performers, affiliates and web designers can't be wrong.