TutiPost HTML Styling Guide 🌷

● COLOR PICKER TOOL

Pick a color and get the hex code instantly!

βœ“ Copied to clipboard!

Popular Colors:

#ff69b4
Pink
#9b59b6
Purple
#4ecdc4
Cyan
#ff6b6b
Red
#45b7d1
Blue
#f39c12
Orange
#2ecc71
Green
#e74c3c
Coral
#00ffb3
Aqua
#ffe77b
Yellow

1. GRADIENT TEXT (Using inline CSS)

<span style="background: linear-gradient(to right, #ff6b6b, #4ecdc4, #45b7d1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 30px; font-weight: bold;">Rainbow Gradient Text</span>

Result:

Rainbow Gradient Text

2. CURSIVE/ITALIC TEXT

<i>This text is in italics</i>
<em>This is also italic (emphasized)</em>
<span style="font-family: cursive;">This uses cursive font</span>

Result:

This text is in italics
This is also italic (emphasized)
This uses cursive font

3. BOLD TEXT

<b>This is bold</b>
<strong>This is also bold (strong)</strong>

Result:

This is bold
This is also bold (strong)

4. NORMAL TEXT

<p>This is just normal paragraph text.</p>
Just plain text with no tags works too!

Result:

This is just normal paragraph text.

Just plain text with no tags works too!

5. DIFFERENT FONT STYLES

<font face="Arial">Arial Font</font>
<font face="Georgia">Georgia Font</font>
<font face="Courier New">Courier New Font</font>
<font face="Verdana">Verdana Font</font>
<span style="font-family: monospace;">Monospace Font</span>
<span style="font-family: fantasy;">Fantasy Font</span>

Result:

Arial Font
Georgia Font
Courier New Font
Verdana Font
Monospace Font
Fantasy Font

6. HORIZONTAL COLORED LINES

<hr>
<hr style="border: 2px solid #ff6b6b;">
<hr style="border: 3px dotted #4ecdc4;">
<hr style="border: 5px dashed #45b7d1;">
<hr style="border: none; height: 10px; background: linear-gradient(to right, #ff6b6b, #4ecdc4, #45b7d1);">

Result:

7. VERTICAL COLORED LINES (Using borders)

<span style="border-left: 5px solid #ff6b6b; padding-left: 10px;">Text with left border</span>
<span style="border-right: 5px solid #4ecdc4; padding-right: 10px;">Text with right border</span>

Result:

Text with left border
Text with right border

8. TEXT ALIGNMENT

<p align="left">Left aligned text (default)</p>
<p align="center">Center aligned text</p>
<p align="right">Right aligned text</p>
<div style="text-align: justify;">Justified text spreads out across the full width</div>

Result:

Left aligned text (default)

Center aligned text

Right aligned text

Justified text spreads out across the full width of the container, making both the left and right edges line up evenly. This is especially noticeable with longer paragraphs.

9. COLORED TEXT

<font color="#ff0000">Red text</font>
<font color="#00ff00">Green text</font>
<font color="#0000ff">Blue text</font>
<span style="color: #ff69b4;">Hot pink text</span>
<span style="color: #9b59b6;">Purple text</span>
<span style="color: #f39c12;">Orange text</span>

Result:

Red text
Green text
Blue text
Hot pink text
Purple text
Orange text

10. FONT SIZES

<font size="1">Size 1 (smallest)</font>
<font size="3">Size 3 (default)</font>
<font size="5">Size 5</font>
<font size="7">Size 7 (largest)</font>
<span style="font-size: 10px;">10px size</span>
<span style="font-size: 24px;">24px size</span>
<span style="font-size: 40px;">40px size</span>

Result:

Size 1 (smallest)
Size 3 (default)
Size 5
Size 7 (largest)
10px size
24px size
40px size

11. LINKS

<a href="https://www.tumblr.com">Link to Tumblr</a>
<a href="https://www.tumblr.com" style="color: #ff69b4; text-decoration: none;">Styled pink link</a>
<a href="https://www.tumblr.com" style="color: #9b59b6; font-weight: bold;">Bold purple link</a>

Result:

Link to Tumblr
Styled pink link
Bold purple link

12. IMAGES

Basic Image:

<img src="IMAGE_LINK">

Result:

Image with Size Control:

<img src="IMAGE_LINK" width="200">
<img src="IMAGE_LINK" height="150">
<img src="IMAGE_LINK" style="width: 250px; height: auto;">

Result:



Image Alignment:

<p align="center">
  <img src="IMAGE_LINK" width="200">
</p>

<img src="IMAGE_LINK" align="left" width="150"> Text wraps around left-aligned image...

<img src="IMAGE_LINK" align="right" width="150"> Text wraps around right-aligned image...

Result:

This text wraps around the left-aligned image. You can write a whole paragraph here and it will flow nicely around the image. Great for creating magazine-style layouts!

Images with Borders & Styling:

<!-- Solid border -->
<img src="IMAGE_LINK" style="border: 5px solid #ff69b4;">

<!-- Dashed border -->
<img src="IMAGE_LINK" style="border: 3px dashed #4ecdc4;">

<!-- Rounded corners -->
<img src="IMAGE_LINK" style="border-radius: 15px;">

<!-- Circle image -->
<img src="IMAGE_LINK" style="border-radius: 50%; width: 150px; height: 150px;">

<!-- Shadow effect -->
<img src="IMAGE_LINK" style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">

<!-- Multiple effects combined -->
<img src="IMAGE_LINK" style="border: 3px solid #ff69b4; border-radius: 10px; box-shadow: 0 4px 8px rgba(255,105,180,0.3);">

Result:











Clickable Images (Image as Link):

<a href="WEB_PAGE_URL" style="text-decoration: none;">
  <img src="IMAGE_LINK" width="200">
</a>

<!-- Image link with border on hover -->
<a href="WEB_PAGE_URL">
  <img src="IMAGE_LINK" style="border: 2px solid transparent; transition: border 0.3s;" onmouseover="this.style.border='2px solid #ff69b4'" onmouseout="this.style.border='2px solid transparent'">
</a>

Result:

Multiple Images Side by Side:

<p align="center">
  <img src="IMAGE_LINK" width="150">
  <img src="IMAGE_LINK" width="150">
  <img src="IMAGE_LINK" width="150">
</p>

<!-- With spacing -->
<img src="IMAGE_LINK" style="margin: 5px;" width="100">
<img src="IMAGE_LINK" style="margin: 5px;" width="100">
<img src="IMAGE_LINK" style="margin: 5px;" width="100">

Result:

GIFs (same as images!):

<img src="IMAGE_LINK" width="250">
<img src="GIF_LINK" width="250">

Note: GIFs work exactly like regular images - just use the GIF URL!

Where to get image URLs? Upload to Tumblr first, then right-click β†’ "Copy image address" OR use external hosting like Imgur, Giphy (for GIFs).

13. ADDITIONAL STYLING

Underline & Strikethrough:

<u>Underlined text</u>
<s>Strikethrough text</s>
<strike>Also strikethrough</strike>

Result:

Underlined text
Strikethrough text
Also strikethrough

Superscript & Subscript:

E = mc<sup>2</sup>
H<sub>2</sub>O

Result:

E = mc2
H2O

Background Colors:

<span style="background-color: #ffff00;">Yellow highlight</span>
<span style="background-color: #ff69b4; color: white; padding: 5px;">Pink background</span>

Result:

Yellow highlight
Pink background

Headers:

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>

Result:

Header 1

Header 2

Header 3

Header 4

Blockquote:

<blockquote>This is a quoted section</blockquote>

Result:

This is a quoted section

Spacing:

Text&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;with&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spaces
<br><br> for line breaks

Result:

Text     with     spaces

Multiple line breaks above

14. COMBINING STYLES

<p align="center">
  <font size="6" color="#9b59b6"><b><i>✨ Aesthetic Post ✨</i></b></font>
</p>
<hr style="border: 2px solid #ff69b4;">
<p align="center">
  <span style="color: #4ecdc4;">Mix and match different styles</span>
</p>

Result:

✨ Aesthetic Post ✨

Mix and match different styles

πŸ“ NOTES: